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.
