Scalable and maintainable CSS

- best practices -
 ● Key Concepts in CSS

● Good practices in CSS

Contents ● What is BEM

● What is SMACSS

● Benefits of BEM + SMACSS

● Layout modes & algorithms

Importance

If a statement has a conflict, the new ones will

prevail over the older ones. They are applied following
this structure:

● Declarations in user agent stylesheets (I.e.

browser default styles. Used when there are no
styles defined).
● Declarations in user stylesheets (custom styles
created by the user).
● Author declarations in style sheets (created by
the web developers).
● !important declarations in author style sheets
● !important declarations in user style sheets
 Key concepts
Inheritance, specificity, order
Inheritance

Inheritance in CSS is the mechanism by which certain

properties of a parent element are passed on to its
children.

However, not all properties are inherited by default.

Whether some selectors prevail over others in the
cascade depends, in this order, on three factors:
importance, specificity, order.
Specificity
.main-heading { color: red; }
h1 { color: blue; }
Specificity is the logic the browser uses for deciding
what rule should be applied when there are multiple
rules for the same element. In a nutshell, specificity <h1 class="main-heading">This is my

measures how specific a selector's selection is. heading.</h1>

How is it calculated?
We can use this - Calculator link

For example, to keep the specificity at 0010, each

parent and each child should be specified by a single
class. This way we can easily “overrule” this
specificity. On the other hand, using nested selectors
(#nav a.menu li.item:first-child, with a specificity of
0132) will make it hard to overrule them.
Order

When two declarations have the same importance

(meaning their origin is the same. I.e. They both come
from the Author layer) the specificity of the rules
decides which one should be applied.

If the rules have the same specificity, the order in the

code controls the result. The rule defined lower in the
code (newer) wins the one defined higher (older).
Good practices in CSS
Keep it simple
Decouple HTML from CSS

a.button {} /* Bad */
#sidebar ul > li > ul { }
● Separation of concerns is crucial. HTML is a
garden that many people touch, and they may
/* Good */
need to change the nature of the button and
change the tag to <a> tab button or a <span> .submenu { }
tag. The solution to this is use a simple class.

● NEVER USE HTML TAGS INSIDE THE CSS, DON’T

PUT FENCES TO THE FIELD
Semantic classes

● CSS code has to be as much readable and

expressive as possible. I.e: .l-full {} is a class
that which functionality will likely get forgotten
after a year.

● This is the reason why it is better to have an

abstract medium entity. A more legible example
could be: .layout–full-width {}

● Without making assumptions and without having

to ask anyone, now I will always be capable of
understanding that it refers to a component that
will impact the layout and its entire width.
Avoid concatenating selectors /* Bad */
#sidebar .logo .logo_imagen
span {}

● The “bad” code example on the right has a

specificity of 0121. This makes it difficult to BEM helps us in these cases.
handle with other selectors. We will need the Same example of code with BEM
to maintain minimum
use of !important here.
specificity:

● Solution: never use inline styles, #id’s or HTML

/* Good */
tags. The ideal is to keep them at 0010. Also, use
.sidebar {}
a class for every element. They should not
imitate our HTML sintax. .sidebar__logo {}
.logo {}
.logo__imagen {}
.logo__text {}
Design made simple

● Start the layout from the outside to the inside,

on the following order:
1. Box-model - css-tricks.com
2. Layout
3. Content
4. Aesthetics

● When working on the box model (display, width,

height, margins,...), the layout (z-index, flexbox,...)
and positioning, outline everything, so that you
can immediately see what is exactly happening.
 element {
position: relative;
display: flex; Position
Organising CSS properties
width: 250px;

1. In order of importance, the most significant height: 350px;

properties of every element are those related to margin: 5px 10px;

padding: 10px;
its layout and position. Write position first if border: 1px solid #eee; Box-model +
absolute or fixed. Float first, if position is border-radius: 5px;
box appearance
relative or sticky. Display first if it is equal to
none. background: #fff;
box-shadow: 5px 10px 18px #a3a3a3;

2. Following the above are box-model properties.

They wrap around every HTML element. It font-family: ‘Roboto’, sans-serif;
font-weight: 300;
consists of: margins, borders, padding, and any Typography
font-size: 14px;
box-model appearance at the end of it.
color: #111;
3. Then there would be those related to the fonts text-align: left;
and its decoration. letter-spacing: 1px;
line-height: 20px;
Esthetic
4. To end with are the purely aesthetic ones. transition: transform(5px);
}
Specificity
1. If the element has inline styling, that
automatically wins (1,0,0,0 points)
2. For each ID value, apply 0,1,0,0 points
3. For each class value (or pseudo-class or
attribute selector), apply 0,0,1,0 points
4. For each element reference, apply 0,0,0,1 point
What is BEM?
Block-Element-Modifier
What is BEM?

Block Element Modifier is a naming

convention for classes in HTML and CSS
that helps you creating reusable
components, allows for a scalable solution
and a more readable code.

