1.
AN IN DEPTH GUIDE
TO WRITING BETTER &
CLEANER CSS

2.
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?

3.
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?

4.
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?

5.
TYPES OF CSS
METHODOLOGIES
SMACSS
Enables categorization, modularity, and organization. Best used with
SASS/SCSS or CSS with concatenation.
Block, Element, Modifier
Enables high level semantics, readability, strict naming conventions and it
keeps CSS specificity to a minimal level.
Two major players

6.
METHODOLOGIES
IN DEPTH
SMACSS
• 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

7.
METHODOLOGIES
IN DEPTH
SMACSS | BASE RULES
Base rule styles are implemented using element selectors rather than classes and IDs. This
allows 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

8.
METHODOLOGIES
IN DEPTH
SMACSS | 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

9.
METHODOLOGIES
IN DEPTH
SMACSS | 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 pages
can be categorized as a module. Here is an example of what a module could be in HTML:
MODULE RULES

10.
METHODOLOGIES
IN DEPTH
SMACSS | STATE RULES
These rules describe how certain elements behave or are styled when they’re in a different
state. 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

11.
METHODOLOGIES
IN DEPTH
SMACSS | 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 have
different color schemes. For example, a different scheme for both a portfolio page and a
team page.
THEME RULES

12.
METHODOLOGIES
IN DEPTH
BEM | 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 to
name the class after the block element, like so:

13.
METHODOLOGIES
IN DEPTH
BEM | 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.

14.
METHODOLOGIES
IN DEPTH
BEM | NAMING CONVENTIONS
M for MODIFIER
These are essentially flags on elements that allow us to override a given set of styles. This is
extremely common with navigation list items because chances are you won’t want margin on
the last item. Take a look at this example

15.
METHODOLOGIES
IN DEPTH
BEM | GUIDELINES
WHEN TO BEM
BEM isn’t always necessary. You could have one element follow the BEM convention but then
another 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.

16.
FINAL THOUGHTS
CSS METHODOLOGIES
Both SMACSS and BEM have their advantages and disadvantages. I have
adopted both methodologies and haven’t yet found a reason to stop. SMACSS
provides 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, more
organized, and more efficient code.