ID y denominación de clase
Utilice siempre ID y nombres de clase que reflejen el propósito y uso del elemento, u otros nombres comunes. En lugar de apariencias y nombres oscuros.
Se deben preferir los nombres que sean específicos y reflejen el propósito del elemento porque son los más comprensibles y los que tienen menos probabilidades de cambiar.
Los nombres comunes son simplemente nombres alternativos para múltiples elementos. Son iguales entre sus elementos hermanos y no tienen ningún significado especial.
Distinguirlos para que tengan un significado especial y, a menudo, sean necesarios como "ayudantes".
Aunque la semántica de los nombres de clase y los ID no tiene significado práctico para el análisis por computadora,
Los nombres semánticos suelen ser la elección correcta porque representan información que no impone limitaciones expresivas.
No recomendado
.fw-800 {
peso de fuente: 800;
}
.rojo {
color: rojo;
}recomendar
.pesado {
peso de fuente: 800;
}
.importante {
color: rojo;
} Evitación razonable de identificaciones
Normalmente, los ID no se deben aplicar a los estilos.
Los estilos de ID no se pueden reutilizar y solo puedes usar un ID una vez por página.
El único uso eficaz de las identificaciones es determinar la posición dentro de una página web o de un sitio completo.
No obstante, siempre debes considerar usar class en lugar de id a menos que solo lo uses una vez.
No recomendado
#contenido .título {
tamaño de fuente: 2em;
}recomendar
.contenido .título {
tamaño de fuente: 2em;
} Otro argumento en contra del uso de ID es que los selectores que contienen ID tienen una gran ponderación.
Un selector que contiene solo un ID tiene un peso mayor que un selector que contiene 1000 nombres de clase, lo que lo hace extraño.
// Este selector tiene un peso mayor que el siguiente selector #content .title {
color: rojo;
}
// que este selector!
cuerpo html div.content.news-content .title.content-title.important {
color: azul;
} Evite los nombres de etiquetas en los selectores CSS
Al construir selectores, debes utilizar nombres de clases claros, precisos y semánticos. No utilice selectores de etiquetas. Es más fácil de mantener si solo le importan los nombres de sus clases, no los elementos de su código.
Pensando desde una perspectiva de separación, las etiquetas/semántica html no deben asignarse en la capa de presentación.
Podría ser una lista ordenada que deba cambiarse a una lista desordenada o un div que deba convertirse en un artículo.
Si solo usa nombres de clases significativos,
Y sin usar selectores de elementos, solo necesita cambiar su marcado html sin cambiar su CSS.
No recomendado
div.content > encabezado.content-header > h2.title {
tamaño de fuente: 2em;
}recomendar
.content > .content-header > .title {
tamaño de fuente: 2em;
} lo más preciso posible
Muchos desarrolladores de aplicaciones para el usuario no utilizan subselectores directos al escribir cadenas de selectores (nota: la diferencia entre subselectores directos y selectores descendientes).
A veces, esto puede provocar problemas de diseño dolorosos y, en ocasiones, puede consumir mucho rendimiento.
Sin embargo, en cualquier caso, esta es una muy mala práctica.
Si no estás escribiendo un selector muy general que deba coincidir con el final del DOM, siempre debes considerar subselectores directos.
Considere el siguiente DOM:
<artículo clase="contenido noticias-contenido"> <span class="title">Evento de noticias</span> <div class="contenido-cuerpo"> <div class="título contenido-título"> Mira esto </div> <p>Este es el contenido de un artículo de noticias</p> <div class="avance"> <div class="title">Comprar esto</div> <div class="teaser-content">¡Sí!</div> </div> </div> </artículo>
El siguiente CSS se aplicará a los tres elementos con clase de título.
Luego, para resolver los diferentes estilos en la clase de título en la clase de contenido y la clase de título en la clase de avance, esto requerirá selectores más precisos para reescribir sus estilos nuevamente.
No recomendado
.contenido .título {
tamaño de fuente: 2rem;
}recomendar
.contenido > .título {
tamaño de fuente: 2rem;
}
.content > .content-body > .title {
tamaño de fuente: 1,5rem;
}
.content > .content-body > .teaser > .title {
tamaño de fuente: 1,2rem;
} atributo de abreviatura
CSS proporciona varias propiedades abreviadas (como fuente) que deben usarse siempre que sea posible, incluso cuando solo se establece un valor.
El uso de atributos abreviados es útil para la eficiencia y legibilidad del código.
No recomendado
código css:
estilo de borde superior: ninguno; familia de fuentes: palatino, georgia, serif; tamaño de fuente: 100%; altura de línea: 1,6; fondo acolchado: 2em; relleno-izquierda: 1em; relleno-derecha: 1em; parte superior acolchada: 0;
recomendar
código css:
borde superior: 0; fuente: 100%/1,6 palatino, georgia, serif; relleno: 0 1em 2em;
0 y unidades
Omita las unidades que siguen al valor "0". No utilice unidades después de un valor 0 a menos que exista un valor.
No recomendado
código css:
fondo de relleno: 0px; margen: 0em;
recomendar
código css:
fondo de relleno: 0; margen: 0;
Notación hexadecimal
Siempre que sea posible, utilice notación hexadecimal de 3 caracteres.
Los valores de color permiten una representación como esta,
La representación hexadecimal de 3 caracteres es más corta.
Utilice siempre números hexadecimales en minúscula.
No recomendado
color: #FF33AA;
recomendar
color: #f3a;
Separador entre ID y nombre de clase
Utilice un guión (guión) para separar las palabras del ID y del nombre de la clase. Para mejorar la comprensión de la lección, no utilice ningún carácter (incluido ninguno) excepto guiones (guiones) para conectar palabras y abreviaturas en el selector.
Además, como estándar, el selector de atributos predeterminado reconoce guiones (guiones) como separadores de palabras para [atributo|=valor],
Por lo tanto, es mejor utilizar guiones como separadores.
No recomendado
.imagen de demostración {}
.error_status {} recomendar
#id-video {}
.muestra de anuncios {}trucos
Evite la detección de agentes de usuario y los “trucos” de CSS; primero pruebe con un enfoque diferente. Las diferencias de estilo se resuelven fácilmente mediante la detección de agentes de usuario o filtros, soluciones y trucos especiales de CSS. Ambos métodos deben considerarse como último recurso para lograr y mantener una base de código eficiente y manejable. En otras palabras, detección de agentes de usuario y hacks a largo plazo.
Perjudicará al proyecto, ya que los proyectos siempre deben tomar el camino de menor resistencia. Dicho esto, es fácil permitir que la detección de agentes de usuario y los hacks se utilicen con demasiada frecuencia en el futuro.
Orden de declaración
Este es un resumen aproximado del orden en el que se escriben las propiedades CSS dentro de un selector. Esto es importante para garantizar una mejor legibilidad y escaneabilidad.
Como práctica recomendada, debemos seguir la siguiente secuencia (que debe estar en el orden de la siguiente tabla):
Propiedades estructurales:
mostrar
posición, izquierda, arriba, derecha, etc.
desbordamiento, flotación, limpieza, etc.
margen, relleno
Propiedades expresivas:
fondo, borde, etc.
fuente, texto
No recomendado
.caja {
familia de fuentes: 'Arial', sans-serif;
borde: 3px sólido #ddd;
izquierda: 30%;
posición: absoluta;
transformación de texto: mayúsculas;
color de fondo: #eee;
derecha: 30%;
visualización: bloque;
tamaño de fuente: 1,5rem;
desbordamiento: oculto;
relleno: 1em;
margen: 1em;
}recomendar
.caja {
mostrar: bloquear;
posición: absoluta;
izquierda: 30%;
derecha: 30%;
desbordamiento: oculto;
margen: 1em;
relleno: 1em;
color de fondo: #eee;
borde: 3px sólido #ddd;
familia de fuentes: 'Arial', sans-serif;
tamaño de fuente: 1,5rem;
transformación de texto: mayúsculas;
}fin de la declaración
Para garantizar la coherencia y la extensibilidad, cada declaración debe terminar con un punto y coma y envolver cada declaración en una nueva línea.
No recomendado
código css:
.prueba {
pantalla: bloque; altura: 100px
}recomendar
código css:
.prueba {
mostrar: bloquear;
altura: 100 píxeles;
}Fin del nombre del atributo
Utilice un espacio después de los dos puntos en el nombre de la propiedad. Por razones de coherencia,
Utilice siempre un espacio entre el atributo y el valor (pero ningún espacio entre el atributo y los dos puntos).
No recomendado
código css:
h3 {
peso de fuente: negrita;
}recomendar
código css:
h3 {
peso de fuente: negrita;
}Separación de selectores y declaraciones.
Utilice siempre una nueva línea para cada selector y declaración de propiedad.
No recomendado
código css:
a:enfoque, a:activo {
posición: relativa; arriba: 1px;
}recomendar
código css:
h1,
h2,
h3 {
peso de fuente: normal;
altura de línea: 1,2;
}Separación de reglas
Las reglas siempre están separadas por una línea en blanco (doble nueva línea).
recomendar
código css:
HTML {
fondo: #fff;
}
cuerpo {
margen: automático;
ancho: 50%;
}cotizaciones CSS
Encierre los selectores de atributos o los valores de los atributos entre comillas dobles ("") en lugar de comillas simples (").
No utilice comillas para los valores URI (url()).
No recomendado
código css:
@import url('//cdn.com/foundation.css');
HTML {
familia de fuentes: 'open sans', arial, sans-serif;
}
cuerpo: después {
contenido: 'pausa';
}recomendar
código css:
@importar URL(//cdn.com/foundation.css);
HTML {
familia de fuentes: "open sans", arial, sans-serif;
}
cuerpo: después {
contenido: "pausa";
}Anidamiento de selectores (SCSS)
En Sass puedes anidar selectores, lo que puede hacer que el código sea más limpio y legible. Anide todos los selectores, pero trate de evitar anidar selectores sin ningún contenido.
Si necesita especificar algunos atributos de estilo para elementos secundarios y el elemento principal no tendrá atributos de estilo,
Se pueden utilizar cadenas de selector CSS regulares.
Esto evitará que su script parezca demasiado complejo.
No recomendado
código css:
// No es un buen ejemplo al no hacer uso del anidamiento en absoluto
.contenido {
mostrar: bloquear;
}
.content > .news-article > .title {
tamaño de fuente: 1,2 em;
}No recomendado
código css:
// Usar anidamiento es mejor pero no en todos los casos
// Evite anidar cuando no haya atributos y use cadenas de selección en su lugar
.contenido {
mostrar: bloquear;
> .artículo-noticia {
> .título {
tamaño de fuente: 1,2 em;
}
}
}recomendar
código css:
// Este ejemplo adopta el mejor enfoque al anidar, pero utiliza cadenas de selección siempre que sea posible
.contenido {
mostrar: bloquear;
> .artículo-de-noticia > .título {
tamaño de fuente: 1,2 em;
}
}Introducción de líneas en blanco en el anidamiento (SCSS)
Deje una línea vacía entre los selectores anidados y las propiedades CSS.
No recomendado
código css:
.contenido {
mostrar: bloquear;
> .artículo-noticia {
color de fondo: #eee;
> .título {
tamaño de fuente: 1,2 em;
}
> .nota al pie del artículo {
tamaño de fuente: 0,8 em;
}
}
}recomendar
código css:
.contenido {
mostrar: bloquear;
> .artículo-noticia {
color de fondo: #eee;
> .título {
tamaño de fuente: 1,2 em;
}
> .nota al pie del artículo {
tamaño de fuente: 0,8 em;
}
}
}Consulta de medios contextuales (SCSS)
En Sass, también puedes utilizar consultas de medios contextuales cuando anidas tus selectores.
En Sass, puede utilizar consultas de medios en cualquier nivel de anidamiento.
El CSS resultante se transformará para que la consulta de medios se represente como un selector ajustado.
Esta tecnología es muy conveniente,
Ayuda a mantener el contexto al que pertenece la consulta de medios.
El primer enfoque le permite escribir sus estilos móviles primero y luego utilizar consultas de medios contextuales para proporcionar estilos de escritorio donde los necesite.
No recomendado
código css:
// Este primer ejemplo móvil parece CSS simple donde se repite toda la estructura de SCSS
// en la parte inferior de una consulta de medios. Esto es propenso a errores y dificulta el mantenimiento, ya que no es tan fácil de relacionar.
// el contenido en la consulta de medios al contenido en la parte superior (estilo móvil)
.página de contenido {
tamaño de fuente: 1,2rem;
> .principal {
color de fondo: humo blanco;
> .ultimas-noticias {
relleno: 1rem;
> .artículo-noticia {
relleno: 1rem;
> .título {
tamaño de fuente: 2rem;
}
}
}
> .contenido {
margen superior: 2rem;
relleno: 1rem;
}
}
> .pie de página {
margen superior: 2rem;
tamaño de fuente: 1rem;
}
}
@media pantalla y (ancho mínimo: 641px) {
.página de contenido {
tamaño de fuente: 1rem;
> .principal > .últimas-noticias > .artículo-de-noticias > .título {
tamaño de fuente: 3rem;
}
> .pie de página {
tamaño de fuente: 0,8rem;
}
}
}recomendar
código css:
// Este es el mismo ejemplo anterior pero aquí usamos consultas de medios contextuales para poner los diferentes estilos
// para diferentes medios en el contexto correcto.
.página de contenido {
tamaño de fuente: 1,2rem;
@media pantalla y (ancho mínimo: 641px) {
tamaño de fuente: 1rem;
}
> .principal {
color de fondo: humo blanco;
> .ultimas-noticias {
relleno: 1rem;
> .artículo-noticia {
relleno: 1rem;
> .título {
tamaño de fuente: 2rem;
@media pantalla y (ancho mínimo: 641px) {
tamaño de fuente: 3rem;
}
}
}
}
> .contenido {
margen superior: 2rem;
relleno: 1rem;
}
}
> .pie de página {
margen superior: 2rem;
tamaño de fuente: 1rem;
@media pantalla y (ancho mínimo: 641px) {
tamaño de fuente: 0,8rem;
}
}
}Orden anidado y selectores principales (SCSS)
Al utilizar la funcionalidad de anidamiento de Sass,
Lo importante es tener un orden de anidación claro,
El siguiente es el orden que debe tener un bloque SCSS.
Atributos de estilo del selector actual <br/>Selector de pseudoclase del selector principal (:primera letra, :hover, :activo, etc.)
Elementos de pseudoclase (:antes y :después)
Estilo de declaración del selector principal (.seleccionado, .activo, .ampliado, etc.)
Utilice el subselector de consulta de medios contextual de Sass como pieza final
El siguiente ejemplo debería ilustrar cómo este orden logrará una estructura clara mientras se utiliza el selector principal de Sass.
Recomendado
código css:
.producto-teaser {
// 1. Atributos de estilo
pantalla: bloque en línea;
relleno: 1rem;
color de fondo: humo blanco;
color: gris;
// 2. Pseudo selectores con selector principal
&: flotar {
color: negro;
}
// 3. Pseudoelementos con selector principal
&:antes {
contenido: "";
mostrar: bloquear;
borde superior: 1px gris sólido;
}
&:después {
contenido: "";
mostrar: bloquear;
borde superior: 1px gris sólido;
}
// 4. Clases estatales con selector principal
&.activo {
color de fondo: rosa;
color: rojo;
// 4.2. Pseuso selector en selector de clase de estado
&: flotar {
color: rojo oscuro;
}
}
// 5. Consultas de medios contextuales
@pantalla multimedia y (ancho máximo: 640 px) {
mostrar: bloquear;
tamaño de fuente: 2em;
}
// 6. Subselectores
> .contenido > .título {
tamaño de fuente: 1,2 em;
// 6.5. Consultas de medios contextuales en el subselector
@pantalla multimedia y (ancho máximo: 640 px) {
espacio entre letras: 0,2 em;
transformación de texto: mayúsculas;
}
}
}