CSS Methodologies

Writing CSS is easy. Making it scalable and maintainable is not.

• You must have experienced the scenario when you update the CSS of your application and you broke something else?
• did you wonder where the CSS you have to change is coming from?
• did you update some HTML and it broke your design?
• did you write some CSS and wonder why it wasn’t applied to the browser and then ultimately discovered that it was overridden by some other CSS?

This is when you decide there is a better way and come across some CSS methodologies, which seems like a good solution to all those headaches.

There are multiple CSS methodologies , but at the end of the day, it’s all about what fits your projects.

Also, you may think you’re perfectly fine without them and you may be right. But you might be missing out on big improvements too. You should at least have an idea on what’s out there and why you're or you’re not using it.

⭐ It’s all about maintaining your CSS code and reusability ⭐

The Big Reveal !!!
There is no best CSS methodology. It depends on you and the type of your project.

Top 3 CSS methodologies:

1. OOCSS (Object Oriented CSS)
2. BEM (Block Element Modifier)
3. SMACSS (Scalable and Modular Architecture CSS)

Applying a modular approach to your CSS will save you hours.
Web components are the future of the web and starting now will make your life easier.
Each piece of your application helps you build the final results and you should be able to move or replace it without breaking anything else. This is the goal most CSS methodologies aim for.

OOCSS Methodology

• OOCSS stands for Object Oriented CSS.
• OOCSS is concerned with converting your regular CSS styles to reusable classes.

OOCSS has two major principles
1. Separate structure and skin:
The structure refers to invisible styles applied to elements (width, height, margin, padding) while the skin is the visible styles (colors, fonts, shadows).
OOCSS defines these 2 separately. For example, Below there is a random snippet of CSS:

.button-1 {
    width: 100px;
    height: 50px;
    background: #000;
    color: #fff;
 }

 .button-2 {
    width: 100px;
    height: 50px;
    background: #fff;
    color: #333;
 }

We can see in the previous example that both classes have the same structure but differs in the skin properties. OOCSS deals with this situation and separate them as follows:

.button-1 {
    background: #000;
    color: #fff;
 }

 .button-2 {
    background: #fff;
    color: #333;
 }

 .btn-structure {
    width: 100px;
    height: 50px;
 }

Now we don't have redundant code and the .btn-structure class can be used on any button having the same structure.

2. Separate container and content:
Content refers to the elements such as images, paragraphs, divs which are nested inside other elements that serve as Containers. CSS Styles used for Content elements should be independent of the Container class so that it can be used without restrictions on their parent element. For example, this is a random piece of code dealing with the styling for a sidebar component.

#sidebar {
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}

#sidebar .list {
    margin: 3px;
}
#sidebar .list .list-header {
    font-size: 16px;
    color: red;
} 

#sidebar .list .list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

But if we separate content from container, it will something like this:

#sidebar {
  padding: 2px;
  left: 0;
  margin: 3px;
  position: absolute;
  width: 140px;
}

.list {
  margin: 3px;
}

.list-header {
  font-size: 16px;
  color: red
}

.list-body {
  font-size: 12px;
  color: #FFF;
  background-color: red;
}

Now these classes can be used in many situations without the restriction of having a parent with an id of #sidebar or .list.

Advantages of OOCSS:

• Improved Scalability and Reusability.
• Better Readability.

Disadvantages of OOCSS:

• It is not suitable for small projects.
• It increases number of classes.

BEM Methodology

BEM stands for Block-Element-Modifier.
When the use of CSS is no longer to just style the personal websites or small projects and moves to large, scalable and complex projects, there is a need to organize and think about the architecture for the CSS. Simple things like class naming can become a huge problem in future maintenance.
To correct problems like these, some organizational architectures and methodologies were created and one of the most popular is BEMCSS.

What is BEM?

• The acronym comes from Block-Element-Modifier, which is basically a method to create names for the CSS classes.
• The idea is to create a rigid standard for class naming, making it easy to read and understand what the class does and what component it targets.

⭐ The class names follow the line
.block__element--modifier {}

• One point to Note here is that there are Two underlines that separate the block from the element and two lines that separate the element from the modifier.

Block:

• A block is an independent, modular UI component.
• A block may be composed of multiple HTML elements, or even multiple blocks.

So basically a Block is the element or component that a class is assigned to. You don't need to respect the name of the element, the idea is that it describes what the component is doing in the scope of the project. For example, if you create a class for a login form, the name would not be .form, even though in HTML you do create a form.
In the scope of the project the class could be .Login, which would make it clear to everyone what it is about. A general naming rule is to separate compound names with a single dash for example, .select-box-container would be the correct way to write a name with three words.

For example, .login, .select-box-container

Element:

