Métodos y herramientas para desarrollar estilos de páginas web.

No andemos por las ramas, seamos sinceros: el proceso de escribir un buen código CSS puede ser muy, muy difícil. Muchos desarrolladores no quieren meterse con los estilos. Están listos para hacer cualquier cosa, pero no CSS.



El autor del material, cuya traducción llamamos su atención hoy, dice que a él mismo no le gustó la parte del desarrollo web relacionada con CSS. Pero no hay forma de evitarlo. Hoy en día, se presta gran atención al diseño y a lo que se llama "experiencia del usuario", pero no se puede prescindir de CSS. El propósito de este material es ayudar a todos a mejorar sus habilidades para desarrollar y aplicar estilos de página web.

Problemas de CSS

Al comienzo de un nuevo proyecto, los estilos generalmente se ven simples y claros. Digamos que hay muy pocos selectores CSS, como .title , input , #app , con los que no será difícil trabajar.

Pero, a medida que la aplicación crece, los estilos se convierten en una pesadilla. El desarrollador comienza a confundirse acerca de los selectores CSS. Descubre que escribe algo como div#app .list li.item a . Sin embargo, el trabajo no se puede detener, por lo que el programador continúa utilizando construcciones similares, el código CSS se inserta en algún lugar al final del archivo. Y realmente, ¿a quién le interesan los estilos? Y CSS en sí mismo es una tontería ... El resultado es 500 líneas de CSS terrible totalmente incompatible.

Me gustaría que leyeras este artículo y miraras tus proyectos anteriores y pensaras: "Bueno, wow, ¿cómo podría escribir esto?"

Quizás esté pensando ahora que "escribir CSS" significa usar marcos CSS. Después de todo, están destinados precisamente a facilitar el trabajo con estilos, y es con su uso que escriben un buen código CSS. Todo esto es cierto, pero los marcos CSS tienen ciertas desventajas:

• A menudo, su uso conduce a la aparición de un diseño aburrido, monótono y banal.
• Es difícil personalizar los estilos de los marcos, y la necesidad de hacer algo que vaya más allá del marco del marco puede causar dificultades.
• El marco, antes de usarlos, debe ser estudiado.

Y, al final, ¿no estás leyendo esto para familiarizarte con cierto marco? Así que hagamos CSS. Me gustaría señalar de inmediato que el material no se trata de cómo crear hermosos diseños para aplicaciones. Se trata de cómo escribir CSS de calidad que sea fácil de mantener y cómo organizarlo correctamente.

SCSS

En mis ejemplos, usaré SCSS . Este es un preprocesador CSS. De hecho, SCSS es un superconjunto de CSS. Tiene algunas características muy interesantes, como variables, construcciones anidadas, importación de archivos, mixins. Discutiremos las características de SCSS que utilizaremos.

▍Variables

En SCSS, puede usar variables. La principal ventaja de usar variables es la posibilidad de su reutilización. Imagine que tenemos un conjunto de colores para la aplicación. El color principal es el azul. Como resultado, este color se aplica literalmente en todas partes. Se utiliza en la propiedad de background-color de los botones, en la propiedad de color del título de la página y en muchos otros lugares.

Y luego, de repente, decides cambiar de azul a verde. Si realiza un reemplazo de este tipo sin utilizar variables, deberá editar todo el código, todas las líneas donde se usa el color anterior. Si usa una variable, solo tendrá que cambiar su valor. Así es como se ve el uso de variables:

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; } 

▍ Construcciones anidadas

SCSS admite construcciones anidadas. Aquí hay CSS regular:

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

Gracias al soporte de construcciones anidadas, se puede transformar de la siguiente manera:

 h1 { font-size: 5rem; color: blue; span {   color: green; } } 

Esta opción es mucho más fácil de leer, ¿verdad? Además, mediante el uso de construcciones anidadas, se reduce el tiempo para crear selectores complejos.

▍Fragmentación e importación

Cuando se trata de estilos de soporte y su legibilidad, queda claro que es imposible mantener todo el código en un archivo. Un archivo de estilo se puede usar con fines experimentales, o al desarrollar una pequeña aplicación, pero si vas a un nivel profesional ... es mejor ni siquiera intentarlo. Afortunadamente para nosotros, SCSS tiene mecanismos establecidos para organizar convenientemente el código de estilo.

Los archivos que contienen fragmentos de descripciones de estilo se pueden crear agregando un guión bajo al comienzo de sus nombres: _animations.scss , _base.scss , _variables.scss , etc.

