{"id":1309,"date":"2022-02-07T20:45:48","date_gmt":"2022-02-07T20:45:48","guid":{"rendered":"https:\/\/mobileaders.com\/?p=1309"},"modified":"2022-02-07T20:52:39","modified_gmt":"2022-02-07T20:52:39","slug":"minimize-code-duplication","status":"publish","type":"post","link":"https:\/\/mobileaders.com\/?p=1309","title":{"rendered":"Minimize code duplication"},"content":{"rendered":"\n

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.<\/p>CSS Secrets<\/a>: by Lea Verou<\/cite><\/blockquote>\n\n\n\n

padding: 6px 16px;\nborder: 1px solid #446d88;\nbackground: #58a linear-gradient(#77a0bb, #58a);\nborder-radius: 4px;\nbox-shadow: 0 1px 5px gray;\ncolor: white;\ntext-shadow: 0 -1px 1px #335166;\nfont-size: 20px;\nline-height: 30px;<\/code><\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
font-size:40px;<\/code><\/pre>\n\n\n\n
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 <\/p>\n\n\n\n
font-size:2em<\/code><\/pre>\n\n\n\n
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 <\/strong><\/p>\n\n\n\n
Our new code is :<\/p>\n\n\n\n
padding: 0.3em 1em;\nborder: 1px solid #446d88;\nbackground: #58a linear-gradient(#77a0bb, #58a);\nborder-radius:0.2em;\nbox-shadow: 0 0.05em 0.25em gray;\ncolor: white;\ntext-shadow: 0 -0.05em 0.05em #335166;\nfont-size: 2em;\nline-height: 1.5;<\/code><\/pre>\n\n\n\n
Maintainability and Brevity:<\/strong><\/p>\n\n\n\n
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 <\/p>\n\n\n\n
border:10px 10px 10px 0;<\/code><\/pre>\n\n\n\n
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<\/p>\n\n\n\n
border-width:10px;\nborder-left-width:0;<\/code><\/pre>\n\n\n\n
Inheritance<\/strong>:<\/p>\n\n\n\n
The inherit<\/strong><\/code> CSS keyword is used to have the property take the same specified value as the property of the element\u2019s parent. Specifying a value of inherit<\/code> for any CSS property, that\u2019s applied to an element will cause the element to get its parent\u2019s computed value for that property.<\/p>Codrops Reference<\/strong><\/cite><\/blockquote>\n\n\n\n
it always corresponds to the computed value<\/a> 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 <\/p>\n\n\n\n
.callout { position: relative; }\n\n.callout::before {\ncontent: \"\";\nposition: absolute;\ntop: -.4em; left: 1em;\npadding: .35em;\nbackground: inherit;\nborder: inherit;\nborder-right: 0;\nborder-bottom: 0;\ntransform: rotate(45deg);\n}<\/code><\/pre>\n\n\n\n
This is the first article in a series of CSS coding tips so i hope to see you again 
good luck<\/span><\/p>\n\n\n\n

References:<\/strong><\/p>\n\n\n\n
\n
DRY CSS: Don’t Repeat Your CSS<\/a><\/blockquote>