Easy Way to Write Maintainable CSS

CSS might be messy, CSS might be hard to maintain, CSS might be unscalable. But it doesn't have to be! After all it's just a tool and how it's used depends mostly on a developer.

Do you know that feeling when styles for a navigation in a header broke some links in a footer? Or when you couldn't change a font color, because other styles were more important? I do, and - if you are a frontend developer - you probably too. Most of the problems we have to deal with come from features of CSS - inheritance, globality and specificity. These mean that styles of a parent element will apply to every child in it, every style is available on every part of a page and some selectors have higher priority than others. These features aren’t bad, they are desired, but sometimes they are a source of huge pain for a developer.

CSS methodologies are solutions to these problems. They provide a way to encapsulate our styles and make CSS files easier to maintain and understand. They make front-end code easier to read and understand, easier to work with and easier to scale. CSS methodologies help other developers work with codebase and use the same language. But they aren’t some magical tools that will automatically fix our code, they are simply sets of rules to which developers should apply.

Overview of some CSS methodologies

Here are some of the most popular CSS methodologies. All of them encourage the reuse of CSS styles and creating modular components.

OOCSS

Object-Oriented CSS
http://oocss.org/

Main principles:

1. Separate structure and skin
   To define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code.
2. Separate container and content
   Rarely use location-dependent styles. An object should look the same no matter where you put it.

Example of OOCSS:

<ul class="to-do">
    <li class="to-do-item completed-to-do-item">Write a blog post about CSS methodologies</li>
    <li class="to-do-item in-progress-to-do-item">Take over the world</li>
    <li class="to-do-item">Tell Maluch he's a good boy</li>
    <li class="to-do-item big-text">Convince Enzo to cook a lunch</li>
</ul>

.to-do {
    border: 1px solid black;
    background-color: grey;
}

.to-do-item {
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    padding: 5px;
}

.completed-to-do-item {
    color: green;
    text-decoration: line-through;
}

.in-progress-to-do-item {
    color: yellow;
}

.big-text {
    font-size: 30px;
}

SMACSS

Scalable and Modular Architecture for CSS
https://smacss.com/

At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.

1. Base Rules
   Base rules are applied to elements using elements selectors. They don’t use IDs or classes selectors. You can declare some default typography styles here.

   body, form {
       margin: 0;
       padding: 0;
   }
   
   a {
       color: #039;
   }
   
   a:hover {
       color: #03F;    
   }

2. Layout Rules
   Layout styles are styles applied to major components that hold minor components (modules) inside them. This is a good place to keep your header or footer styles.

   #header, #article, #footer {
       width: 960px;
       margin: auto;
   }
   
   #article {
       border: solid #CCC;
       border-width: 1px 0 0;
   }

3. Module Rules
   These are the smaller components of the page like navigations, forms, buttons etc. Modules are reusable blocks of code and can be moved without breaking the styling.

   .module > h2 {
       padding: 5px;
   }
   
   .module span {
       padding: 5px;
   }

4. State Rules
   They override other styles depending on a state like disabled buttons or active navigation items.

   .tab {
       background-color: purple;
       color: white;
   }
   
   .is-tab-active {
       background-color: white;
       color: black;
   }

5. Theme Rules
   Theme rules change the default styling. You may need them for example for a Christmas theme for your website.

   // in module-name.css
   .mod {
       border: 1px solid;
   }
   
   // in theme.css
   .mod {
       border-color: blue;
   }

Example of SMACCS:

<ul class="to-do">
    <li class="to-do-item is-to-do-item-completed">Write a blog post about CSS methodologies</li>
    <li class="to-do-item is-to-do-item-in-progress">Take over the world</li>
    <li class="to-do-item">Tell Maluch he's a good boy</li>
    <li class="to-do-item big-text">Convince Enzo to cook a lunch</li>
</ul>

.to-do {
    border: 1px solid black;
    background-color: grey;
}

.to-do-item {
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    padding: 5px;
}

.is-to-do-item-completed {
    color: green;
    text-decoration: line-through;
}

.is-to-do-item-in-progress {
    color: yellow;
}

.big-text {
    font-size: 30px;
}

BEM

Block Element Modifier
http://getbem.com/

My personal favourite. Why? BEM is simple and quick to learn. You can show it to new developers and they will understand it in the matter of minutes. BEM doesn’t have many rules and is very flexible.

BEM methodology consists of three parts - Blocks, Elements and Modifiers. Styles use only class selectors, no tags or IDs. The structure is flat and you shouldn’t nest selectors.

Block
It’s a separate entity that is meaningful on it’s own. Any DOM node can be a block.

<div class="block"></div>

.block {}

Element
A part of a block that has no standalone meaning and is semantically tied to its block. An element cannot exist outside a block and it’s not dependent on other elements.

<!-- Good -->
<div class="block">
    <div class="block__elem"></div>
</div>

<!-- Bad -->
<div class="block__elem"></div>
<div class="block"></div>

/* Good */
.block__elem {}

/* Bad */
.block .block__elem {}
div.block__elem {}
.block__elem1__elem2 {}

Modifier
They are flags on block or elements and can be used to change the styling. Nesting is allowed for modifiers if you want to change appearance of multiple elements within a block:

<!-- Good -->
<div class="block block--mod1">
    <div class="block__elem"></div>
    <div class="block__elem block__elem--mod2"></div>
</div>

<!-- Bad -->
<div class="block--mod"></div>

.block--mod1 {}
.block--mod1 .block__elem {}
.block__elem--mod2 {}

Here's more complex example of BEM. It makes use of SASS's selector concatenation.

<form action="#" class="form">
    <div class="form__title">Generic form</div>
    <div class="form__row">
        <label class="form__label" for="name">Name</label>
        <input class="form__input" type="text" name="name">
    </div>
    <div class="form__row form__row--with-border">
        <label class="form__label" for="last-name">Last name</label>
        <input class="form__input form__input--has-error" type="text" name="last-name">
    </div>
    <button class="form__submit form__submit--disabled" type="submit">Submit</button>
</form>

.form {
    &__title {}
    &__row {
        &--with-border {}
    }
    &__label {}
    &__input {
        &--has-error {}
    }
    &__submit {
        &--disabled {}
    }
}

It will compile to this code:

.form {}
.form__title {}
.form__row {}
.form__row--with-border {}
.form__label {}
.form__input {}
.form__input--has-error {}
.form__submit {}
.form__submit--disabled {}

CSS Methodologies in Magento

Magento 1

Magento 1 doesn’t apply to any CSS methodology. Overwriting everything just to use it would be very time consuming and very unproductive. There is nothing we can do about it. For the existing code we stick to the old, ugly and unordered CSS. But if we write new features we can use some naming convention.

Magento 2

According to this poll BEM is the most used CSS methodology by developers. Some time ago Magento Team mentioned about using BEM on their Dev Blog. It’s probably just a wishful thinking and is very unlikely to happen, but… SNOW.DOG created the Alpaca theme for Magento which uses BEM methodology - it’s definitely something worth checking out - https://github.com/SnowdogApps/magento2-alpaca-theme

Unfortunately for the third-party modules we are dependent on good will of their developers. And of course we can’t expect from everyone to follow the same naming convention. But let’s just hope that more companies will see the advantages of using CSS methodologies.

• BEM
• CSS
• OOCSS
• SMACCS