Trying to keep code maintainable is probably the greatest struggles in software development, which relates to CSS as well. In reality, one large element of the maintainable code is actually reducing the quantity of edits required to make a change. For instance, when you want to expand a button you’ll need to create 15 edits in various rules, then you will miss out on a few of them, particularly if you aren’t the one that composed the original code. Even when the edits are apparent, or you ultimately find them, you’ve simply sacrificed time that may be put to greater use.In addition, this isn’t about future modifications. Flexible CSS tends to make it simpler to compose CSS once, after which create variants with hardly any code, because there are only a few values you have to override. take a look at a good example below of a button.

Check out the following CSS.

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;

text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

There are certain problems with the maintainability of this code that I can easily fix.When I choose to change the font size  additionally I have to adjust the line spacing because they are both absolute values. In addition, the line spacing does not reflect what precisely it’s connection will be to the font size, therefore I might even have to execute calculations to find out what it really needs to be for a different font size. Whatever values rely on each other, attempt to reflect their own relationship within the code. In this situation, the line spacing is 150% the line height. For that reason, it will be a lot more maintainable to indicate this in the code:

font-size: 20px;
line-height: 1.5;

Even though we’re busy with it, What  is the reason why I stipulated the font size being an absolute length? Without a doubt, absolute lengths are simple to deal with, however they keep coming back to bite you each time you are making changes. Currently, when I choose to make the parent font size larger, I have to modify each and every rule in the stylesheet that utilizes absolute font dimensions. It’s far better to make use of percentages or ems:

font-size: 125%; /* Assuming a 16px parent font size */
line-height: 1.5;

So if I alter the parent font size, the button will immediately turn out to be larger. Nevertheless, it’s going to look completely different, due to the fact that all other outcomes specified for a smaller button and didn’t scale. I am able to make the rest of the effects scalable too, through indicating any lengths in ems, so that it will all rely on the font size. By doing this, I am able to manage the dimensions of the button in one location:

padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;

At this point our larger button appears a lot more like a scaled version of the original.Observe I still left a few lengths that are absolute values.It’s a judgment call which effects need to scale using the button and which of them should remain the same. In this instance, I needed the border thickness to stay 1px regardless of the button dimensions.