image

CSS methodologies

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


BEM

image

getbem.com

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.

Atomic CSS

image

acss.io

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

OOCSS

image

oocss.org

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.

SMACSS

image

smacss.com

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.

ITCSS

image

itcss.io

A sane, scalable, managed CSS architecture from CSS Wizardry

MCSS

image

operatino.github.io

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.

AMCSS

image

amcss.github.io

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

FUN

image

benfrain.com

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