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
From "CSS Box Model" by Nicha Jutasirivongse
Pop Quiz
Rule
Style/Position
color
style
padding
style
margin
position
border
style
display
it depends
flex
position
grid
position
width/height
position
.component {
}
display: grid;
gap: 1em;
.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!