# Why Learning CSS Helps You Build Better Apps

%%[kempo] 

Most front-end developers don't like CSS.

Why?

Because working with CSS is frustrating. It's hard to troubleshoot mistakes because the feedback usually isn't helpful. There are no error messages. Nothing to nudge you in the right direction.

Most CSS problems are solved by trial and error:

1. Make a change
    
2. Save your code
    
3. Ask yourself, "does this feel right?"
    
4. If not, then rinse and repeat.
    

To be fair, this isn't inherently bad. You can solve a lot of smaller issues this way. That said, once you start running into bigger problems this isn't the best approach you could take. The process and output of that process can be error-prone.

Usually, you end up treating the symptoms instead of the root cause. Bandage after bandage until you're left with a mess of CSS properties that no one wants to maintain.

## **Most CSS development is inefficient**

When you don't understand CSS, you have to solve all of your problems through trial and error.

This happens all the time.

A good example of this is the classic `z-index` problem. You're guaranteed to run into this at some point. For those who don't know, the `z-index` problem happens when two HTML elements overlap in the wrong order.

In the example below, I want `B` to be above `A`.

<iframe width="100%" height="350px" src="https://www.kempo.io/view/eyJuYW1lIjoiQ1NTLVotSW5kZXgiLCJjb3JlIjp7ImZpbGVzIjp7Ii9zdHlsZXMuY3NzIjp7ImNvZGUiOiJib2R5IHtcbiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otZm9udC1zbW9vdGhpbmc6IGF1dG87XG4gIC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG4gIGZvbnQtc21vb3RoaW5nOiBhdXRvO1xuICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICBmb250LXNtb290aDogYWx3YXlzO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAtd2Via2l0LXRvdWNoLWNhbGxvdXQ6IG5vbmU7XG59XG5cbmgxIHtcbiAgZm9udC1zaXplOiAxLjVyZW07XG59In0sIi9pbmRleC5qcyI6eyJjb2RlIjoiaW1wb3J0IFwiLi9zdHlsZXMuY3NzXCI7XG5cbmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiYXBwXCIpLmlubmVySFRNTCA9IGBcbjxoMT5IZWxsbyB3b3JsZDwvaDE+XG5gO1xuIn0sIi9pbmRleC5odG1sIjp7ImNvZGUiOiI8IURPQ1RZUEUgaHRtbD5cbjxodG1sPlxuXG48aGVhZD5cbiAgPHRpdGxlPktlbXBvPC90aXRsZT5cbiAgPG1ldGEgY2hhcnNldD1cIlVURi04XCIgLz5cbiAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCJzcmMvc3R5bGVzLmNzc1wiPlxuPC9oZWFkPlxuXG48Ym9keT5cbiAgPGRpdiBpZD1cIndyYXBwZXJcIj5cbiAgICA8ZGl2IGlkPVwib25lXCI+QTwvZGl2PlxuICAgIDxkaXYgaWQ9XCJ0d29cIj5CPC9kaXY+XG4gIDwvZGl2PlxuPC9ib2R5PlxuXG48L2h0bWw+In0sIi9wYWNrYWdlLmpzb24iOnsiY29kZSI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge30sXG4gIFwibWFpblwiOiBcIlwiLFxuICBcImRldkRlcGVuZGVuY2llc1wiOiB7fVxufSJ9LCIvc3JjL2luZGV4LmpzIjp7ImNvZGUiOiIifSwiL3NyYy9zdHlsZXMuY3NzIjp7ImNvZGUiOiJoMSxcbnAge1xuICBmb250LWZhbWlseTogTGF0bztcbn1cblxuaHRtbCxcbmJvZHkge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbmJvZHkge1xuICBtYXJnaW46IDA7XG59XG5cbiN3cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG4jd3JhcHBlciBkaXYge1xuICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICB3aWR0aDogMTAwcHg7XG4gIGhlaWdodDogMTAwcHg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgY29sb3I6IHdoaXRlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuI29uZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgei1pbmRleDogMjtcbn1cblxuI3R3byB7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKDYwcHgsIDYwcHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuIn19LCJ0ZW1wbGF0ZSI6InZhbmlsbGEifSwiZGlzcGxheSI6eyJjb21wb25lbnRzIjp7IlByZXZpZXciOnsidHlwZSI6InByZXZpZXciLCJkYXRhIjp7InNob3dOYXZpZ2F0b3IiOmZhbHNlLCJzaG93T3BlbkluQ29kZVNhbmRib3giOmZhbHNlLCJzaG93UmVmcmVzaEJ1dHRvbiI6ZmFsc2UsInNob3dTYW5kcGFja0Vycm9yT3ZlcmxheSI6ZmFsc2V9fX0sImdlbmVyYWwiOnt9LCJsYXlvdXRzIjp7InNtYWxsIjoiJ1ByZXZpZXcnIn19fQ=="></iframe>

The easiest thing to do would be to increase the `z-index` for `B` until it works. In this case, that'd be fine, but that won't always work. There are all sorts of things that could affect the behavior:

* The element ordering in the DOM (this might be important if you need to worry about keyboard accessibility for the overlayed items)
    
* If there's another element on the page that has to have a greater `z-index` (this is common for modals, app bars, sidebars, etc.)
    

In other words, you might not be fixing the underlying problem.

So what do you do the next time you have a `z-index` problem? I guess you can try to increase the `z-index` again, but things start to fall into a never-ending cycle.

## **Weak CSS skills lead to bad HTML structures**

A bigger problem is when developers rely on HTML structure to solve CSS problems.

This leads to complex HTML. For example, if you’re using a component library it might seem like a good idea to reach for a built-in layout system. Sounds good in theory, but the problem is that you're forced to wrap your **own** components with library components for basic layouts.

This leads to the following:

* More HTML elements in the DOM
    
* More noise in your **own** code
    
* Unnecessary indirection
    

In most cases, a few lines of CSS can accomplish the same thing.

## **CSS should be viewed as a unified system**

Most CSS is written as a mixed bag of one-off properties.

A little padding here.

A little margin there.

This approach is hard to maintain. When there's no relationship between your styles, making updates and solving problems is more difficult. Most elements on a page should be styled in relation to one another. Instead of treating CSS as a mixed bag, it's better to view it as a unified system.

The behavior of CSS properties can change based on which layout algorithm you're using. Understanding these differences leads to a more cohesive and maintainable solution.

## **Understanding CSS layouts pays dividends**

Learning everything about CSS can be a huge undertaking. Honestly, you probably don't need to (and likely won't ever) learn every single part of the CSS ecosystem. Instead of worrying about learning everything, it's better to learn things incrementally.

A good place to start is with CSS layouts. In my experience, learning how layouts work is one of the quickest ways to highlight the power of CSS and immediately add value to your applications.

Knowing when to use a layout algorithm leads to better solutions that require less code. Building a foundation around layouts ensures that the HTML in your application is cleaner and that it's easier to understand and modify because elements aren't deeply nested.

Better CSS mental models can change CSS development from being frustrating to fun.