Algunas reflexiones sobre css modular y problemas de soporte de código

Cual es la pregunta

Hola a todos, hoy quiero compartir con ustedes mi experiencia personal en los estilos de escritura, o simplemente poner mi visión sobre el problema de escribir CSS para sitios.

Parecería que en la era del desarrollo tecnológico, cuando todos los días nos enfrentamos con nuevos y nuevos marcos, preprocesadores, motores de plantillas y otras cosas, los problemas no deberían surgir en absoluto. Los desarrolladores inteligentes han creado un montón de "características" geniales para la conveniencia de crear sitios potentes y expandibles. Pero, ¿cómo usar estas herramientas correctamente en CSS? ¿Y cuáles son las dificultades?

Intentaré responder estas y otras preguntas sugiriendo mis métodos y enfoques para resolver algunos problemas.

Dura realidad

No será un secreto para nadie que los desarrolladores frontend principiantes y experimentados a menudo reciben proyectos prefabricados en los que necesita realizar cambios, rehacer el diseño, etc. En mi práctica, había muchas de esas tareas cuando trabajas con el código de otra persona, que necesitas profundizar y comprender. Y si un sitio ya preparado cayó en tus manos, abre una hoja de estilo y prepárate para ver varios miles de líneas de código .

Por supuesto, usted como desarrollador experimentado lo abrirá en algún tipo de IDE, como Visual Studio Code y con un ligero movimiento de su mano a través de la función de búsqueda y reemplazo, puede encontrar y reescribir fácilmente cualquier clase.

Pero si necesita hacer una cantidad decente de ediciones integrando parte del nuevo diseño para algunas secciones allí, ¿cuánto tiempo dedicará a esto ?

Pienso mucho Y todo lo que hagas será levemente "inútil". Imagine una situación en la que el sitio que remodeló se transfiere a otro desarrollador o después de algún tiempo se le indica que realice nuevos cambios allí .

SASS resolverá nuestros problemas

Después de digerir toda esta información, un desarrollador web típico dirá que está fuera de la situación: use preprocesadores CSS. Hay modularidad y confort y todo.

Por supuesto! Pero cualquier herramienta en manos de un programador inexperto pierde todo significado. A veces abres los estilos del sitio y ves la carpeta atesorada con el nombre "sass". Esperando un milagro la mayoría de las veces solo te decepciona.

Desglose de estilos en archivos separados: header.sass, main.sass, animation.sass, etc. Qué "brillante" es. Y no efectivo. Al abrir el siguiente archivo, te encuentras con el mismo grupo de líneas de estilo.

Cuales son las alternativas?

Es mejor guardar silencio sobre cómo los desarrolladores llaman a sus clases a veces, así como sobre las cadenas de anidamiento de estilos. Creo que todos los que se han dado la vuelta en esta área han escuchado algo sobre BEM y entienden la importancia de nombrar correctamente las clases. Con esto, vale la pena comenzar a resolver todos los problemas.

Le ofrezco un enfoque especial, una metodología especial para desarrollar sus estilos, pero no sin la ayuda de preprocesadores. Hay varias etapas para implementar esta metodología:

• El primero , como ya entendió, es el nombre apropiado de sus clases.
• El segundo es deshacerse de los estilos de anidamiento. Aquí la metodología BEM nos ayudará. Habiéndose familiarizado con los conceptos básicos de esta maravillosa documentación, puede pasar a la siguiente.
• SASS : sin esta herramienta de ninguna manera. Es él quien garantiza la modularidad y el poder de su proyecto.
• Montaje del proyecto. Creo que ha escuchado mucho acerca de los ensambladores modernos (hay mucha información sobre cómo construir un proyecto en Internet). Gulp nos ayudará aquí .

Ahora estas listo.

Ahora esencialmente

En la interpretación moderna de la interfaz de usuario, puede encontrar bastantes frameworks javascript. La mayoría de ellos dividen el sitio en partes más pequeñas, componentes. Te sugiero que hagas lo mismo cuando pienses en cómo escribir estilos. Cada botón, elemento de menú, enlace hermoso, imagen e incluso texto sin formato puede ser un componente.



Por ejemplo, en esta forma de ingresar al sitio, podemos distinguir varios componentes:

1. Formulario de inicio de sesión
2. Campos de entrada
3. Botón Enviar
4. Casilla de verificación

Y como muestra la práctica, además del botón de envío en el sitio habrá muchos más de estos botones y sería lógico mantener todos los estilos para ellos en un solo lugar. Lo mismo puede decirse de los campos de entrada, pueden estar en diferentes lugares del sitio, repitiendo su apariencia.

En base a esto, será lógico crear una carpeta separada para cada componente y mantener los estilos allí solo para ello, lo que permitirá implementar un enfoque modular. Pero eso no es todo.

Componentes internos

Como dije, puede haber muchos botones en un sitio, con diferentes colores, diferentes sangrías, todo esto es información y es muy inteligente separar esta información de los estilos. Lo que me propongo hacer.

Propongo presentar cada componente en forma de tres entidades: vars, maker y creater. En términos simples, son datos, un creador de acciones (métodos para administrar estos datos) y un creador de estilos. Ahora, lo primero es lo primero.

• Datos o vars. Estos incluyen: color del texto del botón, color de fondo del botón, relleno, radio del borde, tamaño de fuente, etc. Todos estos datos se escriben en forma de variables o una matriz asociativa en un archivo separado.
• Creador o creador de acciones. Contiene varias funciones o mixins que tomarán datos como argumentos y generarán estilos a partir de ellos.
• Creador de estilo o crema. En realidad, aquí importamos datos y métodos para nosotros mismos y los vinculamos entre sí según sea necesario.

El siguiente diagrama muestra la interacción de las tres entidades.



¿Es difícil poner todo esto en tu cabeza? Considere el ejemplo de crear el componente básico de un botón: "botón". Utilizaremos SCSS como preprocesador.

Como ya entendió, en la nueva carpeta de botones creamos tres archivos: _vars.scss, _creater.scss, _maker.scss.

_vars.scss

$button_size:( sm:5px 20px, md:15px 20px ); $button_color:( white:#ffffff ); $button_back:( blue: #00e5e5 ); /* This is component config, it must be below other variables */ $button_config:( padding:$button_size, color:$button_color, background:$button_back ); 

Como vemos, los datos se presentan en forma de una matriz asociativa. Todos los estilos individuales se incluyen en el conjunto principal button_config. Para crear nuevos estilos, el desarrollador solo necesita crear una nueva matriz, llenarla con los valores necesarios y conectarla a button_config.

_creater.scss:

 @import "vars"; @import "maker"; .button{ @include InitialComponent($button_config); } 

Aquí importamos datos y creadores de acciones. Luego, a través de la combinación InitialComponent que está registrada en maker, inicializamos todos los estilos pasando la variable button_config. Y aquí está la magia. Todas las clases necesarias se crean de acuerdo con los nombres de BM.

El resultado de la ejecución serán los estilos:

 .button_padding_sm { padding: 5px 20px; } .button_padding_md { padding: 15px 20px; } .button_color_white { color: #ffffff; } .button_background_blue { background: #00e5e5; } 

¿Y cuál es el éxito aquí?

La ventaja de este enfoque no se siente de inmediato. Pero a medida que el proyecto crece, comprende la conveniencia de tal metodología. Si necesita cambiar el color de varios botones en diferentes páginas, no necesita buscar clases en un montón de estilos. Todo lo que se necesita es abrir la carpeta de botones y, en consecuencia, el archivo de datos y reemplazar el estilo deseado allí.

¿Y si necesitas crear un nuevo botón?

Entonces es aún más fácil, escribimos los estilos necesarios en una matriz ya preparada o creamos uno nuevo y lo conectamos allí en la configuración y se crean las clases.

Todo esto es muy conveniente, especialmente cuando transfiere sus componentes de un proyecto a otro y la velocidad de los estilos de escritura aumenta varias veces, dejando solo una sensación de comodidad y satisfacción de que el proyecto está en orden.

Este enfoque se ha probado con éxito en muchos proyectos y la implementación de esta metodología pronto estará disponible gratuitamente con documentación en ruso e inglés.