Fàilte mo charaidean
Welcome my friends
Feasgar Math
Good afternoon
Is mise Cory
My name is Cory
agus tha mi ag ionsachadh Gàidhlig
and I am learning Scottish Gaelic
agus a-nis, tha thu cuideachd!
and now, you are too!
'S e innleadair bahar-bog luchd-obrach aig Aumni a th' annam.
I am a staff software engineer at Aumni (a JP Morgan company)
agus fàilte gu...
And welcome to...
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
?
!
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
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...
The inevitable end of layout components is this API...
<div style="/* Whatever* CSS you want */">
Elise Hein
<Columns style={ { height: "100vh" } }>
<Column as="nav">Navigation</Column>
<Column as="main">Main content</Column>
</Columns>
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;
}
`;
Style
Position
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!
Thank you!
Me online
Links
The Miseducation of CSS
By Cory Brown
