BEM / OOCSS / SMACSS / ITCSS / Atomic CSS
CSS Problems
The main problems when you use CSS are the following ones:
Global scope. All rules in CSS are in the same scope, so that you can overwrite rules when you use different style sheets.
Cascading rules. The source order really matters when you have a global scope.
Inheritance. The rules can inheritance between their and you can expect a different behavior due to this characteristic.
Selector specificity. One of the biggest problems when creating style sheets comes from the fact that the operation of selectors is not known in depth.
BEM
“BEM — Block Element Modifier is a methodology that helps you create reusable components and code sharing in front-end development.”
BEM methodology in CSS is a component-based approach for web development where the idea is to divide the user interface into various independent blocks. Its intention is to help developers better understand the relationship between HTML and CSS in a project. All selectors in a BEM have the same weight which makes it much easier to redefine styles written according to BEM methodology. In BEM, the block can have different elements, and both blocks and elements can have several modifiers. The best way to use BEM is with classes and not to use IDs because classes allow you to repeat names if necessary and create a more consistent coding structure. The main advantage of
BEM is it defines the individual task of each tag and their relation to another.
Blocks are independent components in a page they can be header, content, sidebar, footer, and search. A block name is always unique, setting the namespace for elements and providing a visible connection between the block parts. CSS class is formed as just the block:
.block
Element is a component inside the block that performs a particular function. Any element is semantically tied to its block. An element can be for example, a text input box with a button. Class is formed by the block name plus two underscores followed by the element name:
.block__.element
Modifier is how we represent the variations of a block. For example, the button being color red. CSS class is formed with the block or element’s name plus two dashes:
.block__.element--.modifier
which is an element modifier or the block-level modifiers can be directly attached to the block like:.block- -.modifier
Pros of BEM:
Better HTML/CSS decoupling - By avoiding use of HTML element names in CSS selectors, BEM makes CSS code readily portable to a different HTML structure.
Better CSS performance - Browsers evaluate CSS selectors right to left and BEM encourages frontend developers to create a flat CSS structure with no nested selectors. So the less browsers have to evaluate, the faster they can render.
No CSS conflicts - BEM avoids CSS conflicts by using unique contextual class names for every block, element and modifier combination.
Ease of code maintenance - BEM's modular approach encourages developing independent modules of code and hence easier to maintain & update without affecting other modules in the project.
Cons of BEM:
File size bloating - It is known that BEM can bloat file sizes with the longer CSS class names, but this can easily be overcome by minifying and gzipping production code.
Ugly HTML code - While the overall HTML code does 'look' ugly with BEM class names, the visitor of the website or application will not look in the source too often, so it is not really an issue.
OOCSS (Object-Oriented CSS)
“OOCSS - treats page elements as objects, giving all objects classes, treating the objects’ classes as single entities in style sheets, and taking it from there.”
Object-Oriented CSS methodology has a lot in common with the object-oriented programming approach because when using it, we create default objects. OOCSS supports code reuse and provides ultimately faster and more efficient stylesheets that are easier to maintain. OOCSS promotes heavy reuse of CSS codes, to reduce the code size. A characteristic feature of the Object-Oriented CSS is freedom, because there are only two rules:
Separation of structure from skin: define repeating visual features as separate skins that you can match with your various objects. In other words, structural styles and skin styles should be written separately.
Separation of containers and content: rarely use location-dependent styles. That is an object should look the same wherever you put it and child-selectors should be used less.
Pros of OOCSS:
Speed - Cutting down on repetition helps applications run faster. CSS files are smaller and quicker to download.
Scalability - OOCSS allows you to freely mix and re-apply classes on different elements without much regard for their context.
Efficiency - Having fewer blocks of code makes CSS easier to scan, which makes editing and updating less of a hassle.
Maintainability - Adding or rearranging HTML markups no longer requires you to rethink your entire CSS flow. This is especially helpful for larger ongoing projects.
Readability - When other programmers see your CSS, they should be able to quickly understand its structure.
Cons of OOCSS:
Increases the number of classes added to an element - As there is much more separation in the way classes are created, you may need to add multiple classes to an element to account for all of the styling elements. This can cause some confusion to those who aren't familiar with OOCSS and can clutter your markup.
May be overkill for small projects - OOCSS certainly isn't required for all use cases. For smaller projects you may opt to not use it at all and that's completely fine.
Requires a learning curve - It may be that other web developers or designers need to make adjustments to your code. However, if you're using OOCSS and your co-workers aren't familiar with it, this will require the need for them to learn how to use it before proceeding, which takes time.
SMACSS (Scalable and Modular Architecture for CSS)
“SMACSS - a flexible guide to developing sites small and large. Arguably becoming one of the most useful contributions to front-end discussions in years.”
SMACSS is a way to dig through your design process and fit those static frameworks into a flexible thought process. SMACSS allows the creation of a scalable CSS architecture divided into modules to obtain a reusable code. This method is apt particularly for larger projects as the folder structure itself defines its specific responsibilities. SMACSS project structure uses five categories so that our CSS files gets a clear, readable structure.
SMACSS categories:
Base are the default values used across the entire website for all elements. This ensures that your resulting style sheets are consistent across browsers and give a feel and look that they are unique across the solution.‌
Layout styles will divide the page into major sections with the responsibility to properly position the elements on the page creating its perfect structure. This will hold modules like header, footer, sidebar, boxes, cards etc. It can be reusable elements or those that appear only once on page.
Module contains reusable blocks. It represents separate and independent page fragments that has specific functionalities, like navigation bars. They will be mostly inside layout components and even within other modules.‌
State is used to denote the variations possible for each element. A state style is one that augments other styles under given conditions. For example, an accordion with expanded and collapsed states.‌
Theme is akin to state but defines how modules and layouts will look. Mostly these are elements that repeat across the whole project like the rules of the primary colors, shapes, borders, shadows, and such.
Naming Rules:
By separating rules into the five categories, naming convention is beneficial for immediately understanding which category a particular style belongs to and its role within the overall scope of the page. On large projects, it is more likely to have styles broken up across multiple files. In these cases, naming convention also makes it easier to find which file a style belongs to.
Pros of SMACSS:
Smaller CSS size
scalable CSS architecture
better organized code. (applicable for big projects)
Cons of SMACSS:
Too many classes in HTML
Classing more explicitly will increase your pagesize.
Could be overkill for small projects
Atomic CSS
“Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.”
Atomic CSS simply defines a set of classes representing single-purpose styling units. It solves some of the traditional CSS issues using classes that are considered single-purpose styling units. This methodology aims to provide highly granular and reusable styles, instead of rules for every component. This can reduce the specificity conflicts and tries to make the styling more variable in a predictable manner. This method helps in reduction in redundancy of code and the confusion of overriding CSS styles. The advantage to this methodology is that it has a lower barrier to entry and is more easily understood by those who are not well-versed in CSS. This approach can handle longhand or shorthand class names (longhand would be more readable whereas shorthand favors brevity). In essence, Atomic CSS is One Rule for One Styling.