• An element is a component of a block. Each element serves a singular purpose.
• For example, if you have a navigation menu block, then elements of it might be your navigation menu’s links, which in turn might be in the form of list items (li elements) and anchor tag’s (a elements).

The Element are internal parts of the component. In the example shown in previous slide, inside the login block there would be multiple inputs for the username, email, password and few action button's.
So the CSS class naming convention for block-element will be like,
.login__username, .login__email, .login__password, .login__button

Modifier:
A modifier is a CSS class that changes the default presentation of a block or element.
For example, in the login form when the user put something that does not match the password or email in the inputs and there was a check to confirm this, the visual feedback of the error, for example, could be done by changing the colors of the edges of the incorrect inputs to red. The modifier class that would be used to create this case will be in this way:
.login__email--error {}

The modifiers can also be used for the block as a whole, and can be applied directly over it in the class, ignoring the existence of the elements. For example, .login--error {}

Point to remember:

• We have to remember that each element has its class in an isolated way. For example, if an element has another element within it, it is not correct to join the elements into a single class, such as:

.block__class1__class2__class3 {}

• In these cases each element has its own class, ignoring the order of the HTML structure, such as:

.block {}
.block__class1 {}
.block__class2 {}
.block__class3 {}

Advantages of using BEM:

• BEM is a very robust class-naming convention.
• It successfully distinguishes the different concerns that classes are used for.
• It is easy to see in the markup which classes are related to one another.

Disadvantages of using BEM:

• The class names can end up being long and ugly.
• The naming convention is not intuitive to inexperienced developers.

SMACSS Methodology

• SMACSS stands for Scalable and Modular Architecture for CSS.
• SMACSS offers a simpler naming convention than BEM.
• There are no class names for base styles because only type selectors like { h1, p, a, etc. } are used for those.
• Modules are given their own unique class names. Also, in SMACSS the Sub-components and variations are prefixed with the name of their parent module.
• SMACSS is a style guide rather than a framework.

SMACSS is all about organising your CSS in 5 Categories:
1) Base: Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It is defining the default styling for how that element should look in all occurrences on the page.
This category include applying CSS to the selector. No CSS is applied to classes or id here. This is to reset browser rules and set a base style for elements which are going to be consistent and reused.
In this category you are defining the default style for your elements. This can include html, body, h1, h2, h3, h4, h5, h6, a, img.

An example for the BASE rule is given here,

body, form {
  margin: 0;
  padding: 0;
}

a {
  color: #039;
}

a:hover {
  color: #03F;    
}

2) Layout:

• This is where the style used to lay out your pages will sit. It should be separated from your module style for flexibility.
• Layout styles can also be divided into major and minor styles based on reuse.
• Major layout styles such as header and footer are traditionally styled using ID selectors but it takes time to think about the elements that are common across all components of the page and use class selectors where appropriate.
• Therefore, Usually layout modules are not many so id selector can be used.

An example for the LAYOUT rule is given here,

#header, #article, #footer {
  width: 960px;
  margin: auto;
}

#article {
  border: solid #CCC;
  border-width: 1px 0 0;
}

3) Module:

• A module is a part or a component of your page. Your menu, dialog box, download list or any widget you have on your page can be a module.
• A module is independent from your layout so it can live anywhere in you application.
• You should be able to copy/paste the html and move somewhere else, and it will look and behave the same.
• Each Module should be designed to exist as a standalone component. In doing so, the page will be more flexible. If done right, Modules can easily be moved to different parts of the layout without breaking.

An example for the MODULE rule is given here,

<ul class="tabnav">
    <li class="" tabnav__item"><a href="" class="tabnav__link">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
</ul>

.tabnav {
  display: flex;
}

.tabnav li {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.tabnav li:first-child {
  border-left: 1px solid black;
}

.tabnav li a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
}

4) State:

• A state will be a style which modifies or overrides other rules.
• Good practise is to prefix or add a namespace to the classes which fall under this category like is- or has- --> is-hidden, is-displayed, is-collapsed, has-children, etc.
• A great example is accordion when collapsing or expanding elements. Using a is-collapsed class will make sure your element is collapsed.
• This is a good place to use !important (and probably the only one) as you want this state to be applied no matter what.

.is-active {
    background-color: red;
}

.is-hidden {
    pointer-events: none;
    color: black;
}

5) Theme:
In Theme rule, the idea is to have a file called theme.css where you can define all the theme rules. For example,

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

// in theme.css
.mod {
    border-color: blue;
}

Advantages of using SMACSS:

• Modular.
• Flexible.
• Better file organisation.

Disadvantages of using SMACSS:

• No specific naming convention to write a class.
• Modules and submodules can be hard to identify.

*Thank you for reading this blog post!!! 🙂 *

Comments

[Hassan Tahir]

Informative!

[Sameer Trimade]

Thankyou :)