Cómo escribir mejor CSS

Un mejor CSS radica en la legibilidad, la mantenibilidad, la escalabilidad y la reutilización. Así que simplemente mejorarlos solucionará el problema, aunque no es tan sencillo.

1. Legibilidad

Algunas personas piensan que CSS no es un programa y no necesita legibilidad. Algunas personas piensan que CSS es legible siempre que esté escrito porque es muy simple. . Independientemente de los distintos preprocesadores, la estructura CSS nativa es realmente simple y no tiene partes que requieran programación, pero aún así puede generar confusión. Hay dos razones: primero, CSS se puede conectar en cascada, lo que implica prioridad y alcance. Si no está bien escrito, será difícil para las personas leer su significado. Segundo, hay muchas propiedades de CSS y CSS3 ha introducido muchas propiedades. con un uso único, un selector puede contener docenas de atributos. Por ejemplo, el siguiente código CSS lo escribí casualmente:

span {

-webkit-box-shadow: 6px 4px 4px red

-moz-box; -sombra: 6px 4px 4px rojo;

box-shadow: 6px 4px 4px rojo

}

div span {

borde; -ancho: 4px;

estilo de borde: punteado

color de borde: azul

}

#box {

borde izquierdo: 2px rojo sólido;

borde inferior: 2px rojo sólido

}

No parece; A primera vista, todos son bordes. Se puede decir aproximadamente que este CSS es solo para agregar una sombra roja para que el cuadro parezca más tridimensional. Pero la parte del medio parece estar desordenada, lo que se podría decir que es demasiado tonto para verlo. Sí, cuando estas 3 partes estén esparcidas entre decenas de miles de líneas de CSS, definitivamente no las verás. Entonces, algunas personas naturalmente pensaron en nuestro encantador navegador. Sí, puedes encontrar rápidamente el estilo CSS que actúa sobre el objetivo en el navegador, pero también es la fuente de todos los males. En primer lugar, supongo que no sabes para qué sirve la parte central porque la encontraste a través del navegador. Entonces quedan dos posibilidades, independientemente de si se cambia o no, hablemos de ello y veamos por qué existe. La posibilidad de tragedia en el primero es 100 y la posibilidad de tragedia en el segundo es 90, porque ya has caído en una trampa. Pronto descubriremos que hay otros lugares involucrados en su modificación, y luego exploraremos otro inexplicable. Algo en el estilo del navegador, cuando lo entiendas todo, deberías haber entendido claramente decenas de miles de líneas de código. Quizás lo más afortunado es que después de perder unas horas, descubriste que solo necesitas modificar una línea. para lograr el objetivo.

Por supuesto, podemos pensar ingenuamente que simplemente necesitamos escribirlos juntos, para que sea fácil de encontrar. Y seguiré intentando exponer el problema siguiendo esta línea de pensamiento.

Mantenibilidad

Tiene sentido que los pájaros del mismo plumaje se unan y estén acostumbrados a clasificar cosas, pero el problema es que al estilo no le importa el negocio. no importa el contenido del texto o ¿Cuál es la diferencia en la función? Lo único que le importa es el estilo, como el tamaño del texto, el espaciado, el ancho y el alto, el color, etc. Si simplemente junta los estilos de un componente, inevitablemente conducirá a la escritura repetida de pequeños fragmentos de código. ¿No crees que es grave? Déjame darte una castaña.

a un lado {

box-shadow: 6px 4px 4px #AA3343

}

nav {

sombra de caja: 6px 4px 4px #AB3633;

}

