Hands-On UX Design for Developers

Scalable and Modular Architecture for CSS (SMACSS)

This CSS methodology was introduced 2 years later, after OOCSS, and compared to OOCSS, where it was decided on two groups: the SMACSS CSS methodology split on five different categories, as follows:

• Base rules
• Layout rules
• Modules
• State rules
• Skin (theme) rules

Beside these five categories of rules, the other good thing is that it comes with some naming conventions that should be followed when developers are writing CSS.

For example, over time when developers have to deal with layouts, they should name classes used for layouts with prefixes such as l- or layout-, and also, when it comes to dealing with component stages, if it is hidden, collapsed, or clicked, they should use classes such ...