CSS Methodologies

Methodologies are mentioned below:

1. BEM (Block — Element — Modifier )

  • Block: Standalone entity that is meaningful on its own. (header, container, menu)
  • Element: A part of a block that has no standalone meaning and is semantically tied to its block. (menu item, list item, checkbox caption)
  • Modifier: A flag on a block or element to change appearance or behavior. (disabled, highlighted, enabled, checked)
// Block Element
.form {
}
// Element
.form__submit {
}
// Modifier
.form--theme-xmas {
}

2. OOCSS (Object oriented CSS)

  • Separate structure and skin: This means to define repeating visual features (width, height, margins, paddings, etc) as separate skins (colors, fonts, shadows, gradients, etc) that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code.
  • Separate container and content: This means rarely use location-dependent styles. An object should look the same no matter where you put it.
<a href="#" class="btn btn-small">Click me!</a>
<a href="#" class="btn border btn-medium">Click me!</a>

3. SMACSS (Scalable and Modular Architecture for CSS)

  • Base: Exclusively single element selectors, attribute selectors, pseudo-class selectors, child selectors, or sibling selectors.
  • Layout: Divide the page into sections.
  • Modules: Reusable, modular parts of our design.
  • State: Describe how a module or layout looks on screens.
  • Theme: Describe how modules or layouts might look.

4. Atomic CSS

  • Highly granular, highly reusable styles, instead of rules for every component
  • Greatly reduces specificity conflicts by using a system of low-specificity selectors
  • Allows for rapid HTML component development once the initial rules are defined
  • The lower specificity of classes also allows for easier overrides
<button class="b1 b--green bg-green white br-5 ma-10 f3 ttu fw-400 padding-10">
Click Me!
</button>

--

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Adding Colliders to Tilemaps in Unity

How to set up simple mobile controls in Unity

Deploying CSP: a 5-step approach — DareBoost Blog

Matrix-3: Walkthrough

Syntropy & Starlink: Testing Results

People of Hack Capital: Fayez, Full Stack Software Engineer

How to align product tiles with same height of elements using flex

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.

More from Medium

CSS Specificity

HTML Basics - Structure

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

HTML — Part-6