La directiva @import se utiliza para importar estos archivos. Aquí se explica cómo usar este mecanismo:

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; } 

Puede encontrar que hay un error en este código. De hecho, el archivo que queremos importar se llama _animations.scss , y nosotros, en el archivo header.scss , usamos el comando @import "animations" . Sin embargo, no hay error. SCSS es un sistema lo suficientemente inteligente como para comprender que, en tal situación, el desarrollador se refiere al archivo correspondiente.

Esto es todo lo que necesitamos saber sobre variables, construcciones anidadas, fragmentación de estilos e importación. Hay otras posibilidades en SCSS, como mixins, herencia y otras directivas (entre ellas están @for , @if y algunas otras), pero no hablaremos de ellas aquí.

Si desea conocer mejor SCSS, eche un vistazo a la documentación relevante.

Organización CSS: Metodología BEM

No recuerdo cuántas veces usé términos universales para nombrar clases CSS. Como resultado, obtuve esos nombres, creo, familiares para todos: .button , .button .page-1 , .page-2 , .custom-input .

A menudo, simplemente no sabemos cómo nombrar ciertas entidades. Pero es muy importante. ¿Qué pasaría si estuviera desarrollando la aplicación y luego, por alguna razón, pospusiera el trabajo por varios meses? O, y esto es mucho peor, ¿qué pasa si alguien más asumió este proyecto? Si el código CSS usa nombres inapropiados, será difícil de entender sin analizar otras partes de la aplicación.

La metodología BEM (Bloque, Elemento, Modificador) es un enfoque de componentes para el desarrollo web. En particular, esta es una convención de nomenclatura de entidades. Esta metodología le permite estructurar el código, lo ayuda a dividirlo en módulos y a su reutilización. Hablemos de bloques, elementos y modificadores.

▍ bloques

Los bloques pueden considerarse como componentes. Seguramente jugaste de niño en Lego. Por lo tanto, encienda la máquina del tiempo.

¿Cómo construiste, digamos, una casa ordinaria? Aquí necesitará una ventana, techo, puerta, paredes y, en general, esto es suficiente. Todos estos son nuestros bloques. Son significativos en sí mismos.

Nombramiento: nombre del bloque - .block

Ejemplos: .card , .form , .post , .user-navigation

▍ Elementos

¿Cómo hacer una ventana de Lego? Probablemente, algunos cubos parecen marcos, por lo que si conecta cuatro de estos cubos, obtendrá una hermosa ventana. Estos son los elementos. Son partes de bloques, los necesitamos para crear bloques. Sin embargo, los elementos fuera de los bloques son inútiles.

Nombramiento: + __ + - .block__element

Ejemplos: .post__author , .post__date , .post__text

▍ Modificadores

Después de tener una ventana, es posible que desee cambiarla. Por ejemplo, pintar en un color diferente. Tales cambios en los bloques o elementos base se llevan a cabo mediante modificadores. Estas son banderas de bloques o elementos, y se utilizan para cambiar su comportamiento, apariencia, etc.

Nombramiento: + -- + - .block__element--modifier , .block--modifier
Ejemplos: .post--important , .post__btn--disabled

▍ Notas

• Cuando se usa BEM, los nombres se dan exclusivamente a las clases. Sin ID ni etiquetas, solo clases.
• Los bloques o elementos pueden estar anidados en otros bloques o elementos, pero deben ser completamente independientes. Esto es muy importante Por lo tanto, por ejemplo, no necesita asignar campos al botón porque desea colocarlo debajo del encabezado; de lo contrario, el botón estará asociado con el encabezado. Use clases de ayuda en su lugar.
• Al aplicar la metodología BEM, los archivos HTML se sobrecargarán con los nombres, pero esta es una pequeña tarifa por las características que nos brinda BEM.

▍Ejercicio

Aquí hay un ejercicio. Mire cuidadosamente los sitios que le gustan, o los que usa con más frecuencia, y piense qué puede ser un bloqueo en ellos, qué es un elemento y qué es un modificador.

Por ejemplo, esto es lo que obtuve al analizar Google Store.


Análisis del sitio

Ahora es tu turno. Mire el sitio, piense en cómo se puede mejorar. Para desarrollarse en un determinado campo, una persona necesita buscar información de forma independiente, experimentar y crear algo nuevo.

▍ Ejemplos

Aquí hay un ejemplo preparado por Codepen que demuestra las capacidades de BEM. Aquí hacemos un poco de algo como publicar en un blog determinado. Aquí está el HTML para este ejemplo.

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div> 

