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: babariyamargish97@gmail.com