CSS Ecosystem Meets Standards, now?

Frontend Conference Tokyo 2025

saku🌸 / @sakupi01

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 使ってた人？！

❌ Nesting/Wrapping

❌ Responsive Features

❌ Variables

❌ Complex Selectors

❌ Build Steps

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: 26.45%; /* 誰?どこからきた??? */
  margin-right: 3.456%; /* 誰?これもどこから来た??? */
}

For Semantic & Reusable Styles...

• Preprocessors
  • Sass/LESS/Stylus 2006~

For Semantic & Reusable Styles...

• Preprocessors
  • Sass/LESS/Stylus 2006~
• Naming Conventions
  • CSS Systems 2008 / @Natalie Downe
  • OOCSS 2009 / @Nicole Sullivan
  • BEM 2009 / @Yandex
  • SMACSS 2011 / @Jonathan Snook
  • ITCSS 2014 / @Harry Roberts

For Semantic & Reusable Styles...

• Preprocessors
  • Sass/LESS/Stylus 2006~
• Naming Conventions
  • CSS Systems 2008 / @Natalie Downe
  • OOCSS 2009 / @Nicole Sullivan
  • BEM 2009 / @Yandex
  • SMACSS 2011 / @Jonathan Snook
  • ITCSS 2014 / @Harry Roberts
• Design Systems / Atomic Design 2013 / @Brad Frost
• Design Tokens 2016 / @Jina Anne

For Semantic & Reusable Styles...

• Preprocessors
  • Sass/LESS/Stylus 2006~
• Naming Conventions
  • CSS Systems 2008 / @Natalie Downe
  • OOCSS 2009 / @Nicole Sullivan
  • BEM 2009 / @Yandex
  • SMACSS 2011 / @Jonathan Snook
  • ITCSS 2014 / @Harry Roberts
• 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

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

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!!

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.

Normal Flow Layout Loops

Container sizes Content vs. Content sizes Container

• Selectors that Depend on Layout

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

• 3.1.1. Possible Size-Containment Optimizations CSS Containment Module Level 1
• [selectors-5] Proposal for pseudo-selector :overflowed-content · Issue #2011 · w3c/csswg-drafts
• Re: [selectors4][css-round-display] Suggest a new type of pseudo class to support scrolling in rounded viewports from Florian Rivoal on 2016-01-28 (www-style@w3.org from January 2016)
• [selectors4][css-round-display] Suggest a new type of pseudo class to support scrolling in rounded viewports from Jihye Hong on 2016-01-27 (www-style@w3.org from January 2016)
• [css-selectors] :stuck pseudo-class feature suggestion · Issue #1656 · w3c/csswg-drafts
• [css-conditional] Applying styles based on an elements size (@media for elements, container queries) · Issue #3852 · w3c/csswg-drafts
• WICG/container-queries

Proposals

• David Baron: @container
  • uses containment
• Brian Kardell: switch()
  • uses paint

@container

• Miriam Suzanne: @container
  • uses containment

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;

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

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

What we should do is Not Changing.

Even if Container Queries or any new feature came.

We just can be More Declarative

...as Declarative Language Evolves

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

Appendix

• Embracing the tension between code and design | Figma Blog

• https://www.figma.com/ja-jp/blog/introducing-code-connect/

• cynthia/WorldWideWeb

• cern-hackdays/lmb

• 30 years on, what’s next #ForTheWeb? - World Wide Web Foundation