Ahh, CSS, the great painter of the web. With CSS, you can make the web as pretty or ugly as you like. CSS stands for Cascading Style Sheets, and its name is unassumingly quite indicative of what it actually does. It is a sheet (file(s)) of text that the browser reads through to style your piece of the web.
The Cascade
Now on to these essentials. The first, as I previously hinted, is found in the name. ‘Cascading’ is the first and most important concept because the other two are incomplete and don’t make sense without it. Cascading refers to how the browser reads the file. Think of water as it cascades over a waterfall. The water flows from the high point to the low point. And much like we humans read a page, the browser reads a CSS file from top to bottom. ‘T to B’ as they say. Easy enough. So why is this important? Well, in communicating, we humans tend to repeat ourselves. Computers don’t like this and will take us on our LAST word (as it pertains to CSS, that is). Here’s an example:
The designer in this scenario started by thinking the heading should be attention-grabbing and fierce, hence deciding to make it red. Then the section’s tone changes so much that the red heading is no longer appropriate. The dev goes back into the code and slaps a blue value at the top of the page because that is typically where the h1 style is located. He is then perplexed when the heading color is still red. This is a silly example, but it illustrates how a computer cannot make inferences. It has strict rules to follow and will not deviate. If there is any repetition or conflicting information in CSS, the browser will always default to the last key-value pair listed when reading top to bottom. This holds true even if the conflict occurs in the same selector block, as seen below.
Specificity
At this point, more experienced CSS users may be saying, well, yea, but… Leading me to the second essential concept of CSS - specificity. You see, when I asserted that any repetition or conflict will always default to the last, I sort of lied. Specificity will override conflicts, and it can be quite valuable if you understand how to use it. Take my previous example. It turns out the designer intended to have three different colors for various headings on the page - green by default and blue and red fonts for specific instances. So how do we accomplish this? By being more specific. Being more ‘specific’ can be accomplished in a variety of ways, but the simplest is via classes and/or ids. Examine:
In this example (which is structured awfully - more on that shortly), the ‘h2’ heading with a ‘blue-font’ class will be blue. The ‘h2’ heading with a class of ‘red-font’ will be red despite the h2 selector coming last in the file with a color of green. This may be a bit confusing, and that is exactly why the structure (or order) of the file above is awful. Specificity will override the cascade. Ergo, it is best practice to list your selectors from most broadly defined at the top to most specific at the bottom, curbing confusion for both you and the next dev who reads the file.
Inheritance
Alright, you’ve grasped the cascade of CSS and its nit-picky specificity, on to the bow that brings it all together - inheritance. Inheritance is the key to writing concise CSS. If you understand this concept, you can drastically cut down on the amount of CSS written and make your selectors reusable. In essence, some more specific selectors will inherit designated values of more general selectors of the same type. Or, more technically, some child elements will inherit the traits defined for their parents (just like you and me). Notice I said ‘some,’ this is not an overarching hard and fast rule, but I digress. Let’s take our trusty example and add a few more values:
You’ll notice both snippets accomplish the same thing, but the first is far less verbose than the second. This sameness is the result of inheritance. When applied to an h2 element, the two designated classes will inherit the font and border values of the h2 element, meaning you don’t have to redefine those rules for each class. Now I hope you are having a bit of an ‘Aha!’ moment. If we stick with the less verbose method, it means that our color classes can be used for our two different headings and any other fonts we want to make those respective colors. In short, it allows for the reusability of classes across various elements.
Recap
When you are writing CSS, you should always keep these three concepts in the back of your mind. Remember, when constructing CSS, the browser will always read the file from top to bottom. As such, for everyone’s sake, including the computer, structure the file in descending order with the most general selectors at the top and every more specific selector coming thereafter. Once you’ve done so, you can better recognize which selectors will inherit which values. If you have a more specific selector that will accomplish a very specific task, keep it simple. If that selector will inherit desired traits from its parents, there is no need to re-designate those values. In short, in the following list, the former will overrule the latter.
- Specificity
- Inheritance
- Source order (the cascade)
I hope this has been helpful! Thanks for reading and until next time…
gm!
Josiah
Top comments (1)