Mastering Effective CSS Writing Methodologies

By . in Coding. Updated on .

Editor’s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better developers.

In this post, we’re going to explore CSS writing methodologies, discuss some well-known approaches, and understand how they can help us optimize our CSS code. Let’s start with the basics: What is a methodology?

A methodology is a systematic approach. Think of it as a structured way of doing something, a predefined method to achieve the desired results effectively.

To improve outcomes, we refine our methods through better planning, reordering steps, simplifying processes, and doing whatever it takes to work faster and more efficiently.

CSS Methodology

Now, let’s dive into CSS methodology. Just like many things in life, we have a method for writing CSS too: some prefer starting with reset CSS, others place layout styles at the end, some begin with a couple of classes for styling an element, while others may write all the CSS code in a single file.

These preferred methods may develop over time through personal experience, influence from others, workplace requirements, or a combination of these factors. Over the years, CSS veterans have developed methodologies for writing CSS that are more flexible, defined, reusable, understandable, and manageable.

We’ll be looking at these established methodologies, including:

  • OOCSS (Object-Oriented CSS)
  • BEM (Block, Element, Modifier)
  • ACSS (Atomic CSS)
  • SMACSS (Scalable and Modular Architecture for CSS)

Note: The concepts discussed below should not be confused with any framework, library, or tool that shares the same name. This post is focused solely on the methodologies for writing CSS.

1. OOCSS

Developed by Nicole Sullivan in 2008, OOCSS (Object-Oriented CSS) emphasizes key concepts such as CSS object identification, the separation of structure and visual styles, and the avoidance of location-based styles.

OOCSS concept illustration

In OOCSS, Nicole’s first recommendation is to identify objects in CSS.

“Basically, a CSS "object" is a repeating visual pattern that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.” – Nicole Sullivan, GitHub (OOCSS)

Consider this structure from the site as an example. Here’s a repeating visual pattern that has its own independent HTML and/or CSS:

Example of OOCSS objects

We can identify two types of objects here: a larger preview of titles, which we’ll name post-preview-primary, and a sidebar with titles, which we’ll name post-preview-secondary.

Next, we need to separate structure and skin (i.e., the styles that define the objects’ appearance). The two types of objects have different structures, even though they look similar – one is in a larger box with images to the left and titles to the right.

Let’s assign the images of both objects the class post-preview-image and add the CSS that positions the image on the left. This approach prevents code repetition regarding image placement inside objects in CSS. For other similar objects, we can simply reuse the post-preview-image class.

Skin separation can also be applied to simpler styles, such as borders or backgrounds. If multiple objects share the same blue border, creating a separate class for the blue border and applying it to the objects will reduce the number of times the blue border code needs to be written in CSS.

Nicole also advises against adding styles based on location. For instance, instead of targeting all links inside a particular div for highlighting, assign those links a highlighter class with the appropriate CSS styles. This way, when you need to highlight a link elsewhere on the page, you can reuse the highlighter class.

  • Pros of OOCSS: Reusable visual styling, location-independent code, and reduced deep nesting of selectors.
  • Cons of OOCSS: If there aren’t many repeating visual patterns, separating structure and visual style code may seem unnecessary.

2. BEM

Developed by Yandex developers in 2009, BEM (Block, Element, Modifier) focuses on identifying blocks, elements, and modifiers and naming them accordingly.

BEM methodology example

A “block” is similar to an “object” (as mentioned in the OOCSS example). An “element” refers to the components within the block, such as an image, title, or preview text in the preview-post - objects. A “modifier” is used when the state of a block or element changes; for instance, adding an active class to a menu item to highlight it – the active class serves as your modifier.

Once you’ve identified the components, name them accordingly. For example:

  • A menu block will have the class menu
  • Its items will have the class menu__item (block and element are separated by a double underscore)
  • The modifier for the disabled state of the menu can have the class menu_disabled (modifier delimited by a single underscore)
  • The modifier for the disabled state of a menu item can be menu__item_disabled

For modifiers, you can also use the key_value format for naming. For example, to distinguish menu items that link to obsolete articles, you can use the class menu__item_status_obsolete, and for styling menu items that point to pending documents, the class name can be menu__item_status_pending.

The naming convention can be adjusted to suit your needs. The key is to ensure you can easily identify blocks, elements, and modifiers from the class names. For more naming conventions, check out the BEM site.

The BEM site also outlines how block, element, and modifier segregation can be applied to the CSS file system. Blocks like “buttons” and “inputs” can have their own folders containing associated files (.css, .js), making it easier to import these blocks into other projects.

  • Pros of BEM: Easy-to-use class names and a reduction in deep CSS selectors.
  • Cons of BEM: To maintain clear and manageable class names, BEM recommends keeping block-to-element nesting shallow.

3. ACSS

Popularized by Yahoo toward the end of the first decade of the 21st century, ACSS (Atomic CSS) focuses on creating classes for the most atomic level of styling, i.e., a property-value pair, and then using them in HTML as needed.

ACSS example in practice

Determining when ACSS was first developed is challenging, as the concept has been around for a while. Developers have long used classes like .clearfix{overflow: hidden}. The idea behind ACSS is to create a class for nearly every reusable non-content-related property-value pair needed on the site, then apply those classes to HTML elements as required.

Below is an example of classes based on ACSS and how they are used in HTML:

 .mr-8{margin-right: 8px;}
 .fl-r{float:right;}
 
 <div class='mr-8 fl-r'> </div>

As you can see, this method can lead to a large number of classes, making the HTML quite crowded. While this method isn’t 100% efficient, it can be useful when implemented appropriately. After all, Yahoo uses it.

  • Pros of ACSS: Styling HTML directly within the HTML structure.
  • Cons of ACSS: Excessive classes, cluttered HTML, and it may not appeal to everyone.

4. SMACSS

Developed in 2011 by Jonathan Snook, SMACSS (Scalable and Modular Architecture for CSS) organizes CSS by identifying five distinct types of style rules, with class names and file systems created accordingly.

“SMACSS is a way to examine your design process and to fit those rigid frameworks into a flexible thought process.” – Jonathan Snook

SMACSS methodology example

SMACSS identifies five types of style rules: base, layout, module, state, and theme.

  • Base styles: Default styles applied to basic HTML tags like <p> and <a>.
  • Layout styles: Styles that define the page layout, such as coding the placement of the header, footer, and side menus.
  • Module styles: Styles specific to a module, like a gallery or slideshow.
  • State styles: Styles for elements with changeable states, like hidden or disabled elements.
  • Theme styles: Styles used to change the visual scheme of the page.

These different style rules can be identified using a prefix in the class name, such as l-header (for layout) or t-header (for theme). Additionally, these types of rules can be organized by placing them in separate files and folders.

  • Pros of SMACSS: Better-organized code.
  • Cons of SMACSS: None that come to mind.

There’s a free online book you can read about SMACSS, or you can purchase its ebook version to study it further.

Conclusion

The CSS methodologies discussed above provide a structured approach to managing and optimizing your CSS code. These methodologies can be combined, such as OOCSS-SMACSS, OOCSS-BEM, or BEM-SMACSS, to best fit your project needs.

If you’re looking for an automated system to implement CSS methodologies, there are frameworks and libraries available, such as:

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail