Scribd
Upload
184 views

ITCSS

ITCSS is a methodology for organizing CSS code using a layered inverted triangle approach from generic to specific, with settings and tools at the base followed by generic, base, objects, components, and trumps layers moving from low to high specificity. Each layer builds upon the previous with increasing specificity. The naming convention follows BEM (Block Element Modifier) with prefixes to indicate if a class is for an object, component, or utility.

Uploaded by

Goran Pavlovski
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
184 views

ITCSS

ITCSS is a methodology for organizing CSS code using a layered inverted triangle approach from generic to specific, with settings and tools at the base followed by generic, base, objects, components, and trumps layers moving from low to high specificity. Each layer builds upon the previous with increasing specificity. The naming convention follows BEM (Block Element Modifier) with prefixes to indicate if a class is for an object, component, or utility.

Uploaded by

Goran Pavlovski
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

ITCSS

Inverted Triangle CSS Architecture


What is ITCSS?

ITCSS is a methodology of writing CSS code that is scalable and easy to manipulate

1. Generic to explicit - We start with the most


generic, low-level, catch-all styles.
2. Low to high specificity - The specificity
steadily increases
3. Far-reaching to localized - Selectors at the
start of our project affect a lot of DOM-
elements, for example your browser reset
styles, while selectors later in our project
become very localized, for example specific
styles for one component.
Settings

The settings layer consists of partials


which are used to define the global
variable configurations for things like
colors, fonts, sizes etc…
@import “sizes”;

@import “global”;

@import “colors”;

@import “fonts”;
$brand-color: #bada55;
$spacing-unit: 10px;
Tools

Partials for globally available mixins


and functions
@import “mixins”;

@import “functions”;

@mixin font-brand() { @function half($n) {


… …
} }
Generic

The first layer that outputs CSS,


affects a lot of the DOM, low
specificity, far reaching
Generic @import “box-sizing”;

@import “normalize”;

@import “reset”;

*, *::before, *::after {
…
}
Base / Elements

This layer is used for styling bare


unclassed elements. These elements
come with default styling from the
browser.
Base @import “links”;

@import “image”;

@import “headings”;

img {
ul {
display: block;
list-style: square outside;
max-width: 100%;
}
}
Objects

First layer where we find class-based


selectors. These partials define style
rules for elements responsible for
layout or structuring.
@import “layout”;
Objects
@import “grid”;

@import “list-inline”;

@import “wrapper”;
.o-grid { .o-layout {
… …
} }
Components

In this layer we define partials for


specific UI components. Still using
only classes which are named
explicitly
@import “header”;

@import “carousel”;
Components
@import “card”;

.c-card { . c-card__column {
… …
} }
Trumps / Utilities

The partials in this layer can override


anything that has gone before it. A lot
of the declarations will carry !
important
@import “clearfix”;

@import “hide”;

Trumps

.u-one-half { .u-hidden {
width: 50% !important; display: none!important;
} }
Folder structure

Higher layers have broader


range of influence, so the
specificity boosts as we move
down the triangle. We can
adjust the folders structure to
our own needs (themes etc..)
ITCSS Naming Conventions - BEMIT

ITCSS adopts the BEM CSS naming o- Signify that something is an object
methodology and mixes it with its
c- Signify that something is a
style structure and its namespacing
component
approach.
u- Signify that something is a Utility

.o-layout {} .c-modal {} .u-clearfix {}


.o-layout__item {} .c-modal__title {}
.o-layout--fixed {} .c-modal--gallery {}
BEM

BEM stands for Block Element .modal {} - BLOCK


Modifier. .modal__title {} - ELEMENT
.modal--large {} – MODIFIER can be applied on
both blocks and elements

 modal is the higher level of an abstraction or


component
 modal__title is a descendent of the .modal that helps
form the .modal as a whole
 modal--large is a different state or version of the .modal
BEMIT

BEM stands for Block Element .modal {} - BLOCK


Modifier. .modal__title {} - ELEMENT
.modal--large {} - MODIFIER

 modal is the higher level of an abstraction or


component
 modal__title is a descendent of the .modal that helps
form the .modal as a whole
 modal--large is a different state or version of the .modal

You might also like