.item {

sombra de caja: 6px 4px 4px #AA3732; p>}

.item.otherStatus {

box-shadow: 6px 4px 4px #AA3132

}

Continúa con el arriba Por ejemplo, el cuadro necesita una sombra, pero ¿qué pasa si la interfaz de usuario de este proyecto tiene un estilo unificado, incluida la barra lateral, el navegador y el elemento, todos necesitan esa sombra? ¿Qué pasa si mañana el cliente o UX se da una palmada en la cabeza y este tono debería ser gris y no rojo? No sigamos pensando ingenuamente que el reemplazo global es una gota que salva vidas. En primer lugar, pocos sitios web usan rojo y desenfoque para los tonos de color. Debe usar #AA3333, un código como este. Luego encontrará que la barra lateral usa #A43433 y el navegador usa #AB3633. , y los colores correspondientes a los dos estados son diferentes. ¿Cómo es esto posible? Pero cuando abres el navegador, encontrarás que los colores que son casi iguales se han vuelto exactamente iguales en las sombras. ¿Quién puede verlo? Cuando lo usaste por primera vez, probablemente era solo un color elegido al azar en la maqueta.

Una gran cantidad de duplicaciones no solo trae redundancia de código, sino que debemos depender de la mano de obra para sincronizarlas, y es difícil para los humanos asegurarse de que sus modificaciones sean completamente consistentes, especialmente cuando introducen algo. único es inconsistente. No subestimes a CSS. La consecuencia es presión sobre el cronograma y la mano de obra. Esto último depende de si el primer ministro ha leído "El mes del hombre mítico".

Deben estar pensando algunas personas que te pidieron que escribieras así en primer lugar. Cuando leemos código, nos gusta preguntarnos, ¿por qué lo escribimos así en primer lugar? Pero poco a poco irás leyendo su historia, y a veces es involuntario. Esto nos lleva al siguiente punto a discutir.

2. Escalabilidad

La escalabilidad es algo engañoso. La llamada escalabilidad es en realidad el desempeño de desarrollar cosas nuevas sobre la base existente, pero creo que también debe haber una. requisito previo, que es mantener la legibilidad y la mantenibilidad.

La simple búsqueda de mantenibilidad es autodestructiva. La razón es muy simple. La escalabilidad es mayor cuando el código antiguo y el nuevo están completamente separados, porque no hay necesidad de preocuparse por afectar las partes anteriores. y se pueden utilizar nuevos estilos a voluntad. ¿No es sorprendente? Pensándolo de esta manera, el código que escribimos debe ser el código que preguntamos antes. Entonces responda su propia pregunta. Al principio no consideré la legibilidad y la mantenibilidad. Solo quería agregar nuevos estilos rápidamente, así que lo escribí así.

Entonces, ¿qué es una buena escalabilidad? En pocas palabras, es un producto multifuncional. Por ejemplo, una caja puede tener un estilo diferente.

3. Reutilización

Parece que de lo que he estado hablando es de repetición, así que hablemos de reutilización y cómo hacerlo. La reutilización de código CSS es un gran problema, como la granularidad, ¿deberíamos reutilizar uno o dos atributos o un gran conjunto de selectores? Otro ejemplo son los objetos, ¿deberíamos reutilizar atributos para clases o reutilizar clases para html? Estas opciones no son demasiado importantes, pero el impacto es muy significativo. Se puede decir que es un cambio en toda la estructura CSS. Sigamos usando sombras de cuadros para discutir la reutilización.

.shadow {

-webkit-box-shadow: 6px 4px 4px #A93334

-moz-box-shadow: 6px 4px 4px #A93334;

sombra de cuadro: 6px 4px 4px #A93334;

borde izquierdo: 2px sólido #A93334\9

borde inferior: 2px sólido #A93334 \9;

}

Parece que tengo una clase de sombra que puede agregar esta sombra a cualquier objetivo, pero esto genera un problema de reutilización, y el estilo CSS desordenado anterior es lo mismo. Si el elemento ya tiene otros dos bordes, entonces esta clase no se puede eliminar. Por eso, a la hora de reutilizar no sólo hay que tener en cuenta lo que se necesita, sino también lo que no se necesita. También es necesario considerar otros atributos necesarios, como visualización y desbordamiento. Debido al agente de usuario, muchos atributos están ocultos en el elemento.