CSS management techniques for websites by using SASS
Learning CSS to design websites is not difficult as long as you know CSS syntax and update new properties. However, the most difficult part of CSS is implementing CSS on any websites optimally, in this way, all CSS files will be grouped as a structure. For example, this structure will have some CSS files for specific elements such as a file for all button properties or a file for web layout.
If you are new to CSS, I’m sure you will work with CSS as if seeing something to decorate is just writing CSS in. But if you keep adding CSS without paying attention, in the long run, it will be difficult for you to manage your CSS file, because it may not be properly arranged, there are many CSS clusters that make it difficult when you need to redesign your website or upgrade it. In this post, I will provide you some techniques to manage CSS.
CSS management techniques.
CSS Preprocessors like SASS or LESS are one of the powerful tools you should use if you need to work with CSS on a new level. This tool can help you to create variables in CSS and use it quickly. It makes the CSS code more clear and shorter. Setting up variables contains the value of color property to use, when developers want to change color, instead of changing color for 100 different classes or ids line by line, they only need to change the value of variables and all classes or ids having that variable declared will change automatically.
Splitting into multiple files.
One thing that I like most when using SASS to deploy CSS on any projects is to split CSS into many different files, as I mentioned above, each file will contain CSS for each element on the website to avoid putting too much CSS into one file. Because I use SASS, so I will create files like _button.scss, _layout.scss. These files will be then imported into the main style.scss. So when compiling from SASS to CSS, all the files button.scss and layout.scss will not be exported to style.scss, it will be exported to style.scss. There are some separate CSS files that I often used:
style.scss (this SASS file is the main CSS that will be used to import “child” CSS files).
_var.scss (this will contain all variables being used in CSS)
_layout.scss (used to build the web layout like columns, rows,etc.)
_global.scss (used to store all elements on website like HTML, body, etc)
If you’d like to make websites responsive, you can create some more files for each breakpoint. For example, _mobile.scss, _tablet.scss, _desktop.scss, etc. Whenever I want to use, “child” CSS file, I only need to import it instead of writing again.
Extend/Inheritance.
This is the most convenient feature of Sass. Using “@extend” allows you to share CSS property sets from one selector to another. In a website project when writing CSS, you will certainly encounter a situation where an element has a piece of code similar to an element that was previously there.
Instead of rewriting the entire code, you can reuse it by calling “@extend” as needed. This is called inheritance in writing code.
Media Query.
Media queries are also important when we develop a responsive website. But how media queries in CSS differ from SCSS? In scss, we can modify directly in a selector.
Imagine, your website has countless places to use media queries and dozens of numbers, the resolution to remember to write, at min-width, at max-width. This might make you feel stress and a bit crazy to organize. But when using SASS it would be shorter and more maintainable.
We use the variable that declares the size of the screen to minimize code duplication. It seems the code look cleaner when writing media query this way.
Final words.
SASS has become more popular in front-end development. At this point, I think you have mastered SASS, and actually SASS is just that and more other code commands that you can read more in its documentation. Once again, if you have experience using CSS then I recommend you apply SASS to code writing right away because of its benefits. If not, learning SASS as soon as possible so you would become a better web developer. Good luck!