CSS Clean Code
Tags: css, cleancode, webdesign
Published: 2021-02-11 00:49:27

> “Clean code is a code that is written by someone who cares” — Michael Feathers

There are some points we need to pay attention to while writing CSS. Now I'm going to share some of the most important ones with you.
So let's take a tour...

##1. Name things intelligently
The name of a selector should be self-descriptive and readable...
There are many naming conventions that you can use in your project like  BEM (block element modifier) and others.

##2. DRY
DRY stands for "Don't Repeat Yourself". As we can understand from its name, DRY aims to avoid repetition as much as possible.‌ 
For example,
  
```css
.submit-btn {
  background: pink;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

.cancel-btn {
  background: gray;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}
```
Here we can use the DRY principle by writing the common rules once in an additional class and the different rules each in other classes:
```css
.btn{
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}
.submit-btn {
  background: pink;
}

.cancel-btn {
  background: gray;
}
```

##3. Avoid the !important 

```css
p{
  font-size:18px !important
}
```
The !important tag has the highest specificity of all CSS selectors. If you need to override an important tag is to use another important tag. And this makes you use more and more important tags. which makes your CSS code much harder to maintain. So please don't use !important.

##4. Use Shorthands
Without shorthands, CSS would look like this:

```css
.btn{
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
}
```
Some of the CSS properties like paddings, margins, fonts, and borders can be written in a much simpler way by shorthand. 
So we can write the previous example like this:

```css
.btn{
  padding:10px 20px;
}
```
##5. Don't Use Inline-Styles
According to the separation of concerns principle, CSS, and HTML should be separated for reasons like better readability and maintenance.
Another problem using inline-styles is that you need to use !important tag to override!!

##6. Be Consistent
Writing clean HTML code isn’t always about choosing good practices and avoiding bad ones. Many times you can use different approaches to write the same line of code.
For example:
 - You can use a dash or underscore for ids and classes
 - You can use a single quote or double quote argument
Just be consistent. __When you find a specific practice that you like, stick to it and use it everywhere.__ 
Inconsistency makes your code extremely confusing for you and for the poor soul who has to read it.

##7. Avoid Comments
> “Don’t comment bad code. Rewrite it.” — Brian W. Kernighan

##8. Avoid Overly Specific Selectors
Maintaining low specificity in your selectors is one of the keys to creating lightweight, reusable, and maintainable CSS. As you may recall on specificity, a type selector has the specificity 0,0,1. Class selectors, on the other hand, have a specificity of 0,1,0:
```css
/* Specificity of 0,0,1 */
p {
  color: pink;
}

/* Specificity of 0,1,0 */
.color-light {
  color: pink;
}
```
When you add a class name to an element, the rules for that selector take precedence over more generic-type selector rules. There’s no need to further qualify a class selector by combining it with a type selector. Doing so increases the specificity of that selector and increases the overall file size.

Put differently, using __p.color-light__ is unnecessarily specific because __.color-light__ achieves the same goal. Another advantage is that __.color-light__ can be reused with other elements. A __p.color-light__ selector limits the __.color-light__ class to p elements.

##8. Don’t Chain Classes
Also, avoid chaining class selectors. Selectors such as .btn.submit have a specificity of 0,2,0. Higher specificity means they’re hard to override.

##9. Avoid Using id Selectors
Because you can only have one element per id per document, rule sets that use id selectors are hard to repurpose. 

##Conclusion
 These are some important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

##References
- https://css-tricks.com/specifics-on-css-specificity/
- https://www.toptal.com/front-end/frontend-clean-code-guide
- https://levelup.gitconnected.com/writing-your-css-like-this-will-make-your-code-super-clean-f82d4bfeb468
- https://medium.com/@sergimarquez/8-best-practices-to-write-clean-html-code-1cd407e2a7ec
- https://www.sitepoint.com/golden-guidelines-for-writing-clean-css/