A stylesheet that works is not finished. The next design change, the next content, and the next person all have to edit it without breaking what works. The structure that makes that possible is the same structure that makes code reviewable: small named pieces, one place per decision.
About 1 min of reading
Pull spacing out of a component.
Before
Before you run it, say out loud what it will print. Then open the answer.
After
Before you run it, say out loud what it will print. Then open the answer.
Two rules that set the same four properties for different reasons are a bug waiting to drift apart. Merge them into one component class and the drift becomes impossible.
Sections named after what they style, in the order the page reads them. A newcomer can find the rule for a thing in thirty seconds, which is the bar for a stylesheet anyone else will ever edit.
Style a card once and it works in the toolbar, the list, and the search result. A stylesheet written per page has three versions of the same thing, and the next change has to find all three.
Colours, spacing, and type sizes as named values in one block. Every rule reads the names, so a design change is one edit and a search for the old value is unnecessary.
Let the parent place its children and let components bring no outer margin. Then a component can move anywhere without dragging spacing, which is the difference between a layout that composes and one that does not.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.