You all would be probably working with CSS for a long time and now its time to adapt on how to properly integrate CSS to a project.

we will discuss a cool feature that will help you write CSS with cleaner boundaries and proper structure that will make your code easier to understand for you too and beautiful.

Imports in CSS

You can create multiple css files for different html files or functions and have them imported in a main.css file and can just link this main.css file in out html file.

Thus making your code evenly distributed and partitioned enough for easy understanding ;)

Global CSS

Consider your application has a theme of ""#121gg32"" & blue color and you want to only use these colors in our app.

One way to do is is to remember thesse colors and then write it in our CSS files again and again. That's old school.

Instead create a CSS file called root (thats what i prefer to do,you can do as you want) and declare some CSS variables. Yes! you read it right, You can declare CSS variables like this:-

// keep it inside   :root
:root {
     --color1 : #121gg32;
     --color2 : blue;
}

Now, to use this variable in your css codes, you need to wrap them inside the var.

any_tag{
       color: var(--color1);    //--color2  is the name of root variable you made
}

---

Alright! that's it for today. Hope you like it :)