AN IN DEPTH GUIDE TO WRITING BETTER & CLEANER CSS

CSS METHODOLOGIES

• Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules

What are methodologies?

CSS METHODOLOGIES

• Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules

What are methodologies?

• At all times, regardless of project size. Methodologies are built for organization, readability, maintainability and scalability. The more they are are implemented, the better your code will be.

When should they be used?

CSS METHODOLOGIES

• Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules

What are methodologies?

• At all times, regardless of project size. Methodologies are built for organization, readability, maintainability and scalability. The more they are are implemented, the better your code will be.

When should they be used?

• CSS Best Practices• Class and ID naming conventions• Formatting• Organization• Ordering

What can methodologies provide?

TYPES OF CSSMETHODOLOGIES

SMACSSEnables categorization, modularity, and organization. Best used with SASS/SCSS or CSS with concatenation.

Block, Element, ModifierEnables high level semantics, readability, strict naming conventions and it keeps CSS specificity to a minimal level.

Two major players

METHODOLOGIESIN DEPTHSMACSS

• Focuses on categorization• Less code repetition• Easier maintenance

PURPOSE

How • Base• Layout• Module• State• Theme

Stands for Scalable and Modular Architecture of CSS with the goal of increasing readability of HTML. “It is an attempt to document a consistent approach to site development when using CSS” (smacss.com).

What

METHODOLOGIESIN DEPTHSMACSS | BASE RULES

Base rule styles are implemented using element selectors rather than classes and IDs. Thisallows a CSS properties to be applied to all elements of the chosen selector. In other words, a global style. However, these should be default styles.

BASE RULES

METHODOLOGIESIN DEPTHSMACSS | LAYOUT RULES

Layouts are defined to be a major component, such as a header or footer element. Or they could be a series of components, however best practice dictates that these major components should be separated. A few things to note:

• A single selector is usually called via class or ID• Modifier classes could be an additional factor to the layout

LAYOUT RULES

METHODOLOGIESIN DEPTHSMACSS | MODULE RULES

Modules are reusable components of a design. They can be carousels, navigations bars, popups, or footers. Pretty much anything component that is reused on your site across pagescan be categorized as a module. Here is an example of what a module could be in HTML:

MODULE RULES

METHODOLOGIESIN DEPTHSMACSS | STATE RULES

These rules describe how certain elements behave or are styled when they’re in a differentstate. Think of the :hover, :active, and :focus CSS selectors. A few things to note:

• Media queries are included• You can use class names that manipulate elements• You can use pseudo selectors

STATE RULES

METHODOLOGIESIN DEPTHSMACSS | THEME RULES

Theme rules aren’t used as often as other rules. However, theme rules would be used to define colors and typography that the entire site shares. This could be useful if you havedifferent color schemes. For example, a different scheme for both a portfolio page and ateam page.

THEME RULES

METHODOLOGIESIN DEPTHBEM | NAMING CONVENTIONS

B for BLOCK

A block is a top-level element of a component. An example of a block would be a nav element. This is thought of as a parent to the usual unordered list element. Another example would be an unordered list on its own. The ul will be the block. The convention is toname the class after the block element, like so:

METHODOLOGIESIN DEPTHBEM | NAMING CONVENTIONS

E for ELEMENT

A block is a top-level element of a component. An example of a block would be a nav element. This is thought of as a parent to the usual unordered list element. Another example would be an unordered list on its own. The ul will be the block.

METHODOLOGIESIN DEPTHBEM | NAMING CONVENTIONS

M for MODIFIER

These are essentially flags on elements that allow us to override a given set of styles. This isextremely common with navigation list items because chances are you won’t want margin onthe last item. Take a look at this example

METHODOLOGIESIN DEPTHBEM | GUIDELINES

WHEN TO BEM

BEM isn’t always necessary. You could have one element follow the BEM convention but thenanother not. What that means is that you should consider whether an element is an actual BEM element or it just happens to sit inside a BEM block. Here’s an example of something that doesn’t need to be BEM’D.

FINAL THOUGHTSCSS METHODOLOGIES

Both SMACSS and BEM have their advantages and disadvantages. I have adopted both methodologies and haven’t yet found a reason to stop. SMACSSprovides the organization for large scale projects, and BEM provides the strict rules for smaller scale projects.

Adopt the two, modify them to your liking, and start creating cleaner, moreorganized, and more efficient code.