Fàilte mo charaidean
Welcome my friends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
Feasgar Math
Good afternoon
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
Is mise Cory
My name is Cory
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
agus tha mi ag ionsachadh Gàidhlig
and I am learning Scottish Gaelic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
agus a-nis, tha thu cuideachd!
and now, you are too!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
'S e innleadair bahar-bog luchd-obrach aig Aumni a th' annam.
I am a staff software engineer at Aumni (a JP Morgan company)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
agus fàilte gu...
And welcome to...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
The
Miseducation
of CSS
by cory brown
Who's this guy?
- No one of consequence
- Started by writting HTML emails (😰)
- Software engineering (mostly front end) for 15 years
- Isagenix
- NatGeo
- Church of Jesus Christ of Latter-Day Saints
- LeisureLink
- Jane
- Nav
- Aumni (a JP Morgan company)
CSS
am i right?!
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7726895/transcendence.png)
?
!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7726909/correction__1_.png)
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>
style="display: none;"
Behavior
Style
Structure
JavaScript
CSS
HTML
HTML
CSS
visual
Structure
HTML
semantic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727100/Screen_Shot_2020-09-14_at_9.10.59_PM.png)
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" />
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727121/MJ_MS.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727122/MJ_RF.png)
Layout components lead to anger...
The inevitable end of layout components is this API...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10392595/Screenshot_2023-04-15_at_4.23.03_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10392597/Screenshot_2023-04-15_at_4.23.55_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10392598/Screenshot_2023-04-15_at_4.24.45_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10392599/Screenshot_2023-04-15_at_4.25.36_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10392605/Screenshot_2023-04-15_at_4.26.09_PM.png)
<div style="/* Whatever* CSS you want */">
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10160776/gmail-div-soup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10410278/screenshot_2023-04-17_at_5.51.46_pm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10410282/EliseHein.jpeg)
Elise Hein
<Columns style={ { height: "100vh" } }>
<Column as="nav">Navigation</Column>
<Column as="main">Main content</Column>
</Columns>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10775854/sebastian-weber.webp)
Sebastian Weber
article > * + * {
margin: 1em 0;
}
It also reinforces patterns that separate concerns because the actual UI components are layout-agnostic and don’t have to care where they are used. This is the job of the container element
Components style themselves, and position their immediate children.
-Me
Position is ALWAYS* contextual
?
const Button = () => (
<button>
The only content you could possibly need.
</button>
);
const Button = ({ children }) => (
<button>
{children}
</button>
);
const Button = style(({ children, className }) => (
<button className={className}>
{children}
</button>
))`
border: none;
border-radius: 4px;
background-color: rebeccapurple;
color: lavender;
padding: 1em;
margin: 2rem;
`;
const Menu = styled(({ className }) => (
<menu className={className}>
<Button>Pick Me!</Button>
<Button>No, Pick Me!</Button>
</menu>
))`
background: #eee;
`
const Button = style(({ children, className }) => (
))`
margin: 2rem;
`;
const Button = style(({ children, className }) => (
<button className={className}>
{children}
</button>
))`
border: none;
border-radius: 4px;
background-color: rebeccapurple;
color: lavender;
padding: 1em;
`;
const Menu = styled(({ className }) => (
<menu className={className}>
<Button>Pick Me!</Button>
<Button>No, Pick Me!</Button>
</menu>
))`
background: #eee;
display: flex;
& > ${Button}:last-child {
margin-left: auto;
}
`;
const Menu = styled(({ className }) => (
))`
& > ${Button}:last-child {
margin-left: auto;
}
`;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10791218/d652023104aea376_1899-w500-h640-b0-p0---803126158.jpg)
Style
Position
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727128/css-box-model-2-638.jpg)
From "CSS Box Model" by Nicha Jutasirivongse
Pop Quiz
Property
Style/Position
color
style
padding
style
margin
position
border
style
display
it depends
flex
position
z-index
position
width/height
position
.component {
}
display: grid;
gap: 1em;
.component {
}
& > .component-part {
}
margin: auto;
& >
.component {
}
& > .component-part {
}
height: clamp(6rem, 10vh, 10rem);
const Modal = styled(({ className, children}) => {
const handleClose = () => { ... }
return (
<section className={className}>
<Button onClick={handleClose}>X</Button>
{children}
</section>
)
})`
position: fixed;
& > ${Button}:first-child {
position: absolute;
top: 0;
right: 0;
}
`;
const Modal = styled(({ className, children}) => {
const handleClose = () => { ... }
return (
<section className={className}>
<button onClick={handleClose}>X</button>
{children}
</section>
)
})`
position: fixed;
& > ${Button}:first-child {
position: absolute;
top: 0;
right: 0;
}
`;
const Modal = styled(({ className, children}) => {
const handleClose = () => { ... }
return (
<section className={className}>
<button onClick={handleClose}>X</button>
{children}
</section>
)
})`
position: fixed;
& > ${CloseButton} {
position: absolute;
top: 0;
right: 0;
}
`;
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
Questions?
Bonus Content
Components style themselves, and
position their immediate children.-Me
Components style themselves, and
apply context to their immediate children.-Me
Position is ALWAYS contextual
?
Style is OCCASIONALLY contextual
Never define positional properties on a component directly
Allow for style rules to be overridden
const Button = styled(({ children, ...props }) => (
<button {...props}>{children}</button>
)`
color: blue;
`;
const Nav = styled(({ className, children}) => (
<nav className={className}>
<Button onClick={handleLogin}>Log in</Button>
</nav>
)
})`
background: black;
& > ${Button} {
color: white;
}
`;
Tapadh leibh!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/7727169/Flag_of_Scotland.svg.png)
Thank you!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/191608/images/10791706/All_the_things__2_.png)
Me online
Links
The Miseducation of CSS
By Cory Brown
The Miseducation of CSS
- 849