CSS is the de-facto way of styling web applications. Although various other approaches exist (CSS-in-JS, styling inline with JS, etc.), the simplicity of this way ensures it is a timeless method for defining the way our end result looks and behaves.

In this training we will explore an atomic approach towards styling. The main idea is to use small, composable utility classes that augment the HTML in order to obtain the desired result. This provides great flexibility, decreases CSS specificity and allows for greater maintainability in the face of future changes. Along the way, we will dive deep into both basic and advanced CSS knowledge and APIs (positioning, display types, flexbox, grid, etc.).

INTENDED AUDIENCE

This training assumes the participants are already familiar with basic CSS knowledge, such as common rules, selectors, classes vs. IDs, etc. Thus, the aforementioned concepts will not be discussed or detailed during the training.

This training targets intermediate developers who would like to upgrade their CSS knowledge by finding out more about how CSS works in-depth and understanding what it takes to build a scalable and maintainable CSS codebase.

OUTLINE

Included below are the main topics covered in this training. The duration is 3 days.

What is CSS and why is it hard?
Browser rendering process
a. Byte to string conversion
b. Tokenizing
c. Lexing
d. DOM, CSSOM, render tree
e. Layout and paint
f. How browsers see a webpage
Box model
Display types
a. Block
b. Inline-block
c. Inline
d. Table
e. Flex
Layering in CSS
a. Layer creation criteria
b. Repainting layers
c. Composing layers
CSS positioning
a. Static
b. Relative
c. Absolute
d. Fixed
e. Sticky
Flexbox API
Grid API
Centering elements
a. Horizontally
b. Vertically
c. Independent of dimensions and content
Going responsive with media queries
Advanced CSS3 selectors, pseudo-selectors and pseudo-classes
a. The > selector
b. The + selector
c. The ~ selector
d. nth-child, first-child, first-of-type, etc.
e. first-letter, etc.
Understanding your CSS in Dev Tools (Chrome)
Introduction to CSS architecture
File organization
Pre-processors and benefits
The specificity model and specificity graph of your application
Large scale methodologies
a. BEM
b. OOCSS
c. SMACSS
Architecture in practice
a. Design SRP classes
b. Composing classes & flexibility
c. Examples of libraries (inuit.css, Tailwind)
Recap

ABOUT THE TRAINER

Vlad Zelinschi is a pragmatic software architect, lover of the web and caffeine addict. He cares about surrounding himself with thoughtful leaders. He’s the CTO of Strongbytes, Google Developer Expert on Web Technologies since October 2016 and a certified trainer. He’s part of JSHeroes Community and actively acting as an advisor for a couple of well known Romanian conferences such as Codecamp and NDR.