chapter four

4 Vanilla CSS

 

This chapter covers

  • Vanilla CSS for real apps with modern layout systems.
  • Using modular CSS with Cascade Layers and variables.
  • Responsive design with Container Queries and new units.
  • Animating content with semantic transitions.

In the previous chapter we cover the user interface basics of the modern web, focusing on the semantic markup. The next step is to talk about CSS, or Cascading Style Sheets.

CSS is your layout and design language. In a Vanilla Web project, we use modern CSS directly without frameworks or CSS libraries, such as Tailwind or Bootstrap. The goal is to keep styles small, predictable, and easy to reason about. You will rely on platform features such as custom properties, layers, container queries, and improved selectors to clearly express your system.

A maintainable stylesheet starts with naming things by meaning, not by appearance. Prefer semantic classes that match the UI role or component, and then let properties and media features adapt them according to context. Avoid over-specifying rules. Keep selectors short and stable.

Note

While this book is not a comprehensive guide to CSS, we will expand on and apply all the techniques shown in this section in the following chapters as we work with Web Components.

4.1 Maintainable and modular CSS

4.1.1 Cascade Layers

4.1.2 Custom properties (variables)

4.1.3 Container queries and units

4.1.4 Nested selectors

4.1.5 New pseudo-selectors

4.1.6 New units

4.2 Modern Layout

4.2.1 1D layout with Flexbox

4.2.2 2D layout with grids

4.3 Animations

4.3.1 Transitions

4.3.2 Keyframe animations

4.3.3 Page transitions

4.3.4 Scroll-driven animations

4.4 Summary