DEV Community

Cover image for Mastering CSS3: Strategies for Writing Clean Code and Boosting Performance
Ganesh Patil
Ganesh Patil

Posted on • Updated on

Mastering CSS3: Strategies for Writing Clean Code and Boosting Performance

Cascading Style Sheet (CSS3) is changing, evolving and continuously there are different ways to write CSS. Some developers choose to write separate files for better understanding or to organize structure, other people write single CSS files. It depends on what kind of project you're working on.

OLD V/S NEW CSS

CSS3 completely changed the way to write CSS and it's more powerful with new features. Including responsive layouts, animations, variables, properties like calc functions, etc.

The old way people wrote CSS and found it difficult to make websites responsive and optimized is now can be done easily.

Examples of Writing Bad CSS

Most of the time people write the same code again and again for example


<div class="item-1"> Hello </h1> 
<h2  class="item-2"> Amazing </h1>
<h3  class="item-3"> Developers </h1>
Enter fullscreen mode Exit fullscreen mode

Now, I want to change the back color of every individual element. I have to write the following CSS code
app.css

.item-1{
background-color: red;
}

.item-2{
background-color: red;
}

.item-3{
background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Effective Way to Write CSS3

In the previous example, we had to write three different lines to change color right, and now assume you're working with a large codebase and your team lead assigns you the task to change every <h1> element color so you have to find each heading change the color.

app.css

.item-1{
background-color: yellow;
}

.item-2{
background-color: yellow;
}

.item-3{
background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

It's time-consuming and a bad way to solve problems.
Here's an effective way to solve this.

Create systemDesign.css as a separate file and add all your styling rules.
systemDesign.css

:root {
--color: red;
--back-color: yellow;
--h1: 32px
--h2: 24px;

 }

/**
* ? You can write all CSS styles here. 
**/

Enter fullscreen mode Exit fullscreen mode

Now let's take the previous example if you have to change the back color of all heading tags all you have to update is a back-color style from the syetmDesign.css file.

index.html

<div class="item-1"> Hello </h1> 
<h2  class="item-2"> Amazing </h1>
<h3  class="item-3"> Developers </h1>
Enter fullscreen mode Exit fullscreen mode

systemDesign.css

:root {
--color: red;
--back-color: yellow;
--h1: 32px
--h2: 24px;
}

/**
* ? Write your CSS classes
**/

.item-1{
   background-color: --var(back-color)
}

.item-2{
   background-color: --var(back-color)
}

.item-3{
   background-color: --var(back-color)
}
Enter fullscreen mode Exit fullscreen mode

Now if you want to change back color just change the variable value and that's it. You can also use the sibling concept of CSS to solve this issue but always use standard practices.

Second Example

Another way is to not repeat your code again and again.

Assume you have two classes .one and .two that require the same properties.

<button class="one"> Web </button>
<button class="two"> Development </button>
Enter fullscreen mode Exit fullscreen mode

.one{

padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: black;
background-color: white;
}

.two{
padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: white; // color changes
background-color: black; // back-color changes
}
Enter fullscreen mode Exit fullscreen mode

You're using the same code here and just two properties are changing back-color and color.

Solutions

.one, .two {
padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: black;
background-color: white;
}

.two{
color: white;
background-color:
}
Enter fullscreen mode Exit fullscreen mode

In CSS, when you use a comma between selectors, it allows you to apply the same set of styles to multiple selectors. This grouping of selectors with a comma is a way to apply a common style block to multiple elements without duplicating the styles for each selector.

I'm a developer who's learning something new every day and sharing his learnings on the dev platform. if you found any wrong code, or typos mistakes I would appreciate it and will fix it ASAP. Let me know in the comments if you find some.

That's it!
Let's chat on Twitter!

Support my YouTube channel 👇

Top comments (2)

Collapse
 
get_pieces profile image
Pieces 🌟

Great guide! Awesome for folks getting started in CCS.

Collapse
 
devgancode profile image
Ganesh Patil

Thanks for your constant support, Pieces! 😊