CSS: BEHIND THE SCENE
CSS is tricky, yes, you must have heard that a lot, or encountered it yourself. This is because understanding how to write CSS takes time and practice. A good understanding of how it works behind the scene, and how it is parsed will also help you to get through any hurdle when writing CSS.
As a front-end developer, mastering CSS first before the use of frameworks, and a deep understanding of how it works and how it is supposed to be implemented will provide a strong foundation and make you stand out as a Front-end developer.
In this article, we'll take a look at an overview of how CSS works behind the scene, but before we get into that, lets talk about the three pillars of writing good HTML and CSS.
THREE PILLARS OF WRITING GOOD HTML AND CSS
- Responsive Design.
- Maintainable & Scalable code.
- Web Performance.
Responsive Design
Responsive design means building web apps that works on all screens and can adapt across various device widths. Things to consider when building a responsive website.
Fluid layouts.
Media queries.
Responsive images.
Correct units(use of rem instead of px).
Mobile-first design vs Destop-first design.
Maintainable & Scalable code
This is important for the developer. Building a responsive website also entails writing clean, easy-to-understand and reusable code so as to improve the quality of web apps and also make it easy for developers to make changes on the website.
Web performance
This means to make the website faster, and smaller so the user has to download less data. Here are some things to put in mind when building for a better web performance.
Less HTTP request.
Less code.
Compress code.
Use a CSS preprocessor(e.g Sass).
Less image.
Compress image size (e.g Using Cloudinary).
OVERVIEW OF HOW CSS WORKS BEHIND THE SCENE
What you load up a webpage in a browser, the HTML file of the webpage is first loaded, and then parsed line by line by the browser. The browser then builds up the DOM which represents in the HTML file in the form of a family tree with parents, children and sibling elements.
The browser then finds the stylesheet in the head of the HTML file and starts loading the file. After this, the CSS is parsed
Two things happen during the parsing of CS:
Resolve conflicting CSS declaration(Cascade)
Process the final CSS value after resolving the CSS declaration conflict. When this is done the final CSS is stored in a tree-like structure called the CS object model (CSSOM)
The DOM+CSSOM forms the rendered tree, the website is then rendered by by the browser. This is also known as the visual formating model. The website finally loads to the screen after the rendering is done.
