Skip to content

Naming standards and best practices🔗

Separation of powers 👩‍⚖️👨‍⚖️🔗

You should always use CSS if you want to create or override styles.

When a mix of JavaScript and CSS is needed : logic should be handled in JavaScript while everything visual should be set in CSS. For exemple when components rely on user interaction, use JavaScript for event listeners, adding classes or changing HTML attributes but use CSS to hide, show, change something's color.

Naming standards🔗

No IDs in CSS🔗

Too specific. Too powerful. We want modularity ✊

Class names should always be in English🔗

Comments too.

No abbreviation🔗

Do ✨ 👏 

1
.something-number { ... }

Don't 🔪 💀 

1
.smthng-no { ... }

Class names fit in a word🔗

If they need more than a word, those words will be separated with a hyphen.

1
2
3
4
5
6
7
.card { ... } ✨ 👏

.user-card { ... } ✨ 👏

.user_card { ... } 🔪 💀

.userCard { ... } 🔪 💀

Class names have to be semantic🔗

That means they should describe their component and its function. They shouldn't describe what the component looks like.

NB : That component can be super generic (e.g., card, button, banner) or specific to the content (e.g., document-panel, companies-list).

Do ✨ 👏 

1
2
3
4
5
6
7
8
<div class="profile">A. Dupont, Lyon</div>

<style>
    .profile {
        margin-top: 20px;
        color: #3059aa;
    }
</style>

Don't 🔪 💀 

1
2
3
4
5
6
<h1 class="margin-top-20px color-blue">A. Dupont, Lyon</h1>

<style>
    .margin-top-20px { margin-top: 20px; }
    .color-blue { color: #3059aa; }
</style>

Rare exceptions can be made for some utility classes (e.g., show-screen-reader, prevent-scroll).

Class names are written following the BEM naming convention🔗

BEM (Body Element Modifier) is a component based approach that considers each component as a brick that should be able to fit everywhere no matter the context. 🧱 That way you get modular styles and you can add, replace and remove blocks with minimum CSS. More about BEM

Best Practices🔗

Use of '!important'🔗

The !important declaration in CSS is used to give a CSS property the highest specificity (the weight that is applied to a given CSS declaration).

1
2
3
.example {
  background-color: red !important;
}

With !important, the background-color property will override any other conflicting declarations.

You should avoid using it as much as possible, because it leads to ; a reduced maintainability and reusability of your code, confusions, debugging difficulty or inheritance issues.

Do ✨ 👏

  • Use it only on very specific cases 

    1
2
3
4
    /* Using !important to override third-party library styles */
.third-party-button {
  background-color: blue !important;
}

  • Be specific when writing CSS, and avoid using the same class for different looking components. Prefer creating specific CSS that applies to your particular needs rather than override existing code. As a best practice you can use the BEM naming convention for components. 

    1
2
3
4
    /* BEM Naming Convention */
.block__element--modifier {
  background-color: red;
}

Don't 🔪 💀

  • Use it on a global scale 

    1
2
3
4
    /* Don't use !important in a generic class */
.container {
  padding: 10px !important;  /* Avoid this */
}

  • Use it for convenience 

    1
2
3
4
    /* Avoid using !important for quick fixes */
.quick-fix {
  margin: 0 !important;
}

  • Apply it to multiple properties unnecessarily 

    1
2
3
4
5
6
    /* Bad Practice */
.bad-practice {
    padding: 10px !important;
    margin: 20px !important;
    background-color: red !important;
}

  • Use inline styles AND !important 🔪 💀🔪 💀🔪 💀 

    1
2
    <!-- Bad Practice -->
<div style="margin: 10px !important;">Content</div>

Last update: December 20, 2024