You Write Backend Code and Someone Has Asked You to Fix the CSS

The ticket looks small. A button is sitting a few pixels too low, and the frontend developer is on holiday. You open the stylesheet, change a number, refresh, and something else moves instead. An hour later you have added three rules, one of them with !important on the end, and the button is still wrong.

Most backend developers have a version of this story. CSS feels unpredictable when you treat it as a list of settings. It becomes far more sensible once you learn the few ideas underneath it.

Start with the box model. Every element is a box made of content, then padding, then a border, then margin outside that. By default, the width you set applies only to the content, so padding and border are added on top. Many projects set box-sizing to border-box so that the width includes them. Check which one your project uses before you do any arithmetic.

Learn the cascade, because it explains most of the surprises. When two rules disagree, the browser decides using importance, then specificity, then which rule came last. An ID selector beats a class, and a class beats an element name. When your change does nothing, another rule is usually winning.

Learn the difference between the main layout tools. Normal flow stacks block elements down the page. Flexbox arranges items along one direction, a row or a column. Grid handles rows and columns together. A lot of pain comes from using margins to push things into place when the parent is really a flex or grid container that wants to be told how to align its children.

Then live in the browser's developer tools. Select the element and look at the styles panel. It shows every rule that applies, crosses out the ones being overridden, and tells you which file each came from. The computed view shows the final values and a diagram of the box. Most CSS bugs become obvious within a minute of looking there.

When you finish, write down what was actually wrong. Next time a layout misbehaves, you will have one real example in your own words, and that is how this stops feeling like guesswork.

– Asael Shinder