HTML, The Cascade, and Ways To Think In CSS
This piece is part of a Learn HTML & CSS series. Check out part 2 here: Parts Of An HTML Document And How It Works With CSS
I started learning how to code back in the early 2000s. For context on how long ago that was -- our Internet was dial-up, my computer had a floppy disk drive, and a 128MB USB stick used to cost $60.
Code-related learning resources were not as extensive as today and access to any kind of programming books meant taking a day trip to the central city library via an hour bus ride. In short, I learned to code during the Internet's Stone Age as a kid. We're talking before the existence of YouTube kind of Stone Age. There was a lot of trial and error, with minimal resources. My code learning journey has been an ad-hoc one. There were some things that weren't obvious to me when I started as a 12-ish-year-old trying to figure it all out with minimal help from Google -- because Google wasn't even a thing yet back then.
Over time, I eventually learned how to code properly. Here are a few eureka moments that I had that may be relevant to you for HTML and CSS.
Everything is in pairs
For the uninitiated, HTML works in pairs. Anything between <> are called tags. Closing tags have a / as part of the corresponding tag.
Here is an example:
<body></body>For every opening tag, a matching closing tag must close it off. This means that you can’t alternate or interweave tags. Browsers interpret tags as closing pairs and your HTML will become highly error-prone if you start jumbling up your flow.
For example, this is incorrect:
<p>Some text <strong>here</p></strong><strong> needs to be closed off before <p> can be closed.
This is the correct way to write it:
<p>Some text <strong>here</strong></p>This closing tag rule comes with its own set of exceptions. There are a few special tags that are self-closing. This is because they don’t really contain anything as such and the tag itself is enough to describe what it needs to describe.
They are self-closing because there is no ‘content’ as such that exists in between. Self-closing tags are merely declaring a particular type of content that is already part of the tag for displaying.
For example, an image tag already has the properties it needs to display an image such as the image source.
Self-closing tags are self-descriptive with attributes that enrich the HTML with data. It provides additional information for the browser and anything else that is using them as hooks into the way your view is rendered.
Link tags <a> , for example, have a href attribute that tells the browser where to navigate next when a user clicks on it. CSS hooks into the id and class attributes inside the HTML tag. It also has access to another attribute as well for certain specific tags.
Here is a list of self-closing tags for your reference.
| Description | |
|---|---|
<area /> | clickable area inside an image map |
<base /> | new root or base path for relative paths |
<br /> | Single line break on paragraphs |
<embed /> | Embeds for things like videos |
<hr /> | Change in type of content |
<iframe /> | Frame inside the page |
<img /> | image |
<input /> | Input field |
<link /> | Include an external stylesheet |
<meta /> | Meta data about the page |
<param /> | Parameter for an object |
<source /> | Include media for video or audio |
<track /> |
While you can technically write self-closing tags without /, it is still good practice to do so. For example, React -- a JavaScript UI library -- is extremely strict on closing off every element you create. This means that if you miss out the / in a self-closing tag, it will throw an error and refuse to run properly.
The Cascade
The cascade in CSS refers to the behavior where rules are applied from top to bottom of the file. This means that if there is another rule declaring the same thing, the one that sits further down the file will be applied.
Here is an example:
a { color: red; text-decoration: underline; }
//some css code in between
a { color: blue; }All your links will be blue because it sits further down in the file. The property attached to text-decoration will remain the same because there is no rule to override it.
A good habit to get into is to only declare rules against your selector once. This will help keep your code clean and make it easier to deal with in the long run. CSS files can get quite long and following this rule can make life easier when it comes to debugging. This will save you the trouble of tracing selectors and their properties as your CSS styling grows.
Ways To Think In CSS
CSS is simple to pick up once you get the gist of it. However, the hard part is keeping it organized over time. one rule here, a couple of rules there, and the next thing you know, your file has grown to borderline a 1000 lines.
Show how do you keep everything organized? Over the years, multiple people have come up with different ways to 'think' in CSS and arrange your rules to match these patterns. Here are two easy-to-understand methods that are a good starting point.
Where To From Here?
If you're a complete beginner in CSS and web programming, it can feel a little bit overwhelming. Don't worry too much about it. The point of this section is to give you a quick deep dive into everything all at once -- from beginner concepts to advanced topics.
What matters is that you now have the awareness that there's more to CSS than just making the page look a certain way. The way you arrange and structure your CSS in relation to your HTML can impact on long-term code readability and maintenance.
When writing your HTML and CSS code, don't expect it to be perfect on the first try. Leave it for a little bit and come back -- take a look at it with fresh eyes and ask yourself the following questions:
- how can this be improved?
- how can it be shortened without breaking?
- can you write it without so much nesting?
- can you abstract it out to make it more modular?
- is there repeated code? if so, why?
- can it be abstracted out into its own space?
These questions are a good starting point towards helping you improve your CSS. Over time, as you begin to pick up patterns in design and code, you will start to write effective and efficient code from the get-go. But for now, always review and revise to see how you can make it better. It will also help deepen your understanding of how things work and fit together.
Continue reading part 4: What is OOCSS and How OCSS Works