Solve issues by removing things instead of adding

This is at least true for writing CSS but may also be applicable to other fields. I'll use CSS in this example, my turf.
I've seen setups where style on style is being stacked just to get the layout in the right order. Once you're in the "let's try z-index: -1" zone you're definitly there but there are dozens of other indicators. Public theme-based (wordpress etc..) websites tend to have setups that force you to stack layer on layer until you get what you want.

This unhealthy stacking might also have something to do with lack of experience. You won't try to hammer the layout together by just adding things untill it looks allright if you've built the confidence that something is solvable with a single style somewhere. So the tl;dr solution is: Dig in.

Signals for unhealthy stacking

Three places vulnarable for unhealthy stacking are:

1. Element stacks
2. Class stacks
3. And the most dangerous: Style stacks

Element stacks

Elements being added just to get things done. If, as rule-of-thumb you watch out for adding "wrapper" and "inner" divs and you should be fine. Keep html as semantic and lean as possible. This is lightweight, much more flexible and most important: readable.

Class stacks

Classes being added just to add a style. When working on an existing project there's usually already a base class on the element you're working on. A base class is used to style this single type of element. When you add classes, it's usually just a modifier. But after the first modifier is added more are added for almost every change. No "we don't work like that" you might say, but it's just the way it is..

Style stacks

Now this is what triggered me to write this article. I was helping someone out to get a layout going, and all I had to do was remove a dozen of styles that were conflicting or overwriting each other, then add one or two styles and the issue was solved.

Show me one website on the web where there are no style stacks at all.. Check the inspector and count the obvious style overwrites, but also redundant styles for positioning.

.redundant-positioning {
    position: absolute;
    top: 3em;
    margin-top: .5em;
    transform: translateX(10%);
}

Position elements with the least possible styles. Using multiple positioning styles is usually an indicator that you're trying to fit something in with some unhealthy stacking. Same goes for using extra divs just to position something right. When they're needed they're needed, but they're usually not.

Now there's a dangerous thing here and that is that a pile of CSS doesn't look like a problem if you don't open up the inspector and know what you're doing. The site looks allright right? Problems only occur later on. A perfect analogy is the mess that you get when you just keep on pluging things in your home-cinema setup and just hide all wires. Everything works right? Now try to move one piece of equipment. That's what technical debt is.

Rule of thumb

The solution for every CSS problem is ofcourse throwing everything away and starting over from scratch to do everything right. But since we live in a real world with deadlines and stuff this is usually not the preferred solution. And you might even learn something by applying this rule of thumb: Solve issues by removing things instead of adding. Unless you're starting from scratch, first try to leave things out that might be in the way. Break it down until the element behaves like plain HTML markup, then think of one solution and add only styles that are building that solution in a clean way. And to able to do so: Get to know every little bit of CSS there is to know ;-)

...

Don't keep adding styles untill it looks allright. Think of a solution, break the styling down to the point where you can build the solution in a clean way. Then Build it. And enjoy that lean & mean result