Resuma algunas de las experiencias de escritura de CSS que aprendí, escuché, miré y pregunté, y escribí CSS eficiente: hable sobre la eficiencia de representación de CSS, que está relacionada con la eficiencia de representación y los recursos consumidos. Parte de esto está escrito según mi propio entendimiento. No se descarta que pueda haber errores y omisiones. Puede brindar mejores opiniones.
1. Dígitos y mayúsculas y minúsculas de emparejamiento de valor de color hexadecimal
Al escribir valores de color hexadecimales, puede utilizar letras minúsculas u omitirlas en 3 dígitos. No hay datos concluyentes que demuestren si este método de escritura tiene un impacto en la eficiencia de representación del navegador, pero sí el estándar predeterminado para valores de color hexadecimales. Es una letra mayúscula y un número de 6 dígitos. No querer correr riesgos en situaciones desconocidas reduce la eficiencia del renderizado.
* Rechazado - color:#f3a;
*Se recomienda utilizar - color:#FF33AA;
2. La diferencia entre visualización y visibilidad
Se utilizan para establecer o recuperar si se muestra el objeto. La visualización de objetos ocultos no retiene el espacio físico y la visibilidad retiene el espacio físico ocupado por los objetos ocultos. Cuando el navegador muestra el espacio físico ocupado, se consumen recursos.
* En desuso - visibilidad: oculta;
* Se recomienda utilizar - display:none;
3. La diferencia entre borde: ninguno; y borde: 0;
De manera similar a la relación entre visualización y visibilidad, el espacio no está reservado y reservado respectivamente. Más sobre el borde:0; aunque el borde se puede ocultar, conservará el uso del color/estilo del borde.
* Rechazado - borde:0;
* Se recomienda utilizar - border:none;
4. Las imágenes de fondo que sean demasiado pequeñas no se deben colocar en mosaico.
Aunque el tamaño del archivo de una imagen de fondo con un ancho y alto de 1 px es muy pequeño, renderizar un panel con un ancho y alto de 500 px requiere un mosaico repetido 2500 veces. La mejora de la eficiencia de representación de la imagen de fondo está relacionada con el tamaño y el volumen de la imagen. El tamaño más grande del archivo de imagen sigue siendo de aproximadamente 70 KB.
* Rechazado: imágenes de fondo en mosaico de menos de 8 píxeles de ancho y alto
* Recomendado para usar: una imagen de fondo de tamaño y tamaño moderados
5. Filtros de Internet Explorer
Además de consumir recursos, los filtros de IE también tienen problemas de compatibilidad. Hay un filtro que hace que PNG sea transparente. Puede evitar el uso de este filtro haciendo que GIF o JPG parezcan transparentes. Se recomienda utilizar transparencia GIF únicamente en IE6, porque IE7 y superiores ya admiten transparencia PNG.
* La desaprobación y el abuso de los filtros de IE no solo consumen recursos sino que también causan problemas de compatibilidad.
*Recomendado, lo mejor es elegir otros métodos para evitar el uso de filtros.
6. *{margin:0; padding:0;} para evitar diferencias de estilo en el navegador
El comodín * inicializa todas las etiquetas y la representación del navegador consume ciertos recursos. Algunas etiquetas son casi iguales en diferentes navegadores, o algunas etiquetas ya no se recomiendan (porque no las usará). No necesitan comodines para reinicializarse. Esto puede ahorrar algunos recursos.
* En desuso, utilice * comodín
* Rechazado, la tabla b del botón div span y otras etiquetas deben incluirse en comodines para controlar los estilos de relleno internos y externos
* Se recomienda utilizar comodines de forma selectiva para controlar los estilos de relleno interior y exterior.
7. No agregue etiquetas adicionales para describir la clase o la identificación.
Si tiene un selector que utiliza id como selector de clave, no agregue nombres de etiquetas adicionales. Debido a que la identificación es única, no debe reducir la eficiencia de la coincidencia por un motivo inexistente.
* En desuso - botón#backButton { }
* En desuso - .menu-left #newMenuIcon { }
* Se recomienda utilizar - #backButton { }
*Se recomienda utilizar - #newMenuIcon { }
8. Intente elegir la clase más especial para almacenar el selector.
Una de las principales razones para reducir la eficiencia del sistema es que utilizamos demasiados selectores en las clases de etiquetas. Al agregar clases a los elementos, podemos subdividir categorías en clases para no tener que perder tiempo haciendo coincidir demasiados selectores para una etiqueta.
* En desuso - treeitem[mailfolder="true"] > treerow > treecell { }
* Se recomienda utilizar - .treecell-mailfolder { }
9. Evite los selectores descendientes
El selector descendiente es el selector que consume más recursos en CSS. Realmente consume muchos recursos, especialmente cuando el selector usa una clase de etiqueta o una clase general. En muchos casos lo que realmente queremos es un subselector. A menos que se indique explícitamente, el uso de selectores descendientes está estrictamente prohibido en UI CSS.
* En desuso: cabeza de árbol, fila de árbol, celda de árbol {}
* Mejor, pero aún no funciona (ver el siguiente artículo): treehead > treerow > treecell { }
10. No incluya subselectores en las clases de etiquetas.
No utilice subselectores en clases de etiquetas. De lo contrario, cada aparición de un elemento aumentará adicionalmente el tiempo de coincidencia. (Especialmente si parece probable que el selector coincida)
* En desuso - cabeza de árbol > fila de árbol > celda de árbol { }
* Se recomienda utilizar - .treecell-header { }
11. Preste atención al uso de todos los subselectores.
Utilice los subselectores con cuidado. Si se te ocurre una manera de no usarlo, entonces no lo uses. En particular, los árboles y menús RDF utilizan con frecuencia subselectores, como este.
* En desuso - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
¡Recuerde que las propiedades RDF se pueden copiar en plantillas! Usando esto, podemos copiar los atributos RDF en los elementos XUL secundarios que queremos cambiar en función de ese atributo.
* Se recomienda utilizar - .tree-folderpane-icon[IsImapServer="true"] { }