13 Rules I Follow When Writing CSS To Make It Concise and Readable🚀💡

Here are 13 rules that can be followed when writing CSS to make it more concise and readable:

1. Use a preprocessor: Use a CSS preprocessor such as SASS or LESS, which allows you to use variables, functions, and nested rules, making your CSS more modular and easier to maintain.

$primary-color: #011A52;
$secondary-color: #990000;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

---

2. Use a style guide: Use a style guide such as SMACSS or BEM, which provides a consistent structure for your CSS.
HTML

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Card Title</h2>
  </div>
  <div class="card__body">
    <p class="card__text">Card Text</p>
  </div>
  <div class="card__footer">
    <a href="#" class="card__link card__link--primary">Primary Link</a>
    <a href="#" class="card__link card__link--secondary">Secondary Link</a>
  </div>
</div>

• Blocks: .block
• Elements: .block__element
• Modifiers: .block__element--modifier

CSS:

.card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}

.card__header {
  margin-bottom: 10px;
}

.card__title {
  font-size: 1.5em;
  margin: 0;
}

.card__body {
  padding: 10px;
}

.card__text {
  font-size: 1.2em;
  margin: 0;
}

.card__footer {
  margin-top: 10px;
}

.card__link {
  color: #333333;
  text-decoration: none;
  margin-right: 10px;
}

.card__link--primary {
  color: #ffffff;
  background-color: #336699;
  padding: 5px 10px;
  border-radius: 5px;
}

.card__link--secondary {
  border: 1px solid #336699;
  padding: 5px 10px;
  border-radius: 5px;
}

---

4. Use CSS classes: Avoid using element selectors and instead, use classes to target specific elements. This makes it easier to reuse styles across different elements.

---

5. Keep it organized: Use a consistent naming convention and organize your CSS into sections such as base styles, layout, and modules.

---

6. Avoid !important: Avoid using the !important keyword, as it can make it harder to override styles later.

---

7. Be mindful of specificity: Be mindful of the specificity of selectors, as this can affect which styles are applied to elements.

---

8. Use shorthand: Use shorthand properties such as padding, margin, and font to make your CSS more concise.

font: 700 16px/1.5 'Roboto', sans-serif;
margin: 40px 0 20px;
padding: 10px 20px;

---

9. Use CSS variables: Use CSS variables to store values that are used throughout the stylesheet, such as colors and fonts.

/* Variables */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: 'Roboto', sans-serif;
}

/* Typography */
body {
  font: 16px/1.5 var(--font-family);
  color: var(--secondary-color);
}

h1{
  font: bold 32px/1.2 var(--font-family);
  margin: 40px 0 20px;
}

/* Button Variations */
button{
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font: bold 16px/1.5 var(--font-family);
}

---

10. Minimize nesting: Minimize the use of nesting in your CSS, as this can make it harder to understand the relationships between elements.

---

11. Use comments: Use comments to explain the purpose of different sections of your CSS and to help other developers understand your code.

---

12. Use a linter: Using a linter such as Stylelint can help enforce good coding practices, identify errors in your CSS, and assist in fixing them.

---

13. Use a framework: Use a CSS framework such as Bootstrap or Foundation, which provides a set of pre-built styles and components that can be used to quickly create a professional-looking website.

---

Keep your CSS simple and avoid over-engineering solutions. The simpler your CSS is, the easier it will be to maintain and understand.

By following these rules, your CSS will be more concise and readable, which makes it easier to maintain and collaborate on projects.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

---

👋Hey there, Let’s connect on:

Linkdin: Margish Patel
Twitter: @margish96patel
Email: [e-mail]

Comments

[Tracy Gilmore]

Hi Margish,
These are all good points, many of which I have followed for a long time.

There is a slight conflict between points 1 and 9 regarding variables. Many frameworks support the concept of a variable but these are seldom dynamic and get lost after translation into CSS. Would you suggest developers should favour one over the other?

Another 'picky' point is they are not strictly defined as "CSS variables" (although even MDN recognises they are often called that) but technically they are known as "CSS custom properties", should a reader wish to investigate them further.

Best regards, Tracy

[margishpatel]

Thanks for your valuable feedback.

We can use points 1 or 9 any one types of CSS.

[Tomas Hayes]

I switched to use web components, with scoped DOM and css and custom properties, and forgot about BEM, preprocessor and frameworks... This way you create reusable components, instead of reusable clases.
At least that's what I found to be the best for new small projects so far. This way, the code is never outdated (it's all vanilla) and no compilation is even needed.

[margishpatel]

Thanks for information