CSS and HTML coding standards

HTML

HTML should be HTML5 compliant
Avoid more than one tag per line
Always indent blocks
Try to avoid IDs instead prefer classes.

<button>
    <span class="icon icon-close"></span>
    Close
</button>

DON'T

<button><span class="icon icon-close"></span>Close</button>

CSS

Do not bind your CSS too much to your HTML structure.
Try to avoid using IDs and tags for query selectors, but use classes.
Try to make your CSS reusable by grouping common attributes into classes.
Take a look at the Writing Tactical CSS & HTML video on YouTube.

DO:

.list {
    list-style-type: none;
}

.list > .list__item {
    display: inline-block;
}

.important_list_item {
    color: red;
}

DON'T:

#content .myHeader ul {
    list-style-type: none;
}

#content .myHeader ul li.list_item {
    color: red;
    display: inline-block;
}

Naming convention

We recommend to use the BEM (Block-Element-Modifier) naming convention for CSS classes. BEM helps with making CSS reusable and better maintainable, especially when using pre-processors like SASS.

DO:

.button {
    background-color: var(--color-main-background);
}

.button--primary {
    background-color: var(--color-primary);
}

.button__icon {
    width: 20px;
}

DON'T:

button.btn {
    background-color: var(--color-main-background);
}

button.btn.primary {
    background-color: var(--color-primary);
}
button.btn span.myIcon {
    width: 20px;
}