CSS Methodologies Demystified: An Introduction to OOCSS, ACSS, BEM, and SMACSS

If you've ever worked on a web development project, you know how challenging it can be to manage CSS. As the complexity of a project increases, so does the need for organization and consistency in the code. That's where CSS methodologies come in. By providing a set of guidelines and best practices, CSS methodologies help developers create maintainable and scalable CSS code.

In this blog post, we'll explore four popular CSS methodologies - OOCSS, ACSS, BEM, and SMACSS. We'll cover what each methodology is, how it works, and what benefits it offers. By the end of this post, you'll have a better understanding of how CSS methodologies can help you make informed choices for your web development projects.

Before we dive into that, let's talk about what we'll be building and how we'll be using the same example to demonstrate all of these methodologies. We'll be building a simple card component that you might use on a website to display information about a product, service, or feature. This component will have a header, body, and footer section, along with a button to take the user to another page. We'll use this same example for each of the CSS methodologies that we'll discuss, so you can see how each approach differs in terms of syntax, organization, and philosophy.

OOCSS (Object-Oriented CSS)

Object-Oriented CSS is a methodology that focuses on creating reusable and modular CSS code. The basic idea behind OOCSS is to separate the visual style of a website from its structural layout. This separation allows developers to create classes that can be reused across multiple elements on a website.

The core principle of OOCSS is the separation of structure and skin. In OOCSS, structure refers to the layout and positioning of elements on a website, while skin refers to the visual style and appearance of those elements. By separating these two aspects, OOCSS allows developers to create classes that define structure and skin independently. This approach makes it easier to maintain and update a website's visual style without affecting its layout.

OOCSS also promotes the use of classes instead of IDs for styling elements. This approach makes it easier to create reusable styles and ensures that styles can be applied to multiple elements on a website. By avoiding the use of IDs, OOCSS helps developers avoid specificity issues that can arise when working with CSS.

HTML

<div class="card">
  <div class="card-header">Card title</div>
  <div class="card-body">
    <p class="card-text">This is some card text.</p>
    <button class="btn btn-primary">Go somewhere</button>
  </div>
</div>

CSS

/***** Structure *****/
.card {
  display: flex;
  flex-direction: column;
  width: 400px;
  margin-bottom: 20px;
}

.card-header {
  padding: 10px 15px;
}

.card-body {
  flex: 1;
  padding: 15px;
}

.card-text {
  margin-bottom: 15px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

/***** Skin *****/
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.125);
}

.card-header { 
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.card-text {
  font-size: 16px;
}

.btn {
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
}

/***** State *****/
.btn:hover {
  opacity: 0.8;
}

In OOCSS it is important to have a clear separation between Structure & Skin so that it allows for easy changes to the visual appearance without affecting the structure, and facilitates the creation of new styles by combining existing classes.

ACSS (Atomic CSS)

Atomic CSS is a methodology that emphasizes the use of small, single-purpose classes. Each class in ACSS is designed to apply a specific style to a single element on a website. This approach makes it easier to create and manage styles, as each class serves a single purpose.

The core principle of ACSS is the use of atomic classes. An atomic class is a single-purpose class that applies a specific style to an element. Atomic classes are typically named based on the style they apply, such as .font-size-small or .bg-color-blue. By using atomic classes, developers can easily create and manage styles without having to worry about the specificity of CSS.

ACSS also promotes the use of utility classes. Utility classes are classes that apply a specific style to an element, such as .hide or .clearfix. Utility classes are designed to be used across a website and provide a consistent set of styles that can be applied to different elements.

HTML

<div class="d-fx_flex fd-col w-400 bg-white bd-1 bdrs-4 box-s_0_1_3_ddd mb-20">
  <div class="p-10_15 fs-18 fw-bold bd-btm-1_ddd">Card title</div>
  <div class="flex-1 p-15">
    <p class="fs-16 mb-15">This is some card text.</p>
    <button class="btn bg-blue cl-white bd-none p-10_20 bdrs-4 cur-ptr">Go somewhere</button>
  </div>
</div>

CSS

/* Align container horizontally */
.d-fx_flex {
  display: flex;
  flex-direction: row;
}

/* Align container vertically */
.fd-col {
  flex-direction: column;
}

/* Set the width of an element to 400px */
.w-400 {
  width: 400px;
}

/* Set the background color of an element to white */
.bg-white {
  background-color: #fff;
}

/* Set the border of an element to 1px */
.bd-1 {
  border: 1px solid;
}

/* Set the border-radius of an element to 4px */
.bdrs-4 {
  border-radius: 4px;
}

/* Set the box-shadow of an element */
.box-s_0_1_3_ddd {
  box-shadow: 0 1px 3px rgba(0,0,0,.125);
}

/* Set the margin-bottom of an element to 20px */
.mb-20 {
  margin-bottom: 20px;
}

/* Set the padding of an element */
.p-10_15 {
  padding: 10px 15px;
}

/* Set the font size of an element to 18px */
.fs-18 {
  font-size: 18px;
}

/* Set the font weight of an element to bold */
.fw-bold {
  font-weight: bold;
}

/* Set the border-bottom of an element */
.bd-btm-1_ddd {
  border-bottom: 1px solid #ddd;
}

/* Make an element fill the remaining space in a container */
.flex-1 {
  flex: 1;
}

/* Set the padding of an element to 15px */
.p-15 {
  padding: 15px;
}

/* Set the font size of an element to 16px */
.fs-16 {
  font-size: 16px;
}

/* Set the margin-bottom of an element to 15px */
.mb-15 {
  margin-bottom: 15px;
}

/* Define a button style */
.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Set the background color of a button */
.bg-blue {
  background-color: #007bff;
}

/* Set the text color of a button to white*/
.cl-white {
  color: white;
}

/* Remove the border of an element */
.bd-none {
  border: none;
}

/* Set the cursor style of an element to pointer */
.cur-ptr {
  cursor: pointer;
}

/* Set the padding of a button */
.p-10_20 {
  padding: 10px 20px;
}

/* Set the border-radius of an element to 4px */
.bdrs-4 {
  border-radius: 4px;
}

In ACSS, it's important to use clear and descriptive class names and to be consistent in how those class names are structured. The comments in this code sample help explain what each class does and how it fits into the ACSS methodology.

BEM (Block, Element, Modifier)

Block, Element, and Modifier is a methodology that focuses on creating modular and reusable CSS code. BEM is based on the concept of components, which are self-contained pieces of code that can be reused across a website.

The core principle of BEM is the use of the block, element and modifier naming convention. A block is a standalone component on a website, such as a header or a footer. An element is a part of a block, such as a button or a link within a header. A modifier is a variation of a block or element, such as a disabled button or a highlighted link.

By using the block, element, and modifier naming convention, BEM makes it easier to create reusable and modular CSS code. BEM also promotes the use of classes for styling elements and encourages developers to avoid using IDs.

HTML

<div class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">Card Title</h2>
  </div>
  <div class="card__body">
    <p class="card__text">This is some card text.</p>
  </div>
  <div class="card__footer">
    <a href="#" class="btn btn--primary card__button">Go somewhere</a>
  </div>
</div>

CSS

/***** Block *****/
.card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.125);
  margin-bottom: 20px;
  padding: 15px;
}

