My approach to modular CSS

02-07-2016

progressive-enhancementJavaScriptHTML

GitHub gives you the possibility to create an infinite amount of branches, but why should you use to do that? After a talk I had at GitHub Amsterdam, this became clear to me and I would like to share it with you because it improved my working process.

A snapshot from my code editor

Filesystem

I use Sass for a modular approach to CSS. This means I can create a lot of smaller files who are compiled in one style.min.css. If you want to handle this much files, you will need a system to divide your files. This is my way:

base

components

modules

utilities

how to begin (Base)

At every start of the project, you need to set some basic values. For instance, the typography-calculation.scss calculates every font-size for a project on the base of the modular scale. All it takes is one value like $ratio: 1.61803399; and the entire font-ratio is based on the Golden Ratio. Most of the time I create the grid needed for the layout, add a list of color’s I’m going to need a lot to the colors.scss and at this moment you can start your first component.

If isn’t the case, it’s time to talk to the designer.

Components

The map components includes all the generic components I need to style for a project. This can be a form, a button, a link, a list and so on. It’s important to start here. In most designs, a list will have the same basic styling like paddings, margins, colors, max-widths and so on. If isn’t the case, it’s time to talk to the designer.

After styling the base of every component needed for this project, you can start creating the layout. In the layout.scss you should declare the basic styles this layout needs. So don’t go further that a global styling on your base elements like this:

body { // code
main { // code } > header { // code } > footer { // code } }

Now the basics are done (Modules)

Now you got your basic layout which means you can start with the modules. Create a module for every part of the page. You can choose to go as deep as you want and if you have a really big project, you can start thinking about stuff like BEM and utility classes. The way BEM works or my opinion of it isn’t relevant to this article, but one thing must be said:

If you can do without something, why use it!?

So modulesIf you have a blog section on your page, you will probably have an overview page of your blogs and a detail page for every blog. I would start to create this three files:

If you’ve done this right, you would already have a generic styling of tags like an <blockquote>, <li>, <a> and <p>. So apart from some custom elements, there isn’t much to style here anymore. You could create a file for every custom element inside a detail blog, but if it’s not too big, you could go with just one file: blog-detail-parts.scss.

If you treat every component of your page like this, you can easily reuse stuff and it remains maintainable.

Adding classes

If you want to style a button inside of this blog detail page, you could choose to add a custom class for this button. But in my opinion, that’s where CSS selectors are for. Apart from a style, specific to one blog, this is the way I recommend you to style it.

.blog-detail { // code
button { // code } }

So no fancy BEM selectors here means no clutter in your HTML or CSS.

Adding a specific button for a specific blog you only would use only once, is a legitimate reason to add a class instead of using a CSS selector.

TIP: always start your files class-name with the same name as the file itself.

Utilities

The files in the utilities folder are used throughout the entire project. In the global-vars.scss I like to create a list of the most used breakpoints. A layout mostly breaks altogether, I would recommend using one var for this, so if you need to change the breakpoint, you only have to do it in one place. If you just need to break a small part, use a one-time declaration like you’re used to.

Wrapping up

This is the way I like to write Modular CSS, but there are a lot of way’s to do it. If you’re interested in this subject, I would like to encourage you to get inspired by this workflow instead of implementing it without a thought. That way you will remember you structure which makes maintaining a project easier.

If you have any questions or feedback, please leave a comment and I will get back to you.