CSS Ecosystem Meets Standards, now?

Frontend Conference Tokyo 2025
saku🌸 / @sakupi01

saku

🤗

Design Technologist / ex-Web Frontend
@Cybozu

🍏 / ☕ / 🌏 > ❤

🐦 @sakupi01
📝 blog.sakupi01.com
🐙 @sakupi01
🦋 @sakupi01.com

The future of Web Design

CSS

The present of CSS

The past of CSS

1. CSS describes Reusable & Semantic Design

2. CSS describes Responsible Design

1. CSS describes Reusable & Semantic Design

CSS @mixin? Still Not Implemented

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

CSS Nesting? Baseline 2023

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

CSS Nesting? Baseline 2023

Container Queries? Baseline 2022 & Widely Available 🎉(Container Size Query)

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

CSS Nesting? Baseline 2023

Container Queries? Baseline 2022 & Widely Available 🎉(Container Size Query)

CSS Custom Properties? Baseline 2019

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

CSS Nesting? Baseline 2023

Container Queries? Baseline Widely Available 🎉(Container Size Query)

CSS Custom Properties? Baseline 2019

Selectors? CSS1

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

Container Queries? Baseline 2025

CSS Nesting? Baseline 2023

Container Queries? Baseline 2022 & Widely Available 🎉(Container Size Query)

CSS Custom Properties? Baseline 2019

Selectors? CSS1

<FONT></FONT>? Before CSS 😂

CSS @mixin? Still Not Implemented

CSS if()? Limited Availability

Container Queries? Baseline 2025

CSS Nesting? Baseline 2023

Container Queries? Baseline 2022 & Widely Available 🎉(Container Size Query)

CSS Custom Properties? Baseline 2019

Selectors? CSS1

<FONT></FONT>? Before CSS 😂

CSS の前から Web 使ってた人？！

No Nesting/Wrapping

No Responsive Features

No Variables

No Complex Selectors

No Build Steps for CSS

etc...

NEW Content!! NEW Content!! NEW Content!!

<P><FONT SIZE="6" COLOR="RED">~~~</FONT></P>
<P><FONT SIZE="6" COLOR="RED">~~~</FONT></P>
<P><FONT SIZE="6" COLOR="RED">~~~</FONT></P>
<P><FONT SIZE="6" COLOR="RED">~~~</FONT></P>
<P><FONT SIZE="6" COLOR="RED">~~~</FONT></P>

CSS Selectors

p {
  color: red;
}

Simpler !

Still Complicated 😅

Non-Semantic Styles:
e.g. WTF Grid before Grid

.col2of6 {        /* col2of6...????? */
  float: left;    /* なんで float???  */
  display: inline;      /* なんで inline??? */
  width: 31.707%; /* 誰?どこからきた??? */
  margin-right: 2.439%; /* 誰?これもどこから来た??? */
}

For Semantic & Reusable Styles...

  • Preprocessors
    • Sass/LESS/Stylus 2006~

For Semantic & Reusable Styles...

  • Preprocessors
    • Sass/LESS/Stylus 2006~
  • Naming Conventions

For Semantic & Reusable Styles...

  • Preprocessors
    • Sass/LESS/Stylus 2006~
  • Naming Conventions
  • Design Systems / Atomic Design 2013 / @Brad Frost
  • Design Tokens 2016 / @Jina Anne

For Semantic & Reusable Styles...

  • Preprocessors
    • Sass/LESS/Stylus 2006~
  • Naming Conventions
  • Design Systems / Atomic Design 2013 / @Brad Frost
  • Design Tokens 2016 / @Jina Anne
  • Declarative UI React / 2013 / @Dan Abramov
    • Component Libraries
    • JS Tooling for CSS
      • CSS Modules, (Zero-)Runtime CSS-in-JS, Utility-First ...

etc...

to make styles ...

Semantic & Reusable

We combine...

Classes & Attributes & JavaScript

to ultimately develop...

Component Libraries & Design Tokens & etc...
aaaaand Design Systems!

