CSS can fool you into thinking that it's easy to write.

However, it's not the code that's tricky, it's getting the formatting and organisation right. Without it, you can quickly find yourself with code that is too complicated to read, maintain and debug.

I've put together a non-exhaustive list of best practices and rules that should help you create and maintain a clean and extensible CSS style sheet.

1 - Segment CSS into multiple files

It is preferable to separate your CSS code into several files each corresponding to a module, view or page in your application.

Choose your preference and implement it consistently. Organising your CSS into files makes it easier to navigate.

For example, in WordPress, it might be a good idea to split your code by content template.

  • page.css
  • single.css
  • header.css
  • footer.css
  • archive.css
  • template-custompage.css

Breaking your CSS up into multiple files is especially beneficial if you use a CSS preprocessor (Sass or Less).

2 - Establish a naming convention

"There are only two hard problems in Computer Science: cache invalidation and naming things" Phil Karlton

Although naming things is hard, for sake of maintainable code, it is essential that your elements adopt a consistent naming convention.

If in your application there is a block which contains a secondary navigation, you can give it a class which will be called .secondary-nav or .nav-secondary or .navSecondary or .Nav_Secondary.

I choose to follow the BEM methodology.

BEM stands for Block, Element, Modifier, and is a naming methodology that attempts to divide your page into small reusable components.

To put it simply, a page can contain several blocks, each of these blocks can contain one or more elements which are specific to it.


Blocks represent a block of design, typically key components on your page.

Let's take the example of a web page from a blog. Being made up of 4 blocks:

  1. Navbar
  2. Main content
  3. Side-bar
  4. Footer


We write the corresponding CSS class names quite simply as:

.nav-bar { } .side-bar { } .main-content { } .footer { }

Note: We use Hyphen Delimited Strings to name things .example-class. Camelcasing, unlike JavaScript, isn’t well-suited to CSS. Using a hyphen in CSS is arguably more readable and consistent with CSS property names.


Each block of our theoretical web page is made up of different elements, for example the side-bar might contain a:

  • Title
  • Latest articles
  • A list of latest comments

According to the BEM naming convention, element class names are derived by adding two underscores, followed by the element name.

.side-bar__latest-articles { }


Modifiers are a flag on an object used to change the behavior or appearance via a CSS class.

The "latest articles" element can have several Modifiers. For example:

  • Hidden
  • Visible
  • Active
  • disabled

Modifier class names are derived by adding two hyphens followed by the element name.

.side-bar__latest-articles-- Active 
  /* ...  styles */

Basically, this how the BEM naming convention works!

3 - Use Object Oriented CSS (OOCSS)

Object-Oriented CSS (OOCSS) draws upon many concepts in object oriented programming such as the single responsibility principle and separation of concerns.

The aim of OOCSS is to produce components that are flexible, modular and interchangeable.

Take the example of a red and green button:

    display: block;
    font-size: 12px;
    color: red;
    border: 1px solid red;
    display: block;
    font-size: 12px;
    color: green;
    border: 1px solid green;

In these two examples, there is a repetition of code.

We will instead try to group the properties that these buttons share and then create an additional class corresponding to their respective differences.

  display: block;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-color: red;
  color: red;
  border-color: green;
  color: green;

In HTML, the red button will be styled like so:

<div class="button button-red">Red button