Easy - There is only one way to create

classes so everyone follows the same
architecture.

Modular - Independent blocks and

selectors.

Flexible - It can be modified to your needs.

Why use BEM?

● Maintainability and scalability

● Ensures organization and quick set
up of teams.
● Avoids unnecessary difficulties
modifying projects without
regressions.
● Reusable code with no specificity
issues.
● Organizational issues.
 block element modifier

.product-card__button–selected {
…
2 underscores 2 dashes
}
Components

BLOCK

● Has meaning on its own

● It is an independent entity. It can be simple or
compound when it contains other blocks.
● Block names must be unique. Similar to Ids.

ELEMENT

● It is part of a block with a specific function.

They are block dependent.
● All elements of a block are semantically equal
● Element names must be unique within a block.
Components

MODIFIER

● Property of a block or element.

They are used to change the look, behavior or
states of a block or element.
● Multiple modifiers can be used on a single
block.
● They modify a block or an element / s.
● Hover’s, actives, states, variations of .mainLayout_tweet—whiteBackground {
look&feel, etc. background: var(--white);
}
Example

<figure class="photo">
<img class="photo__img photo__img--framed" src="me.jpg">
<figcaption class="photo__caption photo__caption--large">Look at me!</figcaption>
</figure>

<style>
.photo__img--framed {
/* incremental style changes */
}
.photo__caption--large {
/* incremental style changes */
}
</style>
What is SMACSS?
Pronounced “smacks”
What is SMACSS?

SMACSS stands for Scalable and Modular Architecture for CSS.

The main goal of the approach is to reduce the amount of code and simplify code support.
 css/

Base |
|– base/
| |– reset.css # Reset
These are styles of the main website | |– typography.css # Typography rules
elements – body, input, button, ul, ol, etc. | |– utils.css # Utils rules
Default styles using type, descendent or | |– variables.css # Variables
child selectors, and pseudo-classes. | ... # Etc…

/* Type selector */
a {
color: #fff;
}
/* Pseudo-class */
a:hover{
color: #ababab;
}
 css/

Layout |
|– layout/
| |– navigation.css # Navigation
Use for major page sections (e.g., | |– grid.css # Grid system
header) with an l-prefix or layout-prefix | |– header.css # Header
to clearly identify layout styles. | |– footer.css # Footer
| |– sidebar.css # Sidebar
| |– forms.css # Forms
| ... # Etc…

.l-footer {
background–color: #fff;
}
 css/

Module |
|– module/
| |– button.css # Button
Blocks that can be used multiple times | |– modal.css # Modal
on a single page. For module classes, it | |– carousel.css # Carousel
is not recommended to use id and tag | |– dropdown.css # Dropdown
selectors (for reuse and context | ... # Etc…
independence, respectively).

.nav {
/* common nav styles */
}
.nav-bar {
/* specific */
}

<nav class=”nav nav-bar”></nav>

 css/

State |
|– state/
| |– state.css # State
Used for variations that indicate a state | ... # Etc…
change, usually triggered by user
interaction.

.is-hidden {
State class names use an is- prefix
such as is-active or is-hidden. visibility: hidden;

This is the only section in which the use }

of the keyword “! Important” is .is-active {
acceptable. visibility: visible;
}
 css/

Theme |
|– theme/
| |– dark.css # Dark mode
Styles that make up the | |– light.css # Light mode
look and feel. | ... # Etc…

Separate files example Theme-specific class example

/* module-name.css */ /* module-name.css */
.module { .module {
border: 1px solid; border: 1px solid;
} }
/* theme.css */ .theme-blue .module {
.module { border-color: blue;
border-color: blue; }
}
BEM + SMACSS?
The ideal solution?
Benefits of BEM + SMACSS

● Easy to navigate between directories

and files
● No styles collisions
● Avoid specificity battles (less nesting)

●
●
●
or the use of big size selectors
Easier to reuse, recycle or repurpose
Promotes consistency
Ease of code maintenance
+
Other CSS methodologies

● 7 - 1 pattern (SASS)
● ITCSS (BEM + IT = BEMIT) Inverted Triangle CSS (itcss.io)
● OOCSS (Object-oriented CSS)
● SUITCSS
● Atomic CSS (Also known as Functional CSS) atomicdesign.bradfrost.com
● And more...
LAYOUT MODES & ALGORITHMS
How are layouts calculated?
 Layout modes Which layout will be used here?

● Flow .main-container {
● Flexbox z-index: 10;
● Float }
● Positioned
● Grid
● Table
Flow is the default layout algorithm
● Multi-column (e.g. column-count: 3;) used for non-table HTML elements.
It´s used for creating document-style
Every element will have its layout layouts, similar to word.
calculated using a primary layout mode.

Z-INDEX IS NOT IMPLEMENTED IN FLOW

Some CSS properties will work exactly
the same in all algorithms, but each
algorithm can override the default
behaviour of any property.

Let´s see some examples

Questions?