Skip to main content ↓
Screenshot of a webpage about Scalable and Modular Architecture for CSS, featuring a header with a logo and title, an introduction section, and a table of contents for different topics related to CSS architecture.

5 Standardized Methods for Writing CSS

CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help.


SMACSS SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme.

2. CSS Guidelines

CSS Guidelines CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth.


OOCSS OOCSS stands for Object-oriented CSS. The central component of this approach is the CSS object, defined as “a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.”1

4. BEM

BEM BEM stands for Block, Element, Modifier. In this front-end development methodology, a block is a discrete component, or a “building block”. An element is a part of a block; for instance, a search form block has two elements: (1) a text input box and (2) a button.  A modifier is a property that changes a block or element visually or behaviorally. Each block has a unique name (a CSS class).

5. idiomatic CSS

idiomatic CSS Principles of writing consistent, idiomatic CSS — or idiomatic CSS for short — is a CSS development style guide. It includes guidelines for code-formatting, commenting in the stylesheet, and such. The core principle behind this style guide is to keep your source CSS consistent and readable.


  1. oocss Wiki

Related Content

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator