Prácticas recomendadas de CSS: nueve signos de un CSS incorrecto

CSS o hojas de estilo en cascada: el lenguaje que define cómo debe verse una página web y, a veces, comportarse. A menudo, los desarrolladores web lo pasan por alto como un lenguaje "fácil" que no requiere demasiada atención. Memorizar algunas de las propiedades más comunes, el flujo general y buscar en Google propiedades más oscuras es el camino a seguir. Pero, como saben los desarrolladores más experimentados, ningún lenguaje merece ser pasado por alto, ya que siempre hay buenas y malas formas de hacer algo.

Con CSS, es muy fácil hacer las cosas de manera incorrecta, ya que no hay un compilador que arroje errores, no hay advertencias ni avisos de implementaciones incorrectas. Un lenguaje de programación como JavaScript tiene un montón de herramientas que rastrean la buena calidad del código, algunas incluso envían mensajes al desarrollador de que una determinada función no se ha implementado de la manera correcta.

En esta publicación relativamente corta, veremos algunos de los problemas comunes que enfrentan los desarrolladores y cómo solucionarlos. No se trata de detalles de implementación específicos para un componente visual específico. En cambio, la lista se centra en los procesos de pensamiento, la arquitectura y los enfoques.

La complejidad CSS

¿CSS es difícil? ¡No! Definitivamente no, tiene algunas reglas estructurales muy básicas. Tienes selectores (clase, id, elemento), tienes propiedades y tienes alcance. Es mucho menos que un lenguaje como C, Java o PHP. Un desarrollador puede tener la idea completa en unos minutos de lectura y comenzar a diseñar. Por supuesto, para saber la diferencia entre margen y relleno, puede echar un vistazo a w3schools, pero cuándo usarlo requerirá algo de experiencia. Pero no es ciencia espacial.

Ahora, lo que hace las cosas un poco más complejas son todas las formas en que los selectores compiten para sobrescribir la siguiente, y cómo una propiedad afecta a otra (pantalla: bloque vs pantalla: en línea, por ejemplo). Luego tenemos detalles más pequeños como colapso de márgenes, apilamiento de índice z, propiedades de rendimiento de GPU vs CPU, el modelo de caja y propiedades de tipografía.

Además de todo eso, las nuevas funciones de CSS que no siempre se implementan de la misma manera en todos los navegadores, algunas incluso no se implementan en absoluto y otras requieren propiedades diferentes.

Si nos fijamos en los dos párrafos anteriores, veremos las dos etapas principales a las que se enfrentan los desarrolladores de front-end cuando trabajan con CSS: una es la pregunta “ Oh, ¿eso es todo? "Y el segundo es" Oh mierda, eso no fue todo ". Esto es lo que significa "complejidad CSS"

Hay muchas cosas pequeñas entrelazadas que son difíciles de escalar. Si construye solo un componente, es fácil: diseña lo que ve y funciona. Pero coloque ese único componente en una aplicación más grande y se aplicarán estilos adicionales. Puede terminar con la misma clase que otra cosa (como .button) y sus estilos se aplicarán en toda la aplicación, rompiendo todo. ¡Es estresante!

CSS de WordPress: Guía básica para principiantes

Cómo escribir CSS: luchando contra su complejidad

Hay algunas soluciones que han surgido personas inteligentes, una descripción general sería:

• Convenciones de nomenclatura CSS como BEM, SMACSS y otras, que definen reglas de nombres de clases que reducirían la posibilidad de conflictos.
• CSS en JS es un método más nuevo que prácticamente te permite escribir componentes CSS en archivos JS (suena mal, se ve mal, pero al menos tiene algún sentido). Mayormente válido con React, Vue y otros.
• Los módulos CSS son un enfoque más sensato de CSS en JS para alguien que termina con todos los estilos en un solo archivo. Los módulos CSS encapsulan los estilos de cada componente para que no se filtren a otros componentes, lo que facilita la reutilización. ¡También reduce mucho el estrés!

La primera: las convenciones de nomenclatura es probablemente la más difícil de implementar, ya que no tiene herramientas para ayudarlo. Depende de usted, como desarrollador, comprender y aplicar la convención. Todavía tienes que pensar en los nombres de las clases, todavía no deberían chocar y luego tienes que hacer que todo el equipo lo siga. ¡Bastante difícil!

CSS en JS y los módulos CSS son correcciones de implementación. Cambian la salida del código como un todo, lo que prácticamente hace que sea imposible filtrar estilos. Pero requieren un pensamiento y una configuración de construcción completamente diferentes, algo que no siempre es factible o deseado.

El mejor consejo aquí sería: Estudie las convenciones de nomenclatura más comunes y exitosas, use la que se adapte a los estándares de codificación de su empresa o ecosistema. Comprenda la separación de componentes y comience a pensar en términos de alcance y unidades singulares que crean una gran aplicación. No es una aplicación grande desde el principio, eso sería imposible de administrar.

Si está trabajando en una pila que incluye una biblioteca como React o un marco como Vue, busque herramientas adicionales que le permitan administrar sus estilos con ellos. Para cualquier desarrollador de CSS de nivel principiante a intermedio, ¡serían de gran ayuda! Y es posible que nunca desee deshacerse de ellos a menos que se presente algo mejor.

¡Esté atento a las nuevas herramientas! Nos impiden luchar contra los problemas que la comunidad de desarrolladores ya ha encontrado, solucionado y ha proporcionado una forma de solucionarlos.

Ahora que describimos lo que significa CSS Complexity y algunos consejos de inicio para combatirlo, profundicemos en una descripción general más detallada y proporcionemos ejemplos directos.

Consejos de diseño de sitios web: cómo mejorar su juego en el diseño web

Nueve señales de un CSS incorrecto

Esta lista definitivamente no está completa, ni mucho menos. Lamentablemente, enfrentará innumerables otros problemas y, con suerte, encontrará soluciones directas a un problema específico en sitios como Stackoverflow.
Sin embargo, si desea mejorar su juego, cuando soluciona un problema con algunas líneas de CSS, debe comprender lo que hacen. ¿Por qué tuvo que cambiar su marcado y por qué tuvo que cambiar algunos selectores, propiedades?

Los márgenes actúan de forma extraña

Un problema común que enfrentan los desarrolladores es cuando dos elementos no suman sus márgenes (superior / inferior). Por ejemplo, tenemos dos elementos <p> con margen: 20px 0 ;. El espacio total entre ellos es 20px, no 40. Esto se debe al colapso de los márgenes. Excepto si los elementos flotan o están absolutamente posicionados. Este "Excepto" está en casi todas partes para casi todas las definiciones.

Índice Z: 9999999 y todavía no está en la parte superior del índice Z: 1

En primer lugar, rara vez es necesario escribir índices Z tan altos. Incluso he visto valores como 99999999999999 o más. Primero, el valor máximo del índice z es 2147483647, por lo que todo lo anterior es inútil. En segundo lugar, no funciona así. Los elementos que están en la parte superior están definidos por el contexto de apilamiento, no solo por el valor del índice z. Vea el gráfico a continuación:

No animando las propiedades correctas

Es una pregunta bastante simple, pero algunos desarrolladores luchan cuando se trata de animaciones y el enfoque a seguir. Primero, ¿qué se puede animar? Cualquier cosa que pueda tener un valor inicial, un valor final y cualquier cosa intermedia. La opacidad es una propiedad de este tipo, puede comenzar desde 0, terminar en 1 y agregar infinitos pasos entre 0.3, 0.6758, 0.9875, etc. No puede animar la "pantalla" porque no hay pasos intermedios entre la línea y la cuadrícula.

Animaciones ineficientes

La razón más común para los FPS incorrectos en las animaciones se debe a que las propiedades incorrectas están animadas. Si cambia la propiedad "izquierda" de un elemento absoluto, estará utilizando la CPU para calcular. Sin embargo, si usa transform, entonces sería la GPU. Y la GPU como todos sabemos es mejor para hacer gráficos.

Pero, ¿cómo animarías la sombra, cuando no tiene otra alternativa como left / transform? Bueno, ¡anima la opacidad! Tiene dos elementos, uno con inicio, estado y otro con estado final. Luego, difumina el comienzo hacia afuera y el final hacia adentro. Esto haría que pareciera que la sombra se expande, donde de hecho solo se desvanece.

NO anime elementos que afecten el diseño si es posible. Los cálculos de diseño son costosos y una CPU solo puede hacer una cantidad limitada de cálculos. A menudo, menos de uno cada 16 ms, lo que dará como resultado FPS por debajo de 60.

Selectores demasiado profundos

¿Qué es un modificador? Una clase, que puede agregar a otra clase y reemplazar algunas de sus propiedades. Ejemplo: .button tiene color: rojo. .button-primary, tiene color: azul. Entonces, cuando agrega .button-primary a .button, desea terminar con un color azul. Pan comido. Aunque, no siempre es tan fácil. Y no siempre es un componente como este.

A veces, queremos sobrescribir un componente, hijo de otro componente en una página específica. Así que terminamos con algo como esto: .nombre-página .nombre-sección .componente-1 .componente-2 {…} Ya tiene cuatro niveles de profundidad. Pero lo que resulta es que simplemente podemos hacer .page-name .componen-2 {…}. ¡Cuanto más corto, mejor! Porque si sucede que por alguna razón tienes que sobrescribir ese nuevo estilo, no tienes que profundizar 5 niveles, luego 6 y luego más.

Los selectores profundos dan miedo y la gente termina usando! Important. ! important debe usarse cuando desee sobrescribir estilos en línea sobre los que no tiene control. De lo contrario, es una señal de alerta de que no está haciendo algo bien.

Archivo demasiado grande

Ahora, por supuesto, para una aplicación grande habría muchos estilos, y eso es completamente comprensible. ¿Pero es siempre tan grande? Una mala forma de extender las clases en SASS (a través de mixins) generaría grandes cadenas de selectores, que tardan unos segundos en desplazarse para verlas todas. Una extensión adecuada reduciría mucho ese archivo. Incluso podría duplicar el tamaño.

Los marcos incluidos, de los cuales solo se usan algunas propiedades, también son una razón común para archivos grandes. Combine bootstrap / foundation, font-awesome, animate.css y algunos otros marcos / bibliotecas similares y terminará con un archivo enorme del que usa aproximadamente un 2%. Limpia, mantenlo ordenado y usa solo lo que realmente se necesita. Muchas veces ni siquiera es necesario un marco.

Framework cuando no es necesario

Bootstrap, Foundation, UIKit y todos los demás marcos son geniales. Resuelven un problema real y son extremadamente valiosos para la comunidad de desarrollo web. No es necesario conocer tan bien HTML o CSS para crear paneles y sitios. Pero aléjese de ese caso, comience a escribir algo de CSS y encontrará algunos problemas.

• Tienes que entender correctamente cómo construirlos y cómo incluirlos.
• Tienes que leer su documentación para encontrar la configuración personalizada y los mixins que proporcionan.
• Tienes que seguir su marcado y enseñar a tu equipo a hacerlo.
• Tienes que entender realmente cómo extender y diseñar para crear una vista única.

Incluirlos correctamente significa que usa solo lo que necesita. Para que un marco de este tipo le ayude en lugar de prohibirle la creación de algo personalizado, debe saber que su funcionamiento interno es mejor que el promedio. Y para lograr cualquier diseño personalizado, deberá modificar la configuración y las propiedades. Y luego escribe algo de CSS personalizado. Y ese CSS personalizado para sobrescribir todo lo que ofrece el marco.

