CSS Methodologies What Are They?

A set of guidelines on how to organise your CSS files and conventions for naming selectors.

Although CSS is an easy language to write, without an agreed upon convention, the code gets messy almost as fast as it is written.

while BEM is a head of the pack here, Atomic CSS is also starting to gain ground with its completely new utility-class-driven philosophy.

That means any change you make has the potential to cascade and alter the presentation of unrelated bits of the UI.

Extended CSS Languages, a.k.a. CSS processors, such as Sass, Less and Stylus make things a little easier by offering up features that make writing CSS easier.

WHY USE THEM?

They make it easier to manage multiple CSS files and keep consistency, especially for larger projects. They also help you manage the cascade better.

BEM

Block, element, modifier naming convention. Breaks the page up into modular reusable blocks.

OOCSS

Object oriented CSS is all about creating reusable CSS. It has two main principles:

1. Separate structure and skin

2. Separate container and Content.

ITCSS

Inverted triangle CSS – a layered way of splitting CSS properties based on specificity and importance.

Settings, Tools, Generic, Elements, Objects, Components and Trumps

ATOMIC CSS

Breaking up CSS into very Small specific classes. Styles are built up by adding multiple classes to HTML elements.

HOW TO CHOOSE?

Choose whichever methodology fits best with your project. You can combine more than one and make adjustments to better suit your needs.

Leave a Reply

Your email address will not be published. Required fields are marked *