Modular is cool

Modular CSS

Modulalization of css is about how your css interacts with other developers that will work with that code.

When you have to change something in styles, you go to that specific part of the code and you can see one of this 3

things:

1 - the styles for that code are just there and only apply to that part of the code

pros: you don't have to look anywhere else, you can change wherever you want.

cons: if you have to do it somewhere else, you have to repeat yourself.

2 - the styles come from an organized nested structure (BEM or whatever)

pros: Whatever you change will be change everywhere it's needed

cons: It can spread and produces undesired results.

3 - non of the above: you are done, my friend

** My personal approach is a mixture of both: Use bem for better understanding and opening a door about reusing styles, but creating modules using specific class names for the containers (and nest the styles within those containers).

Anyway, the key is consistency.

In a different subject, more advices: DON’T WRITE CONTEXT-DEPENDENT SELECTORS!! xD, yeah, well, easier said than done, I know.

"state" css classes should start with "is-" or "has-" (is-open, has-name, is-awesome,...)

IMPORTANT Group the code for state classes along with the rest of the code for the module. Then, any time you need to use JavaScript to dynamically change the appearance of a module, use the state class to trigger the change classes should be small. If you see that a class is too big, probably you need to split it in smaller modules.

naming modules

You need to give a module a name that's a meaningful no matter what context you might want to use it.

You should also avoid names that simply describe the visual appearance. Instead, you need to ask yourself what this module represents conceptually.

A module should be versatile. Its name will ideally be simple and memorable. As you design more pages for your site, you can reuse a module for any number of things.

Don't use .button--red, use .button--danger (more meaningful, the button might change colour in the future).

Avoid overly precise modifiers like button--20px.

Utility classes

Classes that do ONE really specific thing to an element (centering text, adding a clearfix,...). This classes are called "utility classes".

They should be very specific and go after all the modules

.hidden {
  display: none !important; <-- the only alright place to use "!important" is in utility classes
}