image

CSS methodologies

Naming conventions used by developers to better manage CSS which lacks built-in scoping mechanism.


image

BEM

BEM is a methodology, a naming system, and a suite of related tools. Created by the team at Yandex. Its name is an abbreviation of the key elements of the methodology — Block, Element and Modifier.

image

Atomic CSS

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

image

OOCSS

Object oriented CSS was proposed by web developer Nicole Sullivan in 2008. Her goal was to make dynamic CSS more manageable by applying the principles of object oriented design popularized by programming languages such as Java and Ruby.

image

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS, is more like a style guide to document a consistent approach to site development when using CSS.

image

ITCSS

A sane, scalable, managed CSS architecture from CSS Wizardry

image

MCSS

Multilayer CSS organization methodology is a guideline to structure your CSS. This style of code writing suggests splitting styles into several parts, called layers like foundation, base, project and cosmetic.

image

AMCSS

Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements

image

FUN

Flat hierarchy of selectors, Utility styles, Name-spaced components. This approach imposes quite a few requirements on the project and the code structure, it only establishes the preferred form of recording selectors and the way they are used in the markup

image

SUIT CSS

SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.