LOGBOOK

HELP

1 / 23
Other keys: showSpace: good1-4: rate0: skip5: flag

Question

What is the separation of concerns principle in web development?

Answer

Separation of concerns means splitting a web page into three independent layers — structure (HTML), presentation (CSS), and behaviour (JavaScript) — so each can change without disturbing the others.

A helpful analogy is a newspaper. The reporter writes the words (content), an editor arranges the columns, headlines and images into a sensible layout (structure), and the corporate design — fonts, colours, the masthead — is decided once and reused across every issue (presentation). Web development works the same way:

Layer Technology Role
Structure HTML Content and its semantic meaning
Presentation CSS Visual styling and layout
Behaviour JavaScript Interactivity and logic

Why bother keeping them apart?

  • Maintainability: you can restyle a whole site by editing CSS, never touching the content.
  • Reusability: one CSS file can dress hundreds of HTML pages identically.
  • Accessibility: the content still reads sensibly even if styling fails to load.
  • Team collaboration: a designer and a content author can work in parallel.

The classic mistake is mixing layers, for example baking colours straight into the markup:

<!-- Mixing content and presentation - hard to maintain -->
<p style="color: red; font-size: 16px;">Text</p>

<!-- Separated - the look lives in CSS, keyed off a class name -->
<p class="highlight">Text</p>
or press any other key

Question

What does "CSS" stand for, and what is the current state of the CSS standard?

Answer

CSS stands for Cascading Style Sheets; it is no longer released as single numbered versions but as a growing set of independent modules, which is why there will never be a "CSS4".

The name has two important ideas baked in. Style sheet means a separate document that describes how content should look. Cascading refers to the rule system that decides what happens when several conflicting styles target the same element (covered in its own card).

A quick history:

Milestone Year What it added
CSS 1 1996 Basic styling: fonts, colours, simple spacing
CSS 2 1998 Positioning, z-index, media types
CSS 3 onward Ongoing Split into modules (Flexbox, Grid, Animations, ...)

Since CSS3, the language is developed as separate modules that each progress and ship on their own schedule, rather than as one big numbered release. Browser vendors implement each module as its specification matures. The practical takeaway: treat CSS as a continuously evolving "living standard" where individual features arrive when they are ready.

Go deeper:

Illustration
Javi Aguilar and The CSS-Next Community Group · CC0 · Wikimedia Commons
or press any other key