Aquí están los estilos SCSS:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; } 

Pero lo que sucedió al final.


Hacer "publicaciones" usando BEM

Considere otro ejemplo . Aquí, usando BEM, distinguimos los botones. Aquí está el HTML para este ejemplo.

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div> 

Aquí están los estilos SCSS.

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } } 

Y aquí está el resultado.


Diseño de botones con metodología BEM

Organizar archivos CSS: la plantilla 7-1

Hablemos de organizar archivos CSS. Lo que aprenda de esta parte de nuestra conversación le permitirá trabajar de manera más productiva y ayudar, en situaciones apropiadas, a encontrar instantáneamente el código CSS que necesita ser cambiado. Para lograr todo esto, necesitamos estudiar la plantilla "7-1".

Quizás ahora te parezca que esta plantilla se llama de alguna manera demasiado extraña. Sin embargo, no hay nada extraño aquí, y usarlo es muy simple. Para hacer esto, es suficiente observar dos reglas simples:

1. Todos los archivos con fragmentos SCSS deben colocarse en 7 carpetas diferentes.
2. Todos estos archivos deben importarse en un archivo, main.scss , ubicado en el directorio raíz en el que se encuentran todas estas carpetas.

El nombre de la plantilla, como resultado, se puede descifrar como "7 carpetas - 1 archivo". Como puede ver, no es tan difícil. Hablemos de esta plantilla con más detalle.

▍ 7 carpetas

Aquí están las carpetas en cuestión:

1. base : en esta carpeta debe colocar todo, por así decirlo, el código de "plantilla". Por código de "plantilla" aquí nos referimos a todo el código CSS que debe escribir al crear un nuevo proyecto. Por ejemplo: reglas tipográficas, animaciones, utilidades (es decir, clases como margin-right-large , text-center ), etc.
2. components : el nombre de esta carpeta indica claramente lo que se almacenará en ella. Estamos hablando de los estilos de componentes utilizados para construir páginas. Estos son botones, formularios, todo tipo de controles deslizantes, ventanas emergentes, etc.
3. layout : esta carpeta se utiliza para almacenar los estilos de elementos de diseño de página. Este es el encabezado y pie de página de la página, el área de navegación, varias secciones de la página, la cuadrícula, etc.
4. pages : a veces un proyecto necesita páginas que tengan su propio estilo específico, que es diferente del estilo de otras páginas. Las descripciones de estilo para estas páginas especiales aquí se incluyen en esta carpeta.
5. themes : si un proyecto web implica el uso de diferentes temas (por ejemplo, algo así como "modo oscuro" o "administrador"), los estilos para ellos deben colocarse aquí.
6. abstracts : todo tipo de elementos auxiliares entran en esta carpeta: funciones, variables, mixins.
7. vendors : un sitio raro sin dependencias externas. Esta carpeta contiene estilos que no son creados por aquellos que desarrollan un sitio en particular. Aquí, por ejemplo, puede guardar los archivos del proyecto Font Awesome, los estilos Bootstrap y similares.

▍File main.scss

Es en este archivo que se importan todos los fragmentos de estilos que se organizan en las siete carpetas anteriores. Algunos de este archivo pueden verse así:

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; 

No puedo estar de acuerdo con el hecho de que todo este diseño de siete carpetas se ve bastante grande. Sin embargo, debe tenerse en cuenta que esta arquitectura está diseñada para grandes proyectos. Para proyectos pequeños, puede usar la versión adaptada de la plantilla "7-1". Las características de esta versión son que puede funcionar sin algunas carpetas. Por lo tanto, aquí puede rechazar la carpeta de vendors colocando enlaces a hojas de estilo externas al proyecto en la etiqueta de link . Además, puede prescindir de la carpeta de themes , ya que, probablemente, los temas no se utilizarán en una pequeña aplicación web. Y finalmente, puede deshacerse de la carpeta de pages , ya que en este proyecto, lo más probable es que no haya páginas cuyo estilo sea muy diferente del estilo general. Como resultado, de siete carpetas, solo quedan cuatro.

Además, al hacer un pequeño proyecto, puede ir de una de dos maneras:

• Si prefiere utilizar lo que queda de la plantilla "7-1", guarde los abstracts , components , layout y base las carpetas.
• Si decide arreglárselas con una carpeta grande, todos los archivos con fragmentos de estilo, junto con el archivo main.scss , caen en esta carpeta. Puede verse más o menos así:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss 

Qué elegir exactamente depende de su preferencia.

