There are three people to keep in mind when writing code: the user, the client and your future self. For the user you need to build something accessible and intuitive, for the client something on time and under budget and for yourself something you can come back to in two months and easily update.
This last goal feels obvious, but when there are deadlines involved, organizing code is often the last thing on a developer’s mind. And when it comes to implementing a design as a front end developer, this usually means tacking more and more CSS rules into ever-growing files and more and more
!importants littered throughout the codebase.
Here at VIA we often continue working on sites after launch. Clients may want to polish parts of the site, fix things that break (it happens!) or add new features as their needs change. So we want to write code that we can confidently dive back into, find what we need and add or update without fear of breaking anything.
Here are a few strategies to implement reusable and maintanable styling.
In programming we have the DRY principle: Don’t Repeat Yourself. The idea being that, in order to both write less code and keep it maintainable, you should use functions or abstractions wherever code can be reused. The same mindset can be used in design. Rather than treating every page or section as a separate piece, designers can create reusable components to be used throughout the site.
For example, most design systems have a card component. In Google’s Material Design, this is a rounded box with a headline and some copy. And then variants can be chosen: elevated, outlined, with media, with buttons, etc.
So we’ve organized our markup into components. Where should we put our CSS?
Choose a Methodology (and stick to it!)
BEM & ITCSS
BEM and ITCCS are two separate CSS methodologies; BEM focuses on naming and organizing selectors, while ITCSS covers the organization of files, roughly speaking, so they work best in tandem.
BEM stands for Block, Element and Modifier. To put it in the language of components that we’ve been using, a block is a component (e.g.,
card), an element is a piece of the component (e.g.,
card__header) and a modifier is a variant of the component (e.g.,
The main principles of BEM are to allow block styling to stand on its own and keep all of the styling at the root level, so we can prevent confusing cascades and specificity wars. It also helps visualize how the pieces of a component relate to each other, so code is more immediately understandable.
ITCSS, or Inverted Triangle CSS, is an approach for managing the cascade. The triangle is the one below, which establishes a hierarchy for your selectors.
Here’s an example of what the main CSS file might look like when using ITCSS:
This might look familiar to the way you might structure a large CSS file, with global selectors at the top, moving down to more specific ones. But by explicity organizing your code into files and folders this way and enqueuing them in this order â especially used in tandem with BEM â you can ensure that all of your styles are being applied in exactly the order you want them to be, and know exactly where you should make any updates down the road.
If you prefer your styling to be even more tightly coupled with your markup, consider Tailwind, a CSS framework that provides utility classes for styling your code without even writing CSS. While many may feel that styling with utility classes clutters up markup, it does help keep the styling right alongside the markup its affecting, and even moreso Tailwind allows you to work within the constraints of your design system. While you have the option to use custom CSS, having your designer work with the set colors and spacing available within the framework, or creating your own constraints, help you incorporate your actual design sytem into your code.
We used Tailwind on the recently launched Kentucky Performing Arts website and found the option to apply styling without having to leave the markup extremely useful when creating page templates. Here’s an example of a Laravel Blade template applying styling to a card group (and note the use of a partial view!):
In this case we’re applying styles like
margin-bottom: 4rem; by just adding the class
mb-16. This way we don’t have to make up a class name like “card-link-container” or use a selector like
.card-carousel + p that could break if we reorder the markup.
Using Tailwind alongside a tool like PurgeCSS also allows you to remove all of the unused styling during the build process, so you don’t ship any of the framework’s styling that you don’t need.
Ultimately no matter how you approach your coding, just remember to be kind to your future self. ❤️
What's the JAMstack?
As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.Read More »
By:Mark Biek on 1/30/2018
ES6 generator functions make recursive asynchronous calls (relatively) easy.Read More »