CSSWG Meeting
Jan 2020, Spain

VH Units

100vhtop barviewport

LosslessLossy

top bar

vhc
content

top bar

top barvh

dynamicof what(subtracany keycontent

dynamic variable of current viewport size
(let any keyboard/controls go overtop me)env(foo)bottom bar

contentcontrols

Things…
• We already tried not having interop.
• Implementers tried making everything magically shrink &grow — it had performance problems.
And Authors don’t always want that.
• Developers currently try to solve this with JS.
• 100vh, 100% body, window.innerHeight don’t match.
Fixed positioning to visual viewport, not layout viewport.
• May want to apply same solution to VW & scrollbars.

Assumptions• We can’t redefine the current VH unit.
• Authors have a legit use for all the possibilities.
• Best solution puts the burden, and choice,on Authors.
• Fixed units for all 3 measurements, animatable.

Proposals• VH unit = equal to 1% of the height of the initial
containing block with user agent chrome minimized.
• VHC unit = equal to 1% of the height of the initial
containing block with user agent chrome maximized.
• env(inset-collapsable-height).
• height: calc(100vh - env(inset-collapsable-height, 0px));

Custom Origins

Project toModernize
the Cascade

CSS Cascade: Importance,Specificity, Overrides & Control• Was designed for simpler times• Today, can easily have hundreds of developers
writing CSS over 10+ years on one project• Completing a project ticket can’t require
refactoring the overall architecture of all styles

Increasingly-Desperate Solutions• Just have A Good Plan™. Be organized.
• OOCSS, BEM, SMACSS.
• Only ever use classes (only one class at a time),
to flatten out specificity,
basically completely removing the cascade from Author styles.
• Overuse !important to win specificity wars.
• CSS-in-JS (where now CSS loads in random order).
• Inline-style everything.

What About [as designed]?
• IDs increase specificity, but can only be used one per page.
• Element selectors work well for simple default styles,
but aren’t reusable enough for design/code systems.
Too dependent on DOM structure.
• Which leaves classes and attribute selectors.
• And !important.
• Authors are completely flattening the cascade to avoid
specificity, instead of using it.

Trying to keep
everything
minimum-specificity
and inline.
Separate every style
from each other.

Cries for Help / Future Hopes• Scoped Styles• Web Components• Encapsulation & Isolation

Instead of letting communityof Authors destroy thecascade, can the CSSWG
modernize it?

Extend Selectors

Custom Origins

Mostimportant!important UA Styles!important User Styles!important Author Styles
Author Styles
User Styles

Least
importantUA Styles

Mostimportant!important UA Styles!important User Styles!important Author — Custom Origin 1!important Author — Custom Origin 2!important Author — Custom Origin 3
Author Styles — Custom Origin 3
Author Styles — Custom Origin 2
Author Styles — Custom Origin 1

Least
importantUser Styles
UA Styles

mportantmportant

mportant

mportant

Components

rigin 4

Layouts

Site styles

Site Styles

rigin 3

Overrides

Patterns

Base Theme

Ad network

rigin 2

Design System

Defaults

CMS Extend New Styles

3rd-party libs

rigin 1

Reset

Reset

CMS Core

Bootstrap

UserUA

Old Styles

Advantages / Usecases• Could be used to help the specificity wars between
frameworks and Author styles.
• Could reinvigorate the intended use of importance, not as
a new specificity, but as a balance of power.
• People could use a Origin with more importance instead ofusing `!important` whenever they need a style to override
something that has more specificity. Which leaves !
important for Authors to use for a different use. (But also,this might perhaps be just as annoying as !important.)usecases

Next Steps• Is this something to pursue?
Anyone going to object?
• Miriam Suzanne• Bigger meta project to “modernize the Cascade”— to explore a range of ideas.

Masonry Layout

masonry.desandro.com

147510

23968

12356794810

1236758
horizontalOrder: true

4910