CSS management becomes increasingly challenging in expansive, intricate, and frequently updated systems. A primary issue is the absence of an inherent scoping mechanism within CSS, which renders all CSS properties globally applicable.This implies that any modification could potentially trigger a cascade effect, altering the presentation of unrelated UI components. Extended CSS languages, or CSS preprocessors, such as Sass, Less, and Stylus, mitigate this challenge by providing features that simplify CSS development.However, these extended languages do not fully address the scalability concerns. Until CSS incorporates a native scoping mechanism, we must devise our own methods to confine styles to specific sections of an HTML document, and CSS methodologies serve as the ideal solution.This article will delve into various CSS methodologies, including:
Object-Oriented CSS (OOCSS)
Block, Element, Modifier (BEM)
Scalable and Modular Architecture for CSS (SMACSS)
SUIT CSS
Systematic CSS
Full disclosure: The author of this article is the creator of Systematic CSS. CSS methodologies are formal, documented systems that facilitate CSS authoring in a manner that supports the development, maintenance, and scaling of the front-end as a collection of small, isolated modules, rather than as an indivisible mass of code. By adopting a CSS methodology, even one you create, you can streamline the design and iteration process of web projects, regardless of their scale or complexity.Related: CSS Development at Large-Scale Websites Each CSS methodology offers a unique set of solutions to the challenges of CSS scalability and maintainability. These methodologies often provide guidelines for:
CSS and HTML best practices
Class- and ID-naming conventions
Ordering and grouping of CSS style rules
Code formatting
There is no one-size-fits-all CSS methodology, as different approaches are more suitable for various individuals, teams, or projects. Examining existing CSS methodologies can help you identify one that aligns with your needs, or it may inspire you to develop your own custom CSS authoring guidelines.Nicole Sullivan’s Object-Oriented CSS (OOCSS), launched in 2009, was the first widely adopted CSS methodology. It remains highly influential today. OOCSS emphasizes the separation of structure from skin, making a clear distinction between content and its containers. Style rules are exclusively written using CSS class selectors.For instance, the style of a button might be defined by two classes, one providing the basic structure and the other applying colors and other visual properties.The OOCSS methodology aims to minimize property duplication across style rules, contributing to DRY (Don’t Repeat Yourself) style sheets. It achieves this by utilizing numerous small, modular, specialized CSS classes. Type selectors are sparingly used, and descendant selectors are discouraged to ensure that the presentation of HTML elements is not context-dependent.The methodology encourages reusing existing style rules and extending them by adding new classes with additional CSS properties, rather than modifying or overwriting existing properties. However, OOCSS’s main drawback is the potential for an excessive number of classes, which can be challenging to maintain. Additionally, the principles of object-oriented programming, which OOCSS draws inspiration from, may not align seamlessly with CSS.Nonetheless, OOCSS is a common-sense methodology that brings order to large-scale CSS development.Block, Element, Modifier (BEM) is a CSS class-naming system created by the Yandex development team. The core idea behind BEM is to differentiate CSS classes based on their roles, utilizing naming conventions that indicate their purpose. BEM complements OOCSS by not enforcing a specific class-naming convention.In BEM, a “block” is an independent, modular UI component, which can be composed of multiple HTML elements or even other blocks, such as a navigation menu or search form. An “element” is a component of a block, serving a singular purpose, such as links within a navigation menu. A “modifier” is a CSS class that alters the default presentation of a block or element.The BEM naming convention helps CSS authors adhere to the OOCSS principle of using a flat selector hierarchy composed of equally-specific class selectors, while also avoiding deep descendant selectors. This convention effectively distinguishes the different concerns addressed by classes and makes it easy to identify related classes in the markup.However, some criticisms of BEM include long and unattractive class names and a lack of intuitiveness for inexperienced developers. Despite these criticisms, BEM is a robust class-naming convention that successfully separates concerns and aids in maintaining a clear hierarchy in the markup.Jonathan Snook’s Scalable and Modular Architecture for CSS (SMACSS), published in 2011, categorizes CSS style rules into five categories: Base, Layout, Modules, State, and Themes. SMACSS offers a simpler naming convention than BEM, with no specific names for base styles, unique class names for modules, and prefixed names for sub-components and variations.SMACSS discourages the use of descendant selectors, advocating for a “depth of applicability” concept that limits the impact of CSS on HTML markup by using classes to precisely target elements.Nicolas Gallagher’s SUIT CSS, introduced in 2014, combines a BEM-like class-naming system with a CSS preprocessor, providing extended CSS syntax similar to Sass, Less, or Stylus. SUIT CSS classes come in five formats, highlighting the division between utility classes, modular UI components, individual elements, and modifiers.Systematic CSS, developed by the author, is a new methodology based on a CSS-authoring system refined over several years. Systematic CSS shares principles with OOCSS, BEM, SMACSS, and SUIT CSS, aiming to be a simpler alternative with fewer naming conventions and more intuitive class-naming conventions.Systematic CSS breaks down the development of a new web design into four phases: Layout, Elements, Widgets, and Modifiers. This methodology ensures that each class serves a distinct purpose, representing a layout section, a widget namespace, or a modifier.CSS methodologies address the scalability and maintainability challenges by providing a class-based system for dividing large web designs into small, modular units. This approach facilitates code reuse, consistency in visual designs, reduced page size, and improved page rendering speed.Adopting a CSS methodology can also reduce the learning curve for new designers and facilitate smoother transitions when projects are handed over to new teams. CSS methodologies offer different class-naming conventions and approaches to web design, but their primary purpose is to modularize front-end code and make CSS more scalable.While the specifics of each methodology are less important than the general solutions they provide, you can adopt ideas and develop your own class categories and naming conventions tailored to your needs. The author of this article uses Systematic CSS as a starting point, modifying and extending it to better fit the skills and creative temperament of the team they are working with.
Atomic Design — a design system using chemistry terms and analogies (atoms, molecules, and organisms)
DoCSSa — a Sass-based CSS methodology by Matthieu Larcher and Fabien Zibi
csstyle — a Sass/PostCSS-based methodology by Dave Geddes
5 Standardized Methods for Writing CSS
Are You Using CSS3 Appropriately?
A List of CSS Styles Guides for Inspiration
