Even frontend developers avoid CSS like the plague.
There's no feedback when you make mistakes which can be frustrating. But, it doesn't have to be that way. It turns out that CSS is consistent and predictable.
Learning these 3 things can help you write more effective CSS:
The Box Model
Everything in CSS has a box around it.
Going from the inside out, there's:
- Content
- Padding
- Border
- Margin Targeting the correct property is essential when sizing elements.
Flexbox
Getting layouts right is critical.
Flexbox can help you:
- Create a horizontal or vertical container
- Position child items predictably
- Control the size of those child items
- Recreate many layouts by nesting flexbox containers in different directions
Stacking Contexts
z-index problems are the worst. Pick a bigger number and hope it works!
But what about the next time you have a z-index problem? Increase the number again? Here's how stacking contexts can help:
Child elements within a stacking context are bound by that context
Two stacking contexts will be layered relative to each other
Use the isolation: isolate css property to create a stacking context anywhere
Mastering the 3 tools above is a quick way to start writing better CSS.
Top comments (0)