Selectors & Specificity

We use Specificity to...

1. Describe Membership (through lower boundaries & proximity)

2. while Live With Global Styles (don't fully encapsulate)

  • Naming Conventions(e.g. BEM) → .block_element--modifier

We use Specificity to...

1. Describe Membership (through lower boundaries & proximity)

2. while Live With Global Styles (don't fully encapsulate)

3. Avoid Naming Conflicts (across large teams & projects)

  • CSS Modules → ._unique_58i37_1
  • CSS-in-JS → .Unique__SC-giuRMQ
  • Scope in Vue.js/Svelte/etc... → .unique[data-JKGHJ]

OK-ish Namespaces.

We use Specificity to...

Create Priority Layers

itcss

Give Semantics & Reusability to Styles using Specificity

Specificity Architecture is
what CSS Architecture was/is

We use the Same Notation: Selector

CSS Syntax Module Level 3

Style with Selector

/* <input type="text" id="form" class="occupation"> */

/* specific component style */
#form { color: maroon; }
/* component style */
.occupation { color: darkBlue; }
/* design-system style */
[type="text"] {
  color: darkGreen;
  color: var(--submit, black);
}
/* global style */
input { color: gray; }

/* user style */
input { color: olive; }

/* ua style */
input { color: FieldText; }

💥 Conflicts!

すべての HTMLElement の
すべての CSS Properties に対して、
必ず一つの Value が決定されていないと
ブラウザはスタイルできない

🔥⚔️ Cascade Arena ⚔️🔥

Cascade Sorting Order™

We're lonely in the middle...

⑥: ❗...
⑤: ❗...
④: ❗💻 Important Author >> Specificity
③: 💻 Normal Author >> Specificity
②: ...
①: ...

Only Reusable & Customizable Specificity

  • Unique #ID
  • Reusable&Customizable ClassNames/:pseudo-classes/[attibutes]
  • Non-Customizable Element/::pseudo-elements
  • Universal */where()
.🤯🤬😇-design-system-component {
  font-weight: bold !important; /* WTF */
}

Works on Consensus. Consensus is not reliable.

Especially “At Scale”

🤩 Cascade Layers 🤩

itcss

Add Official Layers of Specificity

1. @layer settings {~}
2. @layer tools {~}
3. @layer generic {~}
4. @layer elements {~}
5. @layer objects {~}
6. @layer components {~}
7. @layer overrides {~}

@layer components {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }

  .menu-item {
    background: lightcyan;
  }
}

@layer components {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }
}

@layer override {
  .menu-item {
    background: lightcyan;
  }
}

Unlayered styles Default Highest Priority

(not to break existing styles)

❗️Important Layers Reverse

(exactly like origins)

Importance は守りの手段
The user should have the last word

If conflicts arise the user should have the last word

– Håkon Lie, Cascading HTML style sheets – a proposal

If a trade-off needs to be made, always put user needs above all.
– W3C Web Platform Design Principles

… for balance, an “!important” declaration (the keywords ”!” and “important” follow the declaration) takes precedence over a normal declaration.
Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules.
ー Cascading Style Sheets, Level 2

Always put user needs above all...?

③: 🌐 Normal Author
②: 👤 Normal User
①: 🖥️ Normal User Agent (weakest)

Always put user needs above all! Yes!

⑥: ❗🖥️ Important User Agent (strongest)
⑤: ❗👤 Important User
④: ❗🌐 Important Author
③: 🌐 Normal Author
②: 👤 Normal User
①: 🖥️ Normal User Agent (weakest)

I am very !important!!!
Please DO NOT OVERRIDE ME!!

!important は...

  • 👎🏻 詳細度バトルに勝つため
  • 👍🏻 UA/User がスタイルを守るため

if we need to…

Override Styles → Layers

Protect Styles → Importance

More Useable & Semantic Cascade Control
with Less Hacks/Assumptions

Cascade Layers/レイヤーによる優先順位の制御↗︎

