DEV Community

Rohit More
Rohit More

Posted on

CSS Concepts to Boost Your Productivity

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)