Why is CSS so frustrating? - CSS Tutorial

- [Instructor] For as long as CSS has been around, developers have struggled with it, myself included, from browser support for specific features, to cross-browser compatibility issues, to surprising or unexpected results, CSS seems like an unwieldy beast, confusing at best, or broken at worst. Even though it's frustrating at times, it's actually not broken. It's simply a different way to approach programming than what you may be used to. In most programming, you tell the computer what to do and the computer follows those instructions for better or for worse. But with CSS, you're not telling the browser what to do. Instead, you're telling the browser, here are some properties I want you to apply to this element. And then the browser takes those properties and applies them to that element along with whatever other properties are already being applied. This means that at many times, what you tell a browser to do and intend for it to do is happening in addition to other things. For instance, maybe you're adding new properties to an element that may already have properties applied. That can produce unexpected results. And then there's how CSS is applied to elements. In CSS, we use selectors to target elements and the browser decides what CSS rules to apply to any one element based on the specificity of these selectors and where the CSS rule appears in the cascade. Now, the cascade is how the browser reads CSS. It reads from top to bottom and the further down in the CSS document a rule is placed, the more weight it has. So if you define a rule with a selector high up in a CSS document and then create a new rule with the same selector further down in that document, the one farther down has more weight and is applied so long as that higher rule doesn't have greater specificity. Does this sound confusing? Don't worry. This will all be covered in detail in this course. So back to the original point of this lesson, until you understand how CSS is applied to elements, how the browser picks what rules to apply, based on specificity and the cascade, and how CSS properties work and interact, it can feel like you write something in CSS and then the browser does something else and it's not clear why that's happening, which is very frustrating. In most cases, when people say that CSS is broken or it's confusing or frustrating, it's because they don't understand how CSS works, or it's because they approach CSS as if it's an imperative scripting language and expect it to behave like one, which it's not. CSS is a declarative styling language used to apply optional style properties to elements in HTML documents. That's it. The browser takes these instructions, combines them with all other available styling information and does its best to paint what you told it to. Another critical point, unlike imperative coding languages and even some declarative languages, CSS is incredibly fault-tolerant. You can make 10 or a hundred or a thousand rules that contradict each other in CSS and the browser will use specificity in the cascade to apply them in a structured way. You can use properties that browser doesn't even understand and it'll just ignore them. Finally, CSS is flexible and contextual. And in the end, it's really just a bunch of properties applied to elements in the browser window. So why is CSS so frustrating at times? It's not a scripting language. It's a style language used to describe the presentation of elements in a separate markup language like HTML, which is not normally how we think about code. It takes time and effort to learn how CSS works and to accept that it's not weird. It's unique, and it requires us to think about it as such.