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