As a developer focusing primarily on writing backend software, I feel slightly anxious when I have to work with CSS. In my head, the work involved in producing correct and cross-browser compatible code feels monumental.
At the same time, I know how critical that skill is to product development. So, to work around this anxiety, I've picked up a couple of approaches that let me do frontend work without having to deal much with CSS (directly).
I've been able to test these out and implement them successfully on Developer to Manager, so I feel fairly confident about sharing them publicly that they'll be of some use to others.
In this post, I'll talk about some of these approaches that have worked for me.
No CSS
Everyone knows that code is a liability. The more code you write, the more there is to maintain, the more scope there is for bugs, so on and so forth. For any given problem, I personally would prefer a solution that uses 10 lines of code over one that uses 100 lines (no, code-golfing doesn't count).
I've been trying to apply the same approach to frontend development.
To avoid writing CSS directly, I've been relying a lot on frameworks like Bootstrap and Bulma because they provide a ton of primitives that I can use as-is to implement web frontends.
These frameworks been around long enough, so in general I don't feel the need to worry about issues like stability or cross-browser compatibility. Unless you still have to support Internet Explorer 6, you'll be fine. And apart from providing just helper classes, most of these frameworks also provide ready-to-use components -- things like modals, cards, dropdowns, etc. -- as well, which you can basically plug in to your project to get things working.
One caveat here is that this approach requires a lot of cooperation from the designer you're working with. If you're set on using stock Bootstrap and are not willing to write a single extra line of code, it's important to convey this limitation to the designer and see if they can work accordingly.
The chances of this working out are higher in a small team than in a large one. Nevertheless, I feel that the advantages make it worth a try.
Simple Design
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
I've found that simple designs are relatively easy to implement.
When I say "simple", I mean designs where every single element on the page has an extremely good reason to be there, and nothing feels unnecessary. Everything on the page feels deliberate and serving a purpose.
Take Zen Habits for instance. All that you see on this page is a title, the latest blog post, and a footer. There's hardly anything "extra" on the page. And even then, the intent of the page is crystal clear.
When designs are made following this line of thought, things are rather straight-forward to implement. If you're following the first approach and are not too keen on writing CSS yourself, you can pick up any CSS framework of your choice and use it without modifications to get your page ready. And in case you don't mind writing CSS, simple design reduces work so much that you can probably get things done in half the time.
I'm not suggesting that every single page on the Internet should look like Zen Habits. It would be boring if all websites are black and white.
The point instead is to think really carefully about what your page needs to accomplish, what elements are absolutely crucial to getting it done, and go from there.
Functional CSS
One more approach I've found to be helpful is using functional CSS frameworks like Tailwind.
While conventional frameworks (like Bootstrap) provide predesigned UI components, functional frameworks provide low-level utility CSS classes instead, to help you build custom design without ever having to write a single line of CSS.
As an example, to style a button so that it has a blue background and white
text, in the Bootstrap world you would probably add the btn btn-info classes
to the <button> element. In Tailwind, you'll use something like bg-blue-600 text-white for a similar effect. bg-blue-600 and text-white are utility
classes and are responsible for setting the background color of the target
element to a specific shade of blue (bg-blue-600), and the text color to white
(text-white).
Having such lower level classes is pretty neat, because this lets you create custom designs of your liking, without ever having to touch CSS code. All the styling is encapsulated in these classes which all apply directly to the HTML elements.
Personally, I haven't played around much with frameworks like this. But I've talked to friends who have had a great experience with Tailwind (and also Tachyons), so this is something I'd definitely recommend looking into.
Before concluding this post, I'd like to add a big disclaimer here.
Most of all this is helpful only if the size of the team you're working in is small -- think 1 or 2 developers. Teams bigger than that would probably tend to bring someone on who specializes in that skill anyway, so I'm not sure if all this would even apply.
But in case this does apply to the setting you're currently in, happy coding!