/***** Element *****/
.card__header {
  margin-bottom: 15px;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.card__body {
  margin-bottom: 15px;
}

.card__text {
  font-size: 16px;
  margin: 0;
}

.card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.card__button {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/***** Modifier *****/
.card--featured {
  background-color: #f5f5f5;
}

.btn--primary {
  background-color: #007bff;
  color: #fff;
}

.btn--primary:hover {
  background-color: #0069d9;
  color: #fff;
}

In BEM, we start with a block class that represents a higher-level component and then use element classes to represent nested components within that block. We can also use modifier classes to change the appearance or behavior of the block or its elements. The class names follow a strict naming convention, with double underscores (__) separating block and element names, and double hyphens (--) separating block or element names from modifier names. This helps to create a clear and consistent naming structure for our CSS classes.

SMACSS (Scalable and Modular Architecture for CSS )

Scalable & Modular Architecture is a methodology that focuses on creating flexible and maintainable CSS code. SMACSS is based on the idea that CSS should be structured in a way that reflects the architecture of a website.

The core principle of SMACSS is the separation of concerns. In SMACSS, CSS is divided into five categories: Base, Layout, Module, State, and Theme. Each category represents a different aspect of a website's design, such as the basic styles (Base), the overall layout (Layout), and individual components (Module).

By dividing CSS into categories, SMACSS makes it easier to organize and maintain CSS code. SMACSS also promotes the use of classes for styling elements and encourages developers to avoid using IDs.

HTML

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Card Title</h2>
  </div>
  <div class="card-body">
    <p class="card-text">This is some card text</p>
  </div>
  <div class="card-footer">
    <a href="#" class="btn btn-primary card-button">Go somewhere</a>
  </div>
</div>

CSS

/***** Base styles *****/
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.125);
  padding: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.card-text {
  font-size: 16px;
  margin: 0;
}

.card-button {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0069d9;
  color: #fff;
}

/***** Layout *****/
.card {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.card-header {
  margin-bottom: 15px;
}

.card-body {
  margin-bottom: 15px;
}


.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
}

/***** Module *****/
.card-button {
  margin-left: 10px;
}

State styles & Theme styles are not used in this particular example, but State styles would be :hover or :active and Theme styles would be the overall look and feel of the site, such as colors and typography

Which CSS Methodology Should You Use?

Choosing a CSS methodology can be a difficult decision, as each methodology offers its own set of benefits and drawbacks. The best CSS methodology for your project will depend on a variety of factors, such as the size and complexity of the website, the number of developers working on the project, and your personal preferences and experience.

Here are a few factors to consider when choosing a CSS methodology:

• Reusability: If you're working on a website with many components that have similar styles, OOCSS or BEM may be a good choice, as they both emphasize the creation of reusable and modular CSS code.

• Scalability: If you're working on a large website that requires a lot of styles, ACSS or SMACSS may be a good choice, as they both focus on creating flexible and maintainable CSS code.

• Team Size: If you're working on a project with a large team of developers, a methodology like BEM or SMACSS may be a good choice, as they both offer clear guidelines and naming conventions that can help ensure consistency across the codebase.

• Personal preference: Ultimately, the CSS methodology you choose will depend on your personal preferences and experience. Take some time to experiment with different methodologies and find the one that works best for you.

Conclusion

In conclusion, CSS methodologies can be a valuable tool for web developers looking to create maintainable, scalable, and performant CSS code. Whether you choose OOCSS, ACSS, BEM, SMACSS, or another methodology entirely, the key is to find a system that works for you and your team. By investing in good CSS practices, you'll be well on your way to creating high-quality, maintainable websites that look great and perform well.

Remember that CSS methodologies are just a starting point. They provide a set of guidelines and best practices that can help you to make informed choices for your web development projects. It's up to you to adapt and modify these methodologies to suit your specific needs and goals.

So take some time to explore different CSS methodologies, experiment with different approaches, and find the one that works best for you. By doing so, you'll be well on your way to becoming a more effective and efficient web developer.

Footnote: I welcome any feedback, comments, or corrections on this article. If you notice any errors or have suggestions for improvement, please feel free to reach out to me. Your insights are valuable and will help me to grow as a writer. Thank you!