Matt Lambert

Would you like to be a better designer & developer?
Sign up for my newsletter or check out my blog to start learning today.

Tips for Writing Modular CSS

By admin on May 25th, 2015 in CSS3

No matter how much you love CSS, no one enjoys writing or maintaining style sheets that are 2000+ lines of awesomeness. The smart way to approach your CSS is from a modular stand point. Properly organizing your CSS, breaking it into smaller chunks, and naming classes in a generic way are a few places to start. Let’s review some of my top tips for writing modular CSS

Use SMACCS

There’s a few systems out there for organizing your CSS but the best one I’ve found is SMACCS (Scalable and Modular Architecture for CSS). The great thing about this system is that it’s easy to learn. You can pick it up in a few hours and start yourself down the path of modular CSS. Basically you need to divide your stylesheet into 5 sections:

Base
All native HTML selectors, element selectors, descendant/child selectors, and pseudo-classes. For example: body, form, a.

Layout
Styles specific to the layout of your website or template. Stuff like .header, .nav, .box.

Module
Reusable classes or components. A good example here would be the components from a CSS framework like Bootstrap.

States
Here you add any state change CSS like alerts or form validation styles.

Theme
This section is optional but if you have any theme specific CSS that doesn’t fit into any of the above sections, it should go here.

Less Variables

If you’re going to be coding modular CSS it’s critical that you become comfortable with a CSS Pre-processor. There are lots to choose from but my favourite is Less. In your variables Less file you should create a collection of global properties that are used throughout your CSS. To really keep it modular, it’s a good idea to only include global properties in this Less file like: colors, backgrounds, text, links, margin, and padding to name a few. My boilerplate variables file looks like this:

Less Components

Regardless if you are working with a CSS framework or not, it’s a good idea to break components into their own Less files. Some examples would include things like tables, forms, and buttons. Within those Less files you should create component specific variables that use values set in your global Less file. Some people prefer to have all their variables in one file. My preference is to include the component specific ones with the component Less code. That way all the variables and regular CSS are together and the module is more complete.

One Theme to Rule Them All

You should create a single Less theme to act as your master theme. Within it import all of your component Less files I mentioned in the previous section. The master theme should also be organized using SMACSS. This keeps the main theme shorter and more manageable. Check out this Github Gist to see a theme boilerplate you can use as a starting place.

Keep Class Names Generic

You want to try and keep your class names as generic as possible so that they can be reused for multiple components. Create a .box don’t create a .red-box. Here’s some examples

Bad
<div class="red-box">stuff</div>

Good
<div class="box">stuff</div>

Layering on generic classes is the better way to go in comparison to more specific class names. This will allow you to reuse more of your code and keep it DRY (Don’t Repeat Yourself).

Avoid Long Selector Strings

Another thing you want to avoid is long strings of selectors that are very specific. For one this makes the code harder to read/troubleshoot for other developers. This is also a really non-modular way to do something. Like I explained above, you want to layer on classes, not create long specific strings of selectors.

Bad
.wrapper-widget .widget-one .widget-one-header h1.widget-header

Good
.widget h1

Avoid Using IDs

Don’t use IDs for styling. They mess with specificity and just add confusion when you’re troubleshooting a problem. In web app development, IDs should be reserved for hooking in functionality. It creates a nice separation between the view and function of an app. It also helps to keep your CSS clean by not mixing classes with IDs.

Don’t Use !important

C’mon man, this shouldn’t even need to be mentioned but I will anyhow. Don’t use !important !?! It’s just lazy developing :)

Hopefully this has given you some of the basics to start writing modular CSS. There is definitely more that can be discussed on the subject so feel free to leave a comment below.

If you’re interested in learning more about CSS3, check out my eBook the CSS3 Handbook

  • Simon Duda

    In my view modular CSS works hand in hand with modular HTML (which isn’t mentioned at all in the article).

    The checkpoints you are going through here are fine and correct – but to me it’s just the ‘good handwriting’ of a developer handling the markup correctly
    AND
    rather defines the base to a solid structure than being the main part of modular working.

    So maybe the heading got a bit to modular :)

    • http://mattlambert.ca cardeo

      I’d be curious to hear how you write modular HTML? Being that you cannot create your own HTML tags I’m not sure how the HTML would get out of hand like CSS with class and ID creation.

      • Simon Duda

        I’m sorry for being unclear. I just thought about the very basic structuring of your content (elements). As websites mostly are just plain information there are good and bad methods to organize and write reusable HTML components.

        So … to me it starts with the decision if you do or do not wrap a single image-element for a more specific rule – or for a design-ish rule – or does it work whithout?

        It’s true, the jump to defining generic class-names comes very soon – so that’s what I meant with “hand in hand”.
        Again, in my view it’s not all about the CSS, which truly may give lots mini-parts to the modular usage, but what you use your classes on is at least just as important.

  • Justin Chaschowy

    Good tips. Hard to get into the habit.

    I mean is it really worth it most of the time? CSS is so minimal, it’s a tiny text file.

    • http://mattlambert.ca cardeo

      It’s not a tiny text file if you’re working on something like an enterprise web app. Also, it’s always good to strive for best practices

  • Justin Chaschowy

    Also why not use !important

    It’s there to be used, why does it exist?

    • http://mattlambert.ca cardeo

      It breaks specificity in your css. Same reason not to use IDs for styling

  • http://garystorey.com/ Gary Storey

    If you have to use an id in your markup, you can use the attribute selector in your css instead. Ex: div[id=”myid”] { } This has the same specificity as a single class.

    • http://mattlambert.ca cardeo

      The problem I find with this though is that you are muddying your HTML by using IDs for styling. For larger scale web apps, you should really try to reserve IDs for hooking in your functionality. It creates a nice separation from look and feel vs. functionality

  • http://mattlambert.ca cardeo

    sounds like you need a new js lib ;)

  • Pingback: Tweet Parade (no.22-2015) - Best Articles of Last Week | gonzoblog()