Give Meaning to Styles
using JavaScript ... Preprocessors

Use Variables to...

Give Meaning to Values

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Use Extends to...

Give Meaning to Chunk of Styles

// Lot in Here
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// Semantic in Use
.message {
  @extend %message-common;
}

Sass Variables (Preprocessed by JS) are Imperative in StyleSheet Scope

Execution/Declaration Order Matters

$variable: value 1;
.rule-1 {
  // value: $variable === value 1;
}

$variable: value 2;
.rule-2 {
  // value: $variable === value 2;
}

body {
  /* $font-stack == undefined */
  /* $primary-color == undefined */
}

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

No DOM Scope, No Inheritance

html {
  $font-stack: Helvetica, sans-serif;
  $primary-color: #333;
}

body {
  /* $font-stack == undefined */
  /* $primary-color == undefined */
}

CSS version is Different

CSS is A Declarative Chunk of Property with DOM Scope

Value Processing™

  1. Filtering/Parsing → Declared Values
  2. Cascading (Resolves Conflicts) → Cascaded Value
  3. Defaulting (includes Inheritance) → Specified Value
  4. Resolving/Computing → Computed Value
  5. Formatting/Unitizing → Used Value
  6. Transforming/Contextualizing → Actual Value🎉

CSS Cascading and Inheritance

すべての HTMLElement の
すべての CSS Properties に対して、
必ず一つの Value が決定されていないと
ブラウザはスタイルできない

Cascade filters out

Defaulting & Inheritance fills in

CSS property value processing - CSS | MDN

Execution Order Doesn't Matter - Cascade & Inheritance Matters

html {
  --variable: value 1 !important;
}
.rule-1 {
  // value: var(--variable) === value 1;
}

html {
  --variable: value 2;
}
.rule-2 {
  // value: var(--variable) === value 1;
}

body {
  /* --font-stack == Helvetica, sans-serif */
  /* --primary-color == #333 */
}

html {
  --font-stack: Helvetica, sans-serif;
  --primary-color: #333;
}

CSS Variables Cascade and Inherit

...like other Properties

CSS Variables
Custom Properties for Cascading Variable

Tools can make styles more ...

Semantic & Reusable

Semantic & Reusable
but in CSS-way

2. CSS describes Responsive Design

Web for all. Web of trust. Web on everything.

ー W3C Design Principles

Everyone is sooooo many ones!!

Everything is sooooo many things!!

Flow Layout™

is the way that block and inline elements are displayed on a page before any changes are made to their layout (which means by default).

The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.

While inline elements flow in the directon of text in the Writing Mode, block elements are displayed as paragraphs do in the Writing Mode of that document

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Flow_layout

Edit ME.

4.5. Content should be viewable and accessible by default

Design CSS properties or CSS layout systems (which are typically values of the display property), to preserve the content as viewable, accessible and usable by default.

ー Web Platform Design Principles

Web Design - Client Controls Design

Web でのスタイリングはコンテキストに依存する

  • @media (Viewport, light/dark, prefers-*, etc...)
  • User Settings (font-size, color scheme, etc...)
  • Interactions (Hover, Focus, Touch, Long-press, Voice, etc...)
  • Device Capabilities (PC/Mobile, OS, Screen Size, Input Methods, etc...)
  • User Abilities (Languages, Writing/Reading Modes, Accessibility Needs, etc...)
  • Browser Capabilities (Browser Versions, Builds, Feature Flags, Finch Hits, etc...)
  • Environment (Network, Battery, etc...)
  • And More...

We're not Alone

We're Collaborating

The Entire Web is a Team Sport

We're Collaborating

ブラウザ

We're Collaborating

ブラウザ ユーザ

We're Collaborating

ブラウザ ユーザ

Dev

ディベロッパー

We're Collaborating with Unknowns?!

Styles are suggestions or hints about behavior, not rules.

1993, WWW-Talk, Robert Raisch’s RFC: STYLESHEETS

Web Design - Client Controls Design

Printed Design - Author Controls Design

