Tech lead & Coach @Theodo

Meetup organizer @HumanTalksParis

@alberictrancart

Albéric Trancart

Part I

A little horror story

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
  border-radius: 20px;
  vertical-align: middle;
}

<body>
  <div class="title">
    Why<br />
    <strong>C</strong>SS<br />
    <strong>S</strong>ometimes<br />
    <strong>S</strong>ucks<br />
  </div>
</body>

<body>
  <div class="title">
    Why<br />
    CSS<br />
    Sometimes<br />
    Sucks<br />
  </div>
</body>

<body>
</body>

<body>
  <div>
    Why<br />
    CSS<br />
    Sometimes<br />
    Sucks<br />
  </div>
</body>

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
  border-radius: 20px;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
  border-top-left-radius: 20px;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
}

.title {
  font-size: 30px;
  font-family: sans-serif;
}

.title {
  font-size: 30px;
}

Let's ask for some help

Nice, an answer to my issue!

.container {
  position: relative;
  height: 100vh;
}
.title {
  font-size: 30px;
  font-family: sans-serif;
  color: #366CC3;
  border: 3px solid #366CC3;
  padding: 15px;
  width: 200px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<body>
  <div class="container">
    <div class="title">
      Why<br />
      <strong>C</strong>SS<br />
      <strong>S</strong>ometimes<br />
      <strong>S</strong>ucks<br />
    </div>
  </div>
</body>

CSS is black magic

But magic doesn't exist!

CSS can be frustrating

It's not a fatality!

Why is CSS frustrating?

Is it because it's not intuitive?

Some properties cascade and others do not

Example: color cascade but padding doesn't

CSS

JS

Array indexing

Example : someArray[0] to access the 1st element

Properties interact between each other

Example: position et z-index

Default behaviors are not intuitive

Example: <img> is display: inline

Type coercion

"3" - 1  // -> 2
"3" + 1  // -> "31"

Default behaviors are not intuitive

try { return 2; }
finally { return 3; }
// -> returns 3

Why is CSS frustrating?

Unsupported properties

Example: grid or position: sticky with IE11

CSS

JS

Many standards/environments at the same time

Example: CJS vs ESM, npm vs yarn vs pnpm

An infinity of screen sizes to support

It's impossible to test on every device combination

Code must be transpiled

Example: configuring Babel/Typescript is not a trivial task

Is it because we have to support countless devices?

Part II

The real issue with CSS

Is CSS a programming language?

Twitter says no... But is CSS a language?

Is CSS a language?

But what is a language?

A language is a structured form of communication.

The structure of a language is its grammar and the free components are its vocabulary.

Using a language is conveying an intent

through vocabulary structured by a grammar

Intent

Do we know what we want to convey?

You

Normal language

Recipient

Sequence of words with a correct syntax

Computer

Product Owner

Normal language

Computer

Code

You

User Story

Loss of intent

Interpretation

Intent

Do we know what we want to convey?

Designer

Computer

Code

You

Mock up

Product Owner

User Story

CSS

What should be the sidebar width?

Absolute? 200px? 15rem? 10cm?

What is the intent?

Relative? Percentage of the container? Percentage of the viewport?

Should it maintain its aspect ratio?

Intent

Do we know what we want to convey?

?

Relative

Absolute

Vocabulary

Do we know the meaning of the words to use?

Trap #1: some words differ in meaning from the English language (false friends)

Trap #2: some words have multiple meanings (polysemy)

Example: vertical-align do not align vertically a block in its parent box

Example: vertical-align can align an inline box inside its line or align some content in a table cell

Grammar

Do we know how to form correct sentences?

Those CSS rules?

I [learn] them yesterday!

Subject, verb and object
Nouns and Pronouns
Subject-verb agreement
Verb tenses
Verb aspects (simple/perfect/etc.)
Auxiliary verbs
Irregular verbs
US vs British English

Flow layout
Box model
Block container box
Block/inline-level box
Anonymous box
Block formatting context
Inline formatting context
Outer/inner display type

span { border: 1px solid black; }
.child { display: inline-block; }

<span>Will you be able to</span>
<span class="child">predict <div>how</div></span>
<span>this code will look like?</span>

Meh, what the hell?!

And no one

told us so!

Flow layout
Box model
Block container box
Block/inline-level box
Anonymous box
Block formatting context
Inline formatting context
Outer/inner display type

CSS has a grammar...

Grammar

Do we know how to form correct sentences?

Part III

Making peace with CSS

Using mental models

All models are wrong, some are useful

Using a language is conveying an intent

through vocabulary structured by a grammar

Is the intent clear enough?

The code must convey the intent

Use variables!
Use calc()
Stylelint rule declaration-strict-value

// Theme file
$border-color: #444;
$sm-breakpoint: 768px;
$modal-z-index: 7;

// Component file
$select-option-height: 2rem;
.select-dropdown {
  $border-width: 1px;
  border: $border-width solid $border-color;
  max-height: calc(2 * $border-width + 8 * $select-option-height);
}

@media (min-width: $sm-breakpoint) {
  z-index: $modal-z-index;
}

.select-dropdown {
  border: 1px solid #444;
  max-height: 34px;
}

@media (min-width: 768px) {
  z-index: 7;
}

Is the vocabulary well known?

Investigate each property that looks suspicious

vertical-align on MDN

Every property that doesn't work as you would expect warrants a deep dive on MDN

Is the grammar clear enough?

A good mental model is better than a list of edge cases

Source W3Schools

Source HTTPArchive, July 2019

Is the grammar clear enough?

z-index shenanigans...

.menu-options {
  background-color: red;
  position: absolute;
  z-index: 10;
  left: 30px;
}
.content {
  position: relative;
}
.tooltip {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 50px;
  background-color: black;
  color: white;
}

<div class="menu disabled">
  Dropdown
  <div class="menu-options">Dropdown options</div>
</div>
<div class="content">
  Content text
  <div class="tooltip">Tooltip</div>
</div>

<div class="menu">
  Dropdown
  <div class="menu-options">Dropdown options</div>
</div>
<div class="content">
  Content text
</div>

<div class="menu">
  Dropdown
  <div class="menu-options">Dropdown options</div>
</div>
<div class="content">
  Content text
  <div class="tooltip">Tooltip</div>
</div>

.menu-options {
  background-color: red;
  position: absolute;
  z-index: 10;
  left: 30px;
}

.menu-options {
  background-color: red;
  position: absolute;
  z-index: 10;
  left: 30px;
}
.content {
  position: relative;
}
.tooltip {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 50px;
  background-color: black;
  color: white;
}
.menu.disabled {
  opacity: 0.8;
}

Why is the z-index 10 element
behind everything???

Is the grammar clear enough?

Stacking contexts

A stacking context is an isolated container which places its child elements on a z-axis facing the user

Is the grammar clear enough?

Stacking contexts

Inside a stacking context, elements will be stacked in this order (back to front):

Non positioned elements, in the order they appear in the DOM
Positioned elements, in the order they appear in the DOM
Positioned elements of flex items that have a z-index, in the z-index order

A stacking context is created by:

The <html> element
An element with position: absolute or position: relative and a z-index
An element with position: fixed or position: sticky
A child of a flex or grid container with a z-index
An element with an opacity different from 1
An element with on of those properties: transform, filter, clip-path...

Is the grammar clear enough?

z-index shenanigans...

<div class="menu">
  Dropdown
  <div class="menu-options">Dropdown options</div>
</div>
<div class="content">
  Content text
  <div class="tooltip">Tooltip</div>
</div>

.menu-options {
  background-color: red;
  position: absolute;
  left: 30px;
  z-index: 20;
}
.content {
  position: relative;
}
.tooltip {
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 50px;
  background-color: black;
  color: white;
  z-index: 1;
}
.menu.disabled {
  opacity: 0.9;
}