Unveiling the Secrets of CSS: From Its Origins to Modern Mastery

Unveiling the History of CSS

In 1994 Tim Berners‑Lee created the World Wide Web, and the first web pages were plain text and images. The desire for visual appeal led Håkon Wium Lie to propose Cascading HTML Style Sheets (CHSS) the same year, introducing attributes such as bgcolor and face and the <font> tag.

Two years later CSS 1.0 became a W3C recommendation, followed by CSS 2.0, CSS 2.1 and CSS 2.2. Since 2015 the CSS Working Group stopped version‑numbering and split features into independent modules managed as Level 1, Level 2, Level 3, etc.

The specification process for a CSS feature includes stages: Editor Draft (ED) , First Public Working Draft (FPWD) , Working Draft (WD) , Candidate Recommendation (CR) , Proposed Recommendation (PR) , and finally Recommendation (REC) . Each stage adds stability and implementation feedback.

Why CSS Is Not Simple

Although CSS syntax looks simple—select an element and assign a property—real‑world styling involves cascade order, selector specificity, inheritance, and layout contexts, making it challenging for beginners.

Cascade and Specificity

The cascade determines which rule wins when multiple rules apply. Specificity is calculated as a‑b‑c‑d where a is inline styles, b counts ID selectors, c counts class, attribute and pseudo‑class selectors, and d counts element and pseudo‑element selectors.

* { }
li { }
ul li { }
ul ol+li { }
h1 + *[rel=up] { }
ul ol li.red { }
li.red.level { }
#x34y { }
style="" { }

Inheritance

Some properties inherit (e.g., color) while others do not (e.g., border). CSS provides keywords initial, inherit, unset, revert, and all to control inheritance.

Formatting Contexts

Formatting contexts define how boxes are laid out. Key contexts include:

Inline Formatting Context (IFC) : lays out inline‑level boxes in line boxes.

Block Formatting Context (BFC) : vertical stacking of block‑level boxes, isolates floats, and prevents margin collapse.

Flex Formatting Context (FFC) : created by display:flex or inline-flex, with its own layout rules.

Grid Formatting Context (GFC) : created by display:grid or inline-grid.

Box Model

Every element generates a box consisting of content , padding , border , and margin . The box-sizing property can include padding and border in the element’s width to avoid overflow.

div {
  width: 100%;
  padding: 1rem;
}

Layout Techniques

Web layout has evolved from no layout, table layout, positioning, floats, to modern Flexbox, Grid, multi‑column, and responsive designs that adapt to mobile, foldable, and multi‑screen devices.

Writing CSS Effectively

Developers use methodologies such as BEM, Atomic CSS, and utility‑first frameworks like Tailwind CSS. Pre‑processors (Sass, LESS, Stylus) and post‑processors (PostCSS) help manage large codebases, while CSS‑in‑JS solutions integrate styling with JavaScript frameworks.

Emerging Features

Recent additions include CSS custom properties, logical properties, writing modes, gap, subgrid, scroll‑snap, new media queries, and Level 4 selectors. Houdini APIs (e.g., Paint API) enable developers to create custom rendering effects.

Learning Resources

Recommended books, W3C specifications, blogs (e.g., 张鑫旭, chokcoco), RSS feeds, Chrome extensions like Daily.dev, and platforms such as CodePen provide continuous learning opportunities.

Future Outlook: Will AI Replace CSS Developers?

The author, now part of Alibaba’s F(x) Team working on the imgcook product, invites discussion on whether AI will eventually replace CSS developers.

“In the near future, will AI replace CSSers?”

For more visual inspiration, see the images below.

For a deeper dive, see the original images and code snippets in the source article.