Apr 27, 20223 min read

CSS Methodology you should know

A CSS methodology is a set of guidelines for writing modular, reusable and scalable code. Although CSS is an easy language to write, without an agreed-upon convention, the code gets messy almost as fast as it is written.

In the process, CSS methodologies do much more than fix the CSS scalability problem. They make it easier to develop and iterate a design. They make front-end code easier to read and understand, provide ready-made documentation, and make it easier for multiple people to collaborate on a design.

1. Object-oriented CSS

Object-oriented CSS is a CSS methodology developed and promoted by Nicole Sullivan. The focus of OOCSS is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: red;} 
.button2 {background-color: lightblue;} 
</style>
</head>
<body>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

Output:

2. Atomic CSS

Atomic CSS aims to solve some of the traditional CSS issues using classes which are single-purpose styling units. Atomic CSS uses immutable classes that have complete responsibility of applying a unit style to the selected component of the UI. In short, Atomic CSS is One Rule for One Styling. It tries to makes the styling more variable in a predictable manner.

The following problems are solved by using Atomic CSS:

Reduction in redundancy or duplication of code.
Confusion of Overriding of the CSS.
Problems regarding different developers working on different parts of application.
Reduction of time consumed in debugging of the styling.

Example:

<!DOCTYPE html>
<html>
  
<head>
    
<style>       

.class1 {
  background-color: blue;
  border: 5px outset red;
  text-align: center;
  width: 600px;
  height:100px;
}

.class2 {
  color: yellow;
}

</style>

</head>
  
<body>
    <div class="class1">
        <h1 class="class2">
            The Tech Platform
        </h1>
    </div>
</body>
  
</html>

Output:

3. BEM (Block Element Modifier)

BEM is a front-end naming method for organizing and naming CSS classes. The Block, Element, Modifier methodology is a popular naming convention for class names in HTML and CSS. It helps to write clean CSS by following some simple rules.

There are three main parts of BEM.

Block which holds everything (elements) inside and acts as a scope.
Element which acts as a specific part of the component.
Modifier which adds additional styles to a specific element(s).

Code:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Output:

4. SMA CSS (Scalable and Modular Architecture)

SMA CSS is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>SMA - Scalable and Modular Architecture CSS</h1>

<section>
  <h2>Technology</h2>
  <p>Technology, the application of scientific knowledge to the practical aims of human life or, as it is sometimes phrased, to the change and manipulation of the human environment.</p>
</section>

<section>
  <h2>Types of Technology</h2>
  <p>Information Technology.
Biotechnology. ...
Nuclear Technology. ...
Communication Technology. ...
Electronics Technology. ...
Medical Technology. ...
Mechanical Technology. ...
Materials Technology..</p>
</section>

</body>
</html>

Output:

5. Systematic CSS

Systematic CSS is a new CSS methodology which I developed and launched recently. Systematic CSS is based on a CSS-authoring system that I have fine-tuned over several years while working for various tech startups.

Systematic CSS shares many of the principles and ideas you can find in OOCSS, BEM, SMACSS, SUIT CSS, and other CSS methodologies. Systematic CSS is meant to be a simpler alterative to existing CSS methodologies: There are fewer naming-conventions to remember, and the class-naming convention is intended to be more intuitive. In the Systematic CSS methodology, the process of developing a new web design is broken up into four phases:

Layout
Elements
Widgets
Modifier

Example:

<!DOCTYPE html>
<html>
<body>

<h1>Systematic CSS</h1>

<p>Systematic CSS shares many of the principles and ideas you can find in OOCSS, BEM, SMACSS, SUIT CSS, and other CSS methodologies. Systematic CSS is meant to be a simpler alternative to existing CSS methodologies.</p>

<nav>
<a href="www.thetechplatform.com/home">HOME</a> |
<a href="www.thetechplatform.com/about">ABOUT</a> |
<a href="www.thetechplatform.com/learn">LEARN</a> |
<a href="www.thetechplatform.com/blog">BLOG</a>
</nav>

</body>
</html>

Output: