Discovering The CSS Architecture
Table of Content
Do you remember the Internet's early times? All pages were pretty much the same. They all had the two or three same colours, fonts, and designs. Yet, you will also remember how pages' format and content started evolving. As a result, various structures appeared for websites, blogs, and social networks. Also, sites began to adapt to evergoing new formats. For instance, we have seen sites' appliances for smartphones, tablets, and smartwatches.
By now, we know that people expect a site to be appealing. This concept applies to future customers, companies to associate with, and potential employees. As for 2022, sites must not only “look nice”. Also, they need to be functional and efficient. There is a lot of information to collect and process in each interaction with each user. In this context, we'd like to share a timeline of CSS architecture. We know this style language is a must-go for design improvements from a development stand. We'll explore its story, uses, and how it can adapt to your work's needs. Let’s start this journey!
What is CSS?
CSS are the initials of Cascading Style Sheets. It's a style language that works along with Front-End Development, often in HTML documents. Its work is to describe how HTML elements should display. Since its beginnings, around 1995, it has gone through significant changes. Within its structure, it updates and develops ever-evolving properties. These include sizes, colours, style fonts, border styles, background images, and more. In consequence, it keeps including advanced features according to different market needs.
As we said above, CSS has a strong bond with HTML. Let's put it this way: HTML's work is providing structure and its meanings, or what elements will appear. In parallel, CSS specifies how those elements will look, display, and present. In other words, HTML and CSS can do amazing things together! For instance, devs can write HTML docs without thinking of their display. Instead, they can use CSS to define it in parallel or after finishing the structure. Yet, that's not it! They also can change CSS content while maintaining HTML untouched. In summary, form and style can stay connected and perform separate modifications.
We've talked about what CSS is and how it works. Now, we'll go ahead with its basic syntax. With this, we'll be able to unfold why its architecture has so much relevance.
CSS syntax is a set of rules with four parts: selectors, declarations, properties, and values. Selectors represent the HTML element you aim to style. Also, they can apply to as many aspects as it's needed. For that, devs only need to separate selectors with a comma. To use more than one property, they must separate each declaration with a semicolon. They also can make the code more readable by spreading declarations across the lines. These properties don’t affect the code's render: they only make it more readable for devs.
In summary, CSS applies rules assigned to HTML elements. These rules get processed by browsers when loading HTML files. Let’s unfold its parts:
Every CSS rule starts with a selector. Those state in which part of the document will different restrictions apply. After specifying selectors, there are one or more statements between parentheses. There are many ways to write these selectors. Its most basic method is mentioning elements by name and then modifying them. Yet, you can also call these elements by their class or attribute.
After specifying a selector, it gets followed by a declaration block. Each block specifies the given style for the selected element. This unfolds through two variables: properties and values. Within this logic, each declaration is written in a different line. As a result, these are easier to locate, read, and rewrite.
Values & Properties
Different properties have a variety of values assigned. These specify how the style these will have. Let's name a few examples. For instance, colour properties can have word values, like red or blue, hex code values, like #33E0FF, or RGB values, like (51, 224, 255). Width properties can have values expressed in px, cm, em, or percentage to define elements' size. Last but not least, font style properties can have known font names, like Arial, Times New Roman, or Courier. Yet, you can connect your document with plugins or third-party platforms to expand your options.
On top of different declarations' formats, CSS must have connections with HTML documents. There are two common ways to link HTML and CSS documents: external and internal. In external links, the CSS has its document, which is connected with the HTML with a tag. Further, it allows devs to make changes all over the site with one CSS document. Since this method enables writing the style of many different HTML docs, it's the most used one. Yet, in internal links, the CSS code is embedded within the HTML document. Internal links are often used in small projects and specific pages. Its most significant advantage is the chance of having all the code in only one sheet. Another concept with enormous relevance within the CSS syntax is its Cascades. Yes, the ones that give CSS its C. Within the Cascades, CSS acknowledges the elements' order when providing its final style. Browsers will process the last valid one if a property has any assigned values. This prevents the process risks of coexistent yet conflicted rules in a document. As a general concept, this applies to both internal and external CSS documents. Yet, how can you use this syntax for larger companies with lots of data to process? That’s what brings CSS Architecture to the table.
As a style language, CSS is simple to learn and understand in its basic form. Yet, with more complex projects, it can get a little bit trickier. Consequently, with larger sheets, code can get messy or out of hand. The key to preventing this is knowing how relevant organising CSS documents are. That's why it's fundamental that developers apply standard practices to improve maintainability. As a result, CSS stylesheets will be organised throughout the whole process. These are usually style guides: guidance structures to establish consistency through a document. With this approach, a complex design can become much more manageable. That's because it helps code become more scalable, flexible, and reusable. Also, it leaves behind the idea of designing lots of pages individually. A CSS Architecture can apply on many levels. Within these, there are three main steps to start structuring CSS:
1. Breaking code into smaller chunks and separating them by scope.
2. Coding components in independent and encapsulated manners.
3. Naming CSS selectors according to their purpose and relationship with each other.
When defining CSS classes, their name affects the global scope. This works great for simple apps but can become a problem when the project's size grows. The concept of CSS architecture rises to make devs' lives easier. Yet, it can be counterintuitive for code's reusability.
In the beginning, there were some pre-established solutions. Some of them include SCSS or LESS variables. Yet, nowadays, the majority of browsers support custom CSS properties. This latter solution offers two essential benefits. One allows code to be modified at runtime. This comes as a perfect solution for, for example, switching themes. Its other solutions it's related to layout components. With custom CSS, modifications can occur within it. As a consequence, devs can adjust the design on a smaller scale.
While you can create your own, devs often apply one of the most known methodologies. Among the most used there is OOCSS (Object Oriented CSS), BEM (Block Element Modifier), and SMACSS (Scalable and Modular Architecture for CSS). A huge benefit of these is that they've already been tested and optimised, making them secure and time-saving. You can read more about our CSS's best practices in this article.
CSS Tools & Resources
Another highlight regarding CSS is its vast amount of available tools. There are tons of updated data that upgrade how to work with it. For instance, a thing to pay attention to are Resets, like ResetCSS and Normalize.CSS. The first one will wipe out all built-in styling for HTML elements. Meanwhile, the second one will remove browser inconsistencies for HTML elements. Instead of removing everything, like CSS Reset, Normalize.CSS preserves valuable defaults. Another popular tool is the CSS Preprocessors. Within these, it's possible to generate code from a unique syntax. Also, it includes features such as mixins, functions, and nestings. Some examples of this include Sass with SCSS syntax and PostCSS. These will make code easier to read and maintain.
We already know that technologies are spreading into many new devices and formats. In this context, CSS is and will be adapting. Currently, there are many unique properties and values developed to guarantee adaptability. Also, more variable fonts allow customisation. And, further, there's a new collection of browser APIs called CSS Houdini. This concept is a new W3C task force whose ultimate goal is to erase browser support issues. As a result, it allows devs to gain control and access to the browser's CSS engine.
CSS started as the style language to work with HTML documents. Now, we see that it's approaching more complex tasks and projects. This goes from establishing syntaxes to adapting to more extensive proposals. Since its beginnings, we have used CSS to get the structure for appealing web pages and apps. Yet, now we can use it with better features and more manageable code ways. We hope this article helps you to have a more profound knowledge of how CSS is coded and used. Also, we're excited to see how the future for this language will unfold. How about you? What are your thoughts on the present and future of CSS?