Why is CSS so weird? - CSS教程

- [Instructor] I can count on many hands the number of times I've heard someone say CSS is weird or CSS is bad or even broken. The idiosyncrasies and often surprising behavior of CSS has led to a whole genre of CSS jokes and memes including a cup showing a square with text spilling out of it, the classic overflow problem that has plagued front-end developers since the beginning of time or at least since the beginning of CSS. So why is CSS so weird and is it bad and broken? I don't think so, but I totally understand why people do. If you come from a programming language like JavaScript you're used to being able to instruct a computer on exactly what you want it to do and seeing the computer do exactly what you want it to even if it turns out that instruction was wrong. But with CSS, you're not instructing the browser on 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 the selected element, along with whatever other properties are already being applied. That means in many cases, what you instruct a browser to do what you intended to happen comes in addition to something else that is already happening. You're adding new properties to an element that may already have properties applied and that can produce surprising results which appear as errors. 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. The cascade is how the browser reads CSS. From top to bottom, and the farther down in the CSS document a rule is placed the more weight it has. So if you define a rule with the selector high up in the CSS document and then create a new rule with the same selector further down in the document that lower rule, the one farther down in the document has more weight and is therefore applied as long as the higher rule doesn't have greater specificity. If you're a bit lost right now, that's okay. This will all be covered in detail in this course. Anyway, all this creates an environment where 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 themselves operate and interact it can often feel like you write something in CSS and then the browser does something else and it's not clear why that is happening which is very frustrating. Here's a hard learned truth from me to you. In most cases, when people say that CSS is weird or bad or broken 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 expected to behave like a regular scripting language which it's not. CSS is a declarative styling language, used to apply optional style properties to elements in HTML documents. Nothing more, nothing less. The browser receives these instructions, combines them with all other available styling information and does its best to paint what you told it to. Critically, unlike imperative coding languages and even some declarative languages CSS is enormously 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 the browser doesn't understand and it'll just ignore them. You can use JavaScript to manipulate any CSS at any point and the browser will repaint the elements to new rules applied to right in front of your eyes. And finally, CSS is flexible and contextual and in the end it's really just a bunch of properties applied to objects in the browser window. So why is CSS weird and why does it sometimes feel bad or broken? It's because it's not a scripting language. It's a style language used to describe the presentation of elements in a separate markup language which is not normally how we think about style or code. So it takes time and effort to learn how CSS works and to accept that it's not weird, it's unique and requires to think about it as unique. CSS is CSS. And if we think about it as anything else it doesn't work the way we want it to.