BLOG

Keeping code DRY and maintainable is one of the biggest challenges in software development, and that applies to CSS as well. In practice, one big component of maintainable code is minimizing the number of edits necessary to make a change. For example, if to enlarge a button you need to make 10 edits in many different rules, chances are you will miss a few of them, especially if you are not the one who wrote the original code. Even if the edits are obvious, or you eventually find them, you have just wasted
time that could be put to better use. Furthermore, this is not just about future changes. Flexible CSS makes it easier to write CSS once, and then create variations with very little code, as there are only a few values you need to override.

CSS Secrets: by Lea Verou

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;

To make your code maintainable we will make some changes to the last code, for example, if we want to change our element font-size to:

font-size:40px;

what we do previous is wrong we shouldn’t specify the absolute length, absolute length is easy to work but they come back to bit you every single time you make changes, now if we want to make element parent font-size bigger,we should change every single role in the style sheet, so it’s better if we use percentages or ems or rem,..etc

font-size:2em

now if I change parent font-size our element will instantly become bigger, so when values depend on each other, try to reflect their relationship in the code

Our new code is :

padding: 0.3em 1em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius:0.2em;
box-shadow: 0 0.05em 0.25em gray;
color: white;
text-shadow: 0 -0.05em 0.05em #335166;
font-size: 2em;
line-height: 1.5;

Maintainability and Brevity:

maintainability and brevity can be mutually exclusive for example if we want to make border to all sides of a specific element expect left side

border:10px 10px 10px 0;

it’s only one declaration , but to change the border thickness we would neeed to make three edits, so i thinck if we make edit as two declaration it would be easy

border-width:10px;
border-left-width:0;

Inheritance:

The inherit CSS keyword is used to have the property take the same specified value as the property of the element’s parent. Specifying a value of inherit for any CSS property, that’s applied to an element will cause the element to get its parent’s computed value for that property.

Codrops Reference

it always corresponds to the computed value of the parent and it is useful for the background as well.
for example, to create speech bubbles where the pointer automatically in-inherits the background and border

.callout { position: relative; }

.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}

This is the first article in a series of CSS coding tips so i hope to see you again
good luck

References:

DRY CSS: Don’t Repeat Your CSS

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing