3 CSS Concepts to Boost Your Productivity

·

1 min read

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.