Learn Modular CSS With Different Methods and Tricks

What is modular css?

Code which adheres to the separation of concerns can be much more confidently modified , edited, extended, and maintained because we know how far its responsibilities reach.

What is OOCSS?

Object oriented css is a css which we can modify easily , maintainable and reusable.That object can then be reused throughout a site.

What is BEM?

BEM full form is Block Element modifier. It was created in 2009 by Russian internet company Yandex who faced similar problems to Yahoo using CSS at scale.

BEM is a way to modularise development of web pages. By breaking your web interface into components. you can have your interface divided into independent parts, each one with its own development cycle.

Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

Block are made of smaller elements and can be modified.

Starting With BEM

Block is a component which is also the main element. Blocks are written as a class name.

For example here we will go for a contact form. So block is a form tag and for the style we can not use a

<form>

instead of that we can use is a class .form so if there are two contact forms in a website and both have a different style so we can change easily. Because classes allowed infinite reusability.

We can start from contact form so here main class is .form

.form{ /***  style *****/}

Best example is button, this is a block in which we have same button style in whole website and only color is different then we use this methodology.

.button   { padding: 15px 20px; font-size: 14px; background:#000; color: #fff;  border:0px; text-transform: uppercase;}
<button class="button" type="submit"> contact me </button>

Output:

Block can be a nestable one block inside which we can set another block.

Elements are children of block. Any DOM element within block can be an element. It is defined by using __ (double underscore).

Example:

.list        { width: 200px;}
.list__item { margin: 2px 0; padding: 5px; background: #333; color: #fff; list-style: none; }
<ul class="list">
    <li class="list__item">1</li>
    <li class="list__item">2</li>
</ul>

Output:

Modifiers defines the appearance and behaviour of a block or an element.

For instance the appearance of the menu block may change depending on a modifier that is used on it.

Example:

.button--secondary     { background-color: #ef7573; border-radius: 50px; }
<button class="button button--secondary" type="submit">submit</button>

Output:

BEM naming

1. Names are written in lowercase
2. Words within names are separated by hyphens
3. Elements are delimited by double underscores
4. Modifiers are delimited by double hyphens

Here for the simple code and we reduce a CSS so that methods are used.

1) Method @mixin

Here we have used the concept based on SaaS.
Here one example for that

@mixin button { padding:15px 20px;}  
    
    .button--green{
    @inclued button;
    background-color: green;
}

In this methodology, common padding is used for all buttons but the other style will be different so we can use a different class for other style. Here is a .button–green changes background color.

2. Method use CSS attributes selector

Here another method is selector we can learn with the example

class*=’button’:not([‘button__’]){
        padding:15px 20px;
}

Here in first selector we used class*button that means it is button class with padding:15px 20px; but this is not for a button__. So that if we use a button__ with different CSS style but not add a padding so with this class we also have to add a button class also.

Benefits of Modular CSS

1. Simplifies code and facilitates refactoring
2. Self-documenting code
3. Reusable code that doesn’t influence outside its own scope
4. Naturally leads to a pattern library
5. Predictable
6. Maintainable
7. Performant

Conclusion

Finally concludes that if we go through this type of methods and tricks for design a website so we can save our time . less css code so less time for run the website. and more reusable so it is easy for us.