Feasgar Math
Good evening
'S e Cory an t-ainm a th' orm
My name is Cory
'S e innleadair bahar-bog a th' annam aig Aumni
I am a software engineer at Aumni
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" />
Elise Hein
<Columns style={ { height: "100vh" } }>
<Column as="nav">Navigation</Column>
<Column as="main">Main content</Column>
</Columns>The inevitable end of layout components is this API...
<div style="/* Whatever* CSS you want */">
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;
.component {
}
& > .component-part {
}
height: clamp(6rem, 10vh, 10rem);
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
The Miseducation of CSS
By Cory Brown