Printed Design の制約

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things".

ー John Allsopp | A Dao of Web Design – A List Apart

@media Queries Baseline 2008 ? ¯\_(ツ)_/¯

Responsive Web Design Ingredients...

  • Fluid Grids (%-based)
  • Flexible Images (%-based)
  • Media Queries (external of content)

Container Queries?? Please??

Browsers: No. It is never going to happen.

No Container Queries

Normal Flow Layout Loops

Container sizes Content vs. Content sizes Container

Flexbox & (Sub)Grids

Box Alignment

Viewport Units

Intrinsic Sizing(min-/max-/fit-content)

Aspect Ratios

minmax(), clamp(), etc...

Responsive Design is not about Percentage/Viewport Size anymore.

Era of Intrinsic & Declarative Web Design

1. Truly Two-Dimensional Layouts Grid

2. Combine Fluid & Fixed %, fr, rem, em,... && px

3. Stages of Squishiness Grid, min-width, max-width, clamp() like Utopia

4. Nested Contexts Grid

5. Expand & Contract Content Grid

6. Media Queries, As Needed @media but The ideal viewport doesn’t exist

FYI: Intrinsic Web Design - Beyond Responsive and Embrace the nature of the Web | @sakupi01.com
FYI: Declarative Web Design | @sakupi01.com

1. Truly Two-Dimensional Layouts Grid

2. Combine Fluid & Fixed %, fr, rem, em,... && px

3. Stages of Squishiness Grid, min-width, max-width, clamp() like Utopia

4. Nested Contexts??? Grid

5. Expand & Contract Content??? Grid

6. Media Queries, As Needed @media but The ideal viewport doesn’t exist

FYI: Intrinsic Web Design - Beyond Responsive and Embrace the nature of the Web | @sakupi01.com
FYI: Declarative Web Design | @sakupi01.com

We REALLY need Container Queries!! Please!!🥹
2010 ~ 2020

Proposals

@container

CSS Containment

Size/Layout/Style/Paint を Contain（封じ込め）する

⚠️ Removes All Intrinsic Sizing ⚠️

コンテンツもコンテナをサイズできない && コンテナもコンテンツをサイズできない

1D Containment: contain: inline-size;

Based on Ian Kilpatrick's Proposal...
[css-conditional] [css-contain] Fleshing out @container queries with single-axis containment

Browsers: No. It is never going to happen.

Browsers - Let's Ship It! 🎉

2 Browsers in 2 weeks (Chrome/Edge 106, Safari 16)

Inline Size Containment

.container {
  contain: inline-size layout style;
}

More Declarative:
container-type: inline-size;

.container {
  container-type: inline-size;
}

→ コンテナがコンテンツの inline size に依存することをキャンセル（ブロック方向に Flow 可能）
&& コンテンツがコンテナの inline size をクエリ可能にする

CSS Containment Module Level 3

CSS is a Declarative Language

Tell the meaning of the design.
Not the specific process.
Let the Browser do the smart decision.

width: auto;

どのくらいの px になるかはわからんけど、コンテンツに合わせて幅決めて！

text-wrap: pretty;

なんかいい感じに揃えて！

text wrap

Design to be
Viewable, Accessible & Usable
in Unknown Context.

✨

CSS is in Golden Age!

✨