Atomic Design:
Atoms - An HTML element, e.g. an
input
Molecules - A set of HTML elements, a search for example including a
label
,input
and abutton
Organisms - A set of Molecules, like a header of a site. This site has in the header Organism: Site title, Beta remark, navigation and search
Templates - A wireframe of the wholes site, containing all the Organisms, layout starts to appear
Pages - The whole thing together, the most complex compound of all, the actual site with all it's images and everything
Pros of Atomic CSS:
keeps CSS trim by creating highly granular, highly reusable styles, instead of a ruleset for every component
greatly reduces specificity conflicts by using a system of low-specificity selectors
allows for rapid HTML component development once the initial rulesets are defined
Cons of ACSS:
Too many classes, not very neat and you might hate it.
Blurs the line between content and presentation.
work with media queries
ITCSS - Inverted Triangle CSS
“ITCSS – a sane, scalable, managed CSS architecture achieved with mindful CSS code organization.”
ITCSS helps you organize your CSS files in such a way that you can better deal with CSS specifics like global namespace and selectors specificity. ITCSS separates your global CSS codebase into several sections to form an inverted triangle structure. This method provides a solid level of encapsulation so that it can prevent non-shared CSS-rules from interfering with each another. Unlike other methodologies ITCSS is very flexible as it does not force one to use any naming convention.
The main pattern followed in this methodology is the low to high specificity. Least specific, mostly generic selectors will appear at the start of the project and the specificity will steadily increase. This will be helpful to reduce specificity conflicts. So, each layer of separation will be a logical progression from the last. Thus, CSS will be easier to scale.
ITCSS layers can be ordered as:
Settings layer can define all the variables,
Tools layer can be used for tooling purposes like declaring mixins and other functions that are globally required.
Generic layer can contain all the normalized, high-level, far-reaching styles.
Elements can hold the styles for bare HTML elements and can redefine the default styles for those elements in this layer.
Objects layer has styles for the first elements that have classes (like containers, wrappers, rows etc.).
Components can house most of the UI element styles.
Utilities classes can override anything that goes before in the triangle.

Props:
Page objects can be split into their own CSS/SCSS files for reusability. It’s simple to copy/paste and extend every object into other projects.
Depth of specificity is up to you.
There’s no set folder structure, and no required use of preprocessing tools.
You can merge concepts from other methodologies such as CSS modules to create your own hybrid workflow.
Cons:
can be overkill for a small project
Last updated
Was this helpful?