Entonces, si no hay una necesidad real de un marco CSS de este tipo, pero todavía hay uno y no se ha utilizado correctamente, esta es una señal de alerta de que algo anda mal. Y cuando empiece una vez con él, lo más probable es que termine usándolo hasta el final del ciclo de vida del proyecto. Entonces es una decisión importante.

No permitir que el contenido defina el tamaño

Este es más un problema de nivel principiante, pero es muy común. Debes darle al contenido la libertad que se merece.

Por ejemplo, no desea establecer la propiedad de ancho del sitio en 1200px. Quieres establecer el ancho máximo en 1200px. De esa forma, la ventana gráfica permitirá que su sitio siga respondiendo.

Entonces, un campo de entrada no debería tener una altura de 40px, debería tener un relleno de 1em. Ahora, el tamaño de fuente, el contenido es lo que define el tamaño. Y si el contenido del interior crece, el elemento no se romperá.

Esta forma de pensar a la hora de definir tamaños sigue siendo importante en toda la aplicación. Y cada propiedad tiene que considerarlo. Idealmente, no establezca% de ancho en el área de contenido, porque entonces también tendrá que escribir consultas de medios.

Si tenía un ancho máximo, cuando su navegador se encoge por debajo de ese ancho máximo, el contenido llenará el ancho del navegador y luego se encogerá normalmente. De lo contrario, tendría que escribir una consulta de medios para ese tamaño. Y luego para cualquier otro tamaño personalizado escrito en el sitio. Esta es una complejidad añadida debido al mal enfoque. Casi lo mismo que todos los demás puntos que ya hemos discutido.

Hacks de JavaScript

¡JavaScript puede hacer maravillas! Pero no siempre es necesario. Puede hacer mucho con solo CSS que esté bien soportado, no requiera funcionalidad (que se pruebe mejor automáticamente después) y no requiere que sus otros miembros de FE también conozcan JS.

Por supuesto, existe la funcionalidad de alternancia estándar, donde puede usar una entrada de casilla de verificación para cambiar los estilos cuando: marcado, existe la superposición de fondo que se puede activar fácilmente y hay propiedades como contador para crear más que simples listas <ol> .

El consejo aquí es buscar primero soluciones CSS. Digamos que quieres crear una ventana emergente. Aparece en el medio (posición: fija). Luego, desea cerrarlo desde el icono [X] o al hacer clic alrededor de él. En JS, necesitaría escribir eventos que se activarían en cualquier cosa excepto en el contenido emergente. Pero aún dispara en la [X] que está en el contenido emergente.

En cambio, desde CSS puede escribir otro <div> que tenga 100vw, 100vh de tamaño e índice z justo debajo de la ventana emergente. Luego, simplemente puede apuntar a ese div en JS, que es una línea.

Otro ejemplo: desea un botón que pueda colocar en el contenido, que "expandirá" cualquier contenido que le siga. Simple con CSS, un poco más complejo con JS. Con CSS puedes hacer algo como esto:

 Label.button: estiliza el botón visualmente.

 Entrada: no (: marcada) ~ * {display: none} - oculta todo lo que sigue en el mismo contenedor.

Ese bit "en el mismo contenedor", necesita lógica personalizada en JS. También debe seleccionar todos los elementos, lo que requiere atravesar el árbol DOM. Y luego aplíqueles estilos CSS, que terminarían en la etiqueta style = ””, que a su vez requeriría! Important si por alguna razón tiene que abordarlos. EN CSS, afortunadamente, es extremadamente simple.

El camino para convertirse en un buen diseñador web

Conclusión

Como puede ver, estos son muy pocos problemas comunes. Para cubrirlos todos, se necesitaría un libro. Pero con suerte, le darán un buen punto de partida y le recordarán que piense en cualquier problema potencial que pueda surgir debido al enfoque incorrecto. La localización de estos problemas conlleva mucha experiencia y mucha lectura. Y si llegó a la conclusión aquí, entonces está en el camino correcto con la lectura, ¡ahora es el momento de practicar!