Feasgar Math

Good evening

'S e Cory an t-ainm a th' orm

My name is Cory

tha mi nam innleadair airson an frontend

I am a frontend engineer

agus fàilte gu...

and and welcome to...

The
Miseducation

of CSS

by cory brown

OOCSS
BEM
SMACSS

SUITCSS
AtomicCSS
Bootstrap
Tailwind

CSS is likely not what you think it is.

Behavior

Style

Structure

JavaScript

CSS

HTML

<web-components />

<React />

<vue-components />

<ng-components />

.object

.object-extended

.block

.block__element

.block--modifier

styled-components

jss

emotion

glamor

aphrodite

Sass

CSS Variables

classnames

?

!

Behavior

Style

Structure

JavaScript

CSS

HTML

<figure style="display: none;">
  <img src="https://fillmurray.com/400/600" alt="A beautiful Bill Murray placeholder image" />
  <figcaption>
    A beautiful Bill Murray placeholder image
  </figcaption>
</figure>

Behavior

Style

Structure

JavaScript

CSS

HTML

HTML

CSS

visual

While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out.

!

<Grid />

<Flex />

<Pull direction="left" />

Layout components lead to anger, anger leads to hate, hate leads to suffering.

-Yoda

Components style themselves, and position their immediate children.

-Me

Style

Position

Pop Quiz

Rule

Style/Position

color

style 

padding

style 

margin

position

border

style 

display

it depends

flex

position

grid

position

width/height

position 

.component {

 

 

 

 

 

}

& > .component-part {

 

}

margin: auto;

Components style themselves, and position their immediate children.

-Me

Anything that affects only the border-box inward, is style. 

Everything else is position.

-Also Me

Layout components solve the wrong problem.

-Still Me

Tapadh leibh!

Thank you!

Links