css reusing css by separating layout styles rules from other css rules

Within our css we will have rules which have to do with layout and rules which pertain to "style" (for the want of a better word).
The smacss book identifies 5 categories of rules: Base, Layout, Module, State and Theme which is a useful categorization.

In my experience, many layout rules are usually unique and often not reusable (though sometimes can be).
But the other kind of rules can and should be reused.

Layout rules include rules like setting width, positioning, floats etc.
What are style rules? examples include rules which apply colors (color, background), fonts, borders, shadow etc.


Its really important to plan how we will reuse style rules and how to make them easily available for reuse. It's extra work to identify and breakout style rules but if done up front can save much refactoring later.

We organize our css (less) into files such as global.less for global styles and then unique files for each part of the system such as account.less, checkout.less etc. If done right, we should see mostly layout styles end up in account, checkout etc. and the other comon rules in global files.

So plan to organize from the start and keep an eye out as you're writing rules to watch for layout versus other rules,

Comments

Popular posts from this blog

deep dive into Material UI TextField built by mui

angular js protractor e2e cheatsheet

react-router v6.4+ loaders, actions, forms and more