My Best Practices – CSS
1. Preface
These days, CSS is underutilized. There’s a gap between Angular/React/Vue/... developers and UI designers.
The UI designer nests thirty <div>s and slaps forty CSS classes on them, while the Angular dev gets a kick out of the latest lib every two weeks – even though his dependency
hell stopped building without npm i --force ages ago, because the peer dependencies are in conflict. The TypeScript fanatic couldn’t care less about CSS and HTML. For the simplest inputs
he has to use Material, because he’s afraid he won’t get the validation right otherwise. And he certainly doesn’t want to waste time reinventing the wheel. What he doesn’t realize: the first
requirement the library doesn’t cover costs him all that time again, and he ends up reading through the lib’s GitHub issues.
As a developer on a full-stack project, you rarely get the chance to show off your skills as a frontend designer. You get the screen mocks in Figma and have to build them exactly like that. Most frontend developers of this kind aren’t even aware that a single line of CSS is enough for a responsive layout. CSS is more powerful than ever. Gone are the days of JS style hacks, countless media queries and IE 8 workarounds. Hurray!
2. Super Centered
It didn’t always go down well in interviews, but I loved it: when asked whether I was good at frontend, I liked to answer “Oh yes. I can center a <div> vertically.”
It is notoriously difficult to center a div.
Not anymore:
.parent {
display: grid;
place-items: center
}3. Responsive Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsive Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. Page Layout
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Sidebar
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}