Aquí, si está inspirado en la idea de usar SCSS, es posible que tenga una pregunta sobre cómo usar dichos estilos, ya que los navegadores no los admiten. En realidad, esta es una buena pregunta que nos lleva a la etapa final de nuestra conversación, a compilar SCSS en CSS.

Compilar SCSS a CSS

Para convertir el código SCSS a CSS, necesitará la plataforma Node.js y el administrador de paquetes NPM (o Yarn ).

Utilizaremos el node-sass , que nos permite compilar archivos .scss en archivos .scss . Esta es una herramienta de línea de comandos, es fácil de usar. A saber, la node-sass ve así:

 node-sass <input> <output> [options] 

Muchas opciones están disponibles aquí. Nos centraremos en dos:

• La opción -w permite monitorear una carpeta o archivo. Es decir, node-sass realizará un seguimiento de los cambios en el código y, cuando ocurran, compilará automáticamente los archivos en CSS. Esta característica es muy útil durante el proceso de desarrollo.
• La opción --output-style determina el estilo del archivo CSS de salida. Aquí hay varias opciones disponibles: nested , expanded , compact , compressed . Utilizaremos esta opción para construir un archivo CSS terminado.

Si eres una persona curiosa (espero que este sea el caso, porque la curiosidad es solo para beneficio del desarrollador), lo más probable es que te interese ver la documentación del node-sass .

Entonces, nos decidimos por las herramientas, ahora lo más simple sigue siendo. Para convertir SCSS a CSS, debe seguir estos pasos:

Crea una carpeta de proyecto y ve a ella:

 mkdir my-app && cd my-app 

Inicializar el proyecto:

 npm init 

Agregue el paquete node-sass al proyecto:

 npm install node-sass --save-dev 

Cree un archivo index.html , carpetas de estilos, archivo main.scss :

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

Agregue lo siguiente al archivo package.json :

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... } 

Agregue el enlace que conduce al archivo CSS compilado en la etiqueta principal del archivo index.html :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Eso es todo Ahora que está trabajando en el proyecto, ejecute el npm run watch y abra el archivo index.html en su navegador. Para minimizar CSS, ejecute el npm run build .

Utilidades Adicionales

▍ Recargar página interactiva

Es posible que desee organizar una recarga de página interactiva para aumentar la productividad. Esto es más conveniente que recargar manualmente index.html . Aquí se explica cómo hacerlo:

Instale el paquete live-server (tenga en cuenta que está instalado globalmente):

 npm install -g live-server 

Agregue el npm-run-all , según el proyecto, que le permitirá ejecutar varios scripts al mismo tiempo:

 npm install npm-run-all --save-dev 

Agregue lo siguiente a package.json :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... } 

Ahora, después de ejecutar el npm run start , usted, en el proceso de trabajar en el proyecto, verá instantáneamente los cambios que se le realizan sin volver a cargar la página manualmente.

▍ paquete de autoprefixer

En esta etapa, tiene un entorno de desarrollo personalizado, que es muy bueno. Ahora hablemos sobre las herramientas para construir un proyecto y, en particular, sobre el paquete de corrección automática . Esta es una herramienta (estamos hablando de un complemento postcss) que analiza el código CSS y agrega prefijos de proveedor de navegador a las reglas CSS utilizando datos de Can I Use .

Durante la creación del sitio, el programador puede usar algunas características nuevas que no son totalmente compatibles con todos los navegadores. Los prefijos del navegador están destinados a resolver una serie de problemas, incluido el desarrollo de aplicaciones web entre navegadores.

El código con prefijos del navegador se ve así:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

Es fácil notar que escribir dicho código es muy tedioso. Para facilitar la tarea de garantizar la compatibilidad de nuestro código CSS con varios navegadores, sin volver a complicar el proyecto, utilizaremos el paquete de autoprefixer . Aquí deberá realizar los siguientes pasos:

• Compilamos todos los archivos SCSS en un archivo CSS principal.
• Agregue los prefijos del navegador a este archivo utilizando el autoprefixer .
• Comprime este archivo CSS.

Esta, en general, es la etapa final del trabajo en el proyecto. Entonces, esto es lo que debe hacer para usar el autoprefixer :

Agregue dos dependencias al proyecto: postcss-cli y autoprefixer :

 npm install autoprefixer postcss-cli --save-dev 

Agregue el siguiente código a package.json y modifique el script de build :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... } 

npm run build , CSS-, . , , . — , , .

, ,

Resumen

, CSS, , , CSS-, , .

Estimados lectores! -?