:not() / :focus-visible / appearance / Flexbox gap / :has() / Logical properties / Forced colors / aspect-ratio / backdrop-filter / :where() / :is() / prefers-contrast media query / text-wrap / overflow: clip / color-scheme / Individual transform properties / text-underline-offset / Container queries / Hyphenation / Nesting / Quotes / Media query range syntax / :nth-child() of <selector> / ::file-selector-button / align-content in block layouts / contain-intrinsic-size / color-mix() / :dir() / linear() easing / dynamic-range media query / Cascade layers / Relative colors / :modal / Gradient interpolation / Oklab and Oklch / @starting-style / text-wrap: balance / white-space-collapse / font-size-adjust / font-synthesis / color() / light-dark() / lh unit / transition-behavior / scripting media query / round(), mod(), and rem() / counter-set / Update frequency media query / Motion path / Lab and LCH / Two-value display property / font-variant-alternates / Hyphenate character / Subgrid / calc() keywords / @counter-style / image-set() / Overflow media queries / HWB / sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS) / :user-valid and :user-invalid / font-synthesis-weight / Inline-size containment / pow(), sqrt(), hypot(), log(), and exp() / font-palette / font-synthesis-style / Vertical form controls / font-synthesis-small-caps / cap unit / rlh unit / ic unit / abs() and sign() / Alt text for generated content / ::backdrop / background-attachment / color-gamut media query / Conic gradients / contain / Layout containment / Paint containment / Size containment / Style containment / fit-content / Grid animation / Page setup / resolution media query / steps() easing / tab-size / text-align-last / text-combine-upright / text-orientation / text-wrap-mode / text-wrap: nowrap / text-wrap: stable / 3D transforms

Baseline CSS features from 2020/09 ~ 2025/09 - Web Platform Status

CSS
Flexbox gap :has() Container queries Subgrid Conic gradients color-mix() Relative colors Cascade layers Nesting Logical properties aspect-ratio @counter-style light-dark() Oklab and Oklch text-wrap Style containment fit-content color-scheme
Design
Grid??? Flexbox??? Moving Boxes by Hand Snapshots of Websites and so on..
CSS
Flexbox gap :has() Container queries Subgrid Conic gradients color-mix() Relative colors Cascade layers Nesting Logical properties aspect-ratio @counter-style light-dark() Oklab and Oklch text-wrap Style containment fit-content color-scheme
The gap is
getting bigger
year by year.
Design
Grid??? Flexbox??? Moving Boxes by Hand Snapshots of Websites and so on..
CSS
Flexbox gap :has() Container queries Subgrid Conic gradients color-mix() Relative colors Cascade layers Nesting Logical properties aspect-ratio @counter-style light-dark() Oklab and Oklch text-wrap Style containment fit-content color-scheme
Design
System
Design
Grid??? Flexbox??? Moving Boxes by Hand Snapshots of Websites and so on..
Declarative
CSS
Flexbox gap :has() Container queries Subgrid Conic gradients color-mix() Relative colors Cascade layers Nesting Logical properties aspect-ratio @counter-style light-dark() Oklab and Oklch text-wrap Style containment fit-content color-scheme
← Translate ←
Semantic
Design
Grid??? Flexbox??? Moving Boxes by Hand Snapshots of Websites and so on..

What we should do is Not Changing.

Even if Container Queries or any new feature came.

Declarative
CSS
Flexbox gap :has() Container queries Subgrid Conic gradients color-mix() Relative colors Cascade layers Nesting Logical properties aspect-ratio @counter-style light-dark() Oklab and Oklch text-wrap Style containment fit-content color-scheme
← Translate ←
Semantic
Design
Grid??? Flexbox??? Moving Boxes by Hand Snapshots of Websites and so on..

We just can be More Declarative

...as Declarative Language Evolves

To be Declarative to the Browser, We need to ...
Express our Design

✨

Web UI is getting more
Declarative and Powerful
than ever!

✨
and there's more comin' ...

Thank you!

Appendix

意味のわからないスタイルがあちらこちらにある状態。 例えば Grid が来る前には二次元的なレイアウトを表現する手段がなかったので、無理やりそれっぽいスタイルを組んでいた

こんなの何のスタイルなのかわからない

ただ、デザインを翻訳する手段が増えるだけだから、Container Queries がきたからといって、私たちがしなければならないこともこれまでと変わらず、例えば、

Last publicly available revision of the world's first web browser. This is a source import from 0.15 for NextStep. Originally written by @timbl.

The line-mode browser, launched in 1992, was the first readily accessible browser for what we now know as the world wide web. It was not, however, the world’s first web browser. The very first web browser was called WorldWideWeb and was created by Tim Berners-Lee in 1990.