Estándares de código de CSS y HTML

Resumen

Esta página recoge los estándares de código de HTML y CSS: cómo escribir y sangrar el HTML, cómo desacoplar el CSS de la estructura HTML y la convención de nombres BEM para las clases, con ejemplos de qué hacer y qué no. Está dirigida a quienes desarrollan apps.

Fuente: documentación de Nextcloud, «developer_manual/getting_started/coding_standards/html_css», versión 3ad9158, licencia CC BY 3.0; traducida y adaptada para APS Conecta Gestión.

HTML

• El HTML debe cumplir con HTML5

• Evitar más de una etiqueta por línea

• Sangrar siempre los bloques

• Intentar evitar los ID; en su lugar, preferir las clases.

HACER

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

NO HACER

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

CSS

• No ligar demasiado el CSS a la estructura HTML.

• Intentar evitar los ID y las etiquetas en los selectores de consulta; usar clases en su lugar.

• Intentar que el CSS sea reutilizable agrupando los atributos comunes en clases.

• Ver el vídeo Writing Tactical CSS & HTML en YouTube.

HACER:

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

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

.important_list_item {
    color: red;
}

NO HACER:

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

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

Convención de nombres

Recomendamos usar la convención de nombres BEM (Block-Element-Modifier) para las clases CSS. BEM ayuda a que el CSS sea reutilizable y más fácil de mantener, sobre todo al usar preprocesadores como SASS.

HACER:

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

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

.button__icon {
    width: 20px;
}

NO HACER:

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

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