Vanilla CSS

Vanilla CSS
When your browser navigates to a site, it loads the site’s HTML. It converts this HTML
into a Document Object Model (DOM). After this, the browser will begin to fetch
resources referenced in the HTML. This includes images, videos, and, more importantly
right now, CSS. The browser reads through the CSS and sorts selectors by element, class,
and identifiers. It then goes through the DOM and uses the selectors to attach styles to
elements as required, creating a render tree. The visual page is then shown on the screen
by utilizing this render tree. CSS has withstood the test of time, as we have been shipping
CSS in this way with HTML for 25 years. But using vanilla CSS has some pros and cons.
The pros for using vanilla CSS are as follows:
• Its age: Because CSS has been around for 25 years at the time of writing this book,
there is an abundance of content available on CSS. Due to its age, the chances that
someone has already worked out how to fix any issue you encounter is also very
high. Both these reasons make vanilla CSS a great choice for a beginner.
• Understandable syntax: The syntax that makes up CSS consists of very few
abbreviations. Reading it as a beginner, it is far easier to learn what any line
of CSS is doing compared to the other style implementations in this chapter.

The cons for using vanilla CSS are as follows:
• Long style sheets: In traditional websites, you often see that they only ship with one
CSS file. This makes maintaining and organizing styles very difficult, as the file can
end up incredibly long. This can lead to a pattern where lazy developers who can’t
find the styles they are looking for might just append them to the bottom of the file
(also known as an append-only style sheets). If they do this and the file already
exists, then they are just increasing the file size for nothing.
• Class reuse confusion: Reusing styles can sometimes lead to more trouble than it’s
worth. Let’s say you have used one specific class in use across various elements in
your application. You might update this class to make it fit one instance of it, only to
break all the others. If you fall into this cycle multiple times, it can really slow down
your development. This can be avoided with a little forward-thinking – instead
of reusing classes, make components that are reused. Another option is to create
“utility classes” that are unlikely to change; if you’d rather not create these yourself,
you should read the section on Tailwind CSS.
• Inheritance pain points: By using inheritance, we end up tightly coupling our
CSS to the structure of our HTML. If you break that structure, your CSS may no
longer work. While inheritance sometimes is unavoidable, we should try and keep
it to a minimum.
CSS has withstood the test of time and is still a solid choice today. You might be asking
why these are cons when I have listed ways to work around/avoid all of them. These cons
can all be fixed one way or another using one of the other implementations in this chapter


Stay Connected

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart