Escribimos CSS mejor y más hermoso

Para ser honesto: escribir un buen CSS es difícil.
A muchos desarrolladores no les gusta escribir CSS. ¡Cualquier cosa, pero no eso! No CSS.

Cuando tenía que abordar CSS al desarrollar aplicaciones, esta no era la parte más alegre del trabajo. Pero no se puede evitar, ¿verdad? Hoy es tan importante complacer al usuario con el diseño de la aplicación que sin CSS, nada.

Cuando el proyecto apenas comienza, todo va bien. Solo tiene un par de selectores: .title , input , #app , tan fácil como #app .

Pero gradualmente la aplicación crece y da miedo mirar CSS: no es tan fácil descubrir todos estos selectores. Empiezas a escribir algo como div#app .list li.item a , algunas piezas de código se repiten una y otra vez, y vuelcas toda tu escritura al final del archivo: no te importa, porque CSS apesta. El resultado son 500 líneas de código CSS que no pueden ser compatibles.


Soy yo cuando peleo CSS

Traducido a Alconost

Mi desafío hoy es enseñarte cómo escribir CSS mejor. Quiero que veas proyectos antiguos y pienses: “¡Oh, dioses! ¿Cómo pudiste escribir esto?

¿Pero qué pasa con los marcos CSS? - usted pregunta Después de todo, fueron inventados para esto: para escribir un buen código CSS.

Derecho Pero tienen desventajas:

• El diseño de salida es a menudo aburrido.
  
• Puede ser difícil realizar las configuraciones necesarias o ir más allá de las capacidades del marco.
  
• Para usar marcos, primero debe estudiarlos.
  

Bueno, estás leyendo este artículo, eso significa que hay una razón, ¿verdad? Entonces, sin más preámbulos, adelante, aprende a escribir CSS mejor.

Nota Este artículo no trata sobre cómo crear hermosas aplicaciones, sino sobre cómo escribir código CSS compatible y cómo organizarlo.

SCSS

En los ejemplos, usaré SCSS .

SCSS es un preprocesador de CSS, esencialmente un superconjunto de CSS que agrega algunas características interesantes, como variables, anidamiento, importaciones e impurezas ("mixins").

A continuación, te diré qué oportunidades usaremos aquí.

Variables

SCSS tiene variables, y su principal ventaja es la reutilización. Suponga que tiene una paleta de colores para una aplicación y que el color primario es azul.

Por lo tanto, tiene azul en todas partes: el fondo de los botones de background-color , el color del color encabezados, los enlaces. AZUL - EN TODAS PARTES.

Y de repente azul que no te gustó. El nuevo favorito es el verde.

• Si no ha utilizado variables, deberá cambiar todas las líneas en las que hay azul.
  
• Y con las variables, simplemente cambie el valor de una de ellas.
  

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

Anidamiento

En SCSS, puede usar el anidamiento. Por lo tanto del fragmento

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

puedes hacer un código como este:

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

Este último se lee mejor, ¿verdad? Anidar le permite pasar menos tiempo escribiendo selectores complejos.

Importar y archivos parciales

Si necesita proporcionar facilidad de mantenimiento y legibilidad, almacenar todo el código en un archivo enorme es una mala idea. Si está experimentando o escribiendo una pequeña aplicación, todavía es soportable, pero a nivel profesional ... ni siquiera lo intente. Afortunadamente para nosotros, SCSS resuelve este problema.

Podemos crear "archivos parciales", para los cuales el nombre comienza con un guión bajo : _animations.scss, _base.scss, _variables.scss etc.

Para importarlos, se utiliza la directiva correspondiente: @import . Por ejemplo, puedes hacer esto:

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

Puede que hayas pensado: “¡Ajá! ¡Tiene un error aquí! Necesitamos escribir _animations.scss , no animations ".

No SCSS es lo suficientemente inteligente como para darse cuenta de que este es un archivo parcial.

Eso es todo lo que necesitamos saber sobre variables, anidamiento, archivos parciales e importación. SCSS tiene otras posibilidades: impurezas, herencia y varias directivas ( @for , @if , ...), pero no las mencionaré aquí.

Si está interesado, lea la documentación : es lo suficientemente clara y está bien escrita.

Pedido de CSS: metodología BEM

He usado nombres comunes para clases de CSS innumerables veces. Bueno, ya sabes: .button .page-1 .page-2 .custom-input .

A menudo no tenemos idea de qué nombre elegir, aunque nombrar es una tarea importante. Imagine que comenzó a escribir una solicitud y luego decidió posponer este negocio por varios meses o, lo que es peor, alguien se hizo cargo de su proyecto. Si no piensa en los nombres en el código CSS, será difícil entender de inmediato qué se entiende en una línea en particular.

BEM ayuda a resolver este problema. BEM es una convención de nombres; significa bloque, elemento, modificador.

Esta metodología lo ayudará a estructurar su código, hacerlo más modular y simplificar la reutilización. Veamos qué significa "bloque", "elemento" y "modificador".

Bloques

Un bloque puede ser imaginado como un componente. Tomemos, por ejemplo, el constructor de Lego.

¿Cómo hacer una casa simple de un diseñador? Tomará una ventana, un techo, una puerta, un par de paredes, y eso es todo. Estos son precisamente nuestros bloques : tienen significado por sí mismos.

Denominación: nombre del bloque: .block
Ejemplos: .card, .form, .post, .user-navigation

Artículos

¿Y cómo hacer una ventana con cubos de diseño? Puedes encontrar los cubos que parecen partes del marco y armar una hermosa ventana con ellos. Estos serán nuestros elementos . Representan las partes necesarias del bloque, pero fuera del bloque son inútiles.

Denominación: nombre de bloque + __ + nombre del elemento: .block__element
Ejemplos: .post__author, .post__date, .post__text

Modificadores

Entonces, hicimos algún tipo de ventana. Ahora necesitábamos un verde o, por ejemplo, una pequeña ventana. Estos serán nuestros modificadores. Son banderas en bloques y elementos que se utilizan para cambiar el comportamiento, la apariencia, etc.

Denominación: nombre del bloque O elemento + -- + nombre del modificador: .block__element--modifier, .block--modifier
Ejemplos: .post--important, .post__btn--disabled

Notas

• BEM significa nombrar clases y solo clases . No identificadores ni etiquetas, solo clases .
  
• Los bloques y elementos se pueden anidar en otros bloques y elementos, pero deben ser completamente independientes. Necesariamente independiente . Por lo tanto, no es necesario agregar un campo al botón para que esté debajo del encabezado; de lo contrario, se adjuntará al encabezado. Es mejor usar clases de ayuda.
  
• Sí, el archivo HTML se sobrecargará, pero no da miedo: las ventajas de BEM superan esta desventaja.
  

Ejemplo

Un pequeño ejercicio para los lectores. Vaya a los sitios que visita con frecuencia y piense qué bloques, elementos y modificadores podrían estar allí.

Por ejemplo, me imagino una imagen así en la tienda de Google:



Ahora es tu turno. Sea curioso y piense en lo que podría hacerse mejor. Y, por supuesto, para mejorar sus propias habilidades, debe buscar, experimentar y escribir código de forma independiente.

Organizar archivos CSS: el principio 7-1

¿Aún no te he cansado? Genial Vamos a descubrir cómo organizar archivos CSS. Esto mejorará en gran medida la eficiencia del trabajo y lo ayudará a encontrar instantáneamente el código CSS que necesita ser reparado.

Es hora de familiarizarse con el principio de "7-1".
Estos números no te dicen nada, ¿verdad?

Pero todo es bastante simple. Hay dos reglas a seguir:

1. Coloque archivos parciales en 7 carpetas.
   
2. Importarlos todos en un archivo main.scss ubicado en la raíz. Eso es todo
   

Siete carpetas:

• La carpeta base es el código CSS de la plantilla que escribes cada vez que comienzas un nuevo proyecto. Estas pueden ser reglas de diseño, animaciones, clases auxiliares (por ejemplo, margin-right-large , text-center , ...) y así sucesivamente.
  
• La carpeta de components : todos los componentes utilizados para formar páginas: botones, formularios, módulos de paginación: "swipers", ventanas emergentes, etc.
  
• Carpeta de layout : para el diseño de varias partes de la página, es decir, el encabezado, el pie de página, la navegación, las secciones, la cuadrícula personalizada, etc.
  
• La carpeta de pages es para páginas que necesitan un estilo separado que difiere del estándar.
  
• La carpeta de themes : para varios temas de aplicación (modo oscuro, administración, etc.).
  
• Carpeta de abstracts : todas las funciones, variables e impurezas. En resumen, cosas auxiliares.
  
• La carpeta de vendors es una biblioteca externa, sin la cual, quizás, ninguna aplicación puede hacer. La carpeta de vendors contiene archivos que son independientes de usted: Font Awesome, archivos Bootstrap y todo eso.
  

Archivo principal

Todos los archivos parciales se importan aquí.

 @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; … 

Sí, lo veo un poco hinchado, lo admito. Pero esta arquitectura fue inventada para proyectos grandes, y para tareas más pequeñas hay otra opción.

En primer lugar, no necesitamos la carpeta de vendors : todo el código CSS externo estará en la etiqueta de link colocada en el encabezado. Además, la carpeta de themes no es necesaria: lo más probable es que una aplicación pequeña tenga solo un tema. Finalmente, no habrá estilos para páginas específicas, por lo que eliminamos la carpeta correspondiente. Entonces, quedan cuatro carpetas, ¡genial!

Ahora tenemos dos opciones:

1. Si sigue el principio de "7-1", debe guardar los abstracts , components , layout y base las carpetas.
   
2. Si se siente más cómodo trabajando con una carpeta grande en la que habrá todos los archivos parciales y main.scss , obtendrá algo como esto:
   

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

Depende de usted.

Estoy convencido! ¿Cómo aplicar todo esto? Quiero decir, los navegadores no admiten archivos scss , ¿verdad?

Es cierto ser notado! En el paso final, compilaremos SCSS en CSS.

Hacer CSS desde SCSS

Necesitaremos Node.js y NPM (o Yarn ).

Utilizaremos el node-sass , que nos permitirá compilar archivos .scss en .scss .

Su interfaz es bastante simple:

 node-sass <> <> [] 

Utilizaremos solo dos parámetros:

• La -w : supervisa el directorio o el archivo. El node-sass esperará los cambios en el código, y tan pronto como los detecte, compilará inmediatamente el archivo correspondiente en CSS, lo cual es muy conveniente durante el desarrollo.
  
• El parámetro --output-style - cómo se verá el archivo CSS de salida. Puede tomar los siguientes valores: nested|expanded|compact|compressed . Utilizaremos esta opción cuando construyamos el archivo CSS.
  

Si tiene curiosidad (eso espero: ¡el desarrollador debería tener curiosidad!), La documentación completa está aquí .

Ahora sabemos qué herramientas se utilizarán. El resto es aún más fácil de hacer:

• Crear un proyecto: mkdir my-app && cd my-app
  
• Inicializarlo: npm init
  
• Agregue la node-sass : npm install node-sass --save-dev
  
• Cree las carpetas necesarias, index.html y main.scss :
  

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

• Agregue los siguientes scripts 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 al archivo CSS compilado a 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"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Eso es todo! Cuando escriba el código, ejecute npm run watch y abra el archivo index.html en el navegador. Para reducir CSS, solo ejecuta npm run build .

Algo mas

Reiniciar sobre la marcha

Para discutir mejor, puede agregar una recarga automática del archivo index.html local.

Para hacer esto, haz esto:

• Instale el paquete live-server : npm install -g live-server
  Nota: Este es un paquete global .
  
• Agregue npm-run-all según el proyecto: npm install npm-run-all --save-dev : esto le permitirá ejecutar varios scripts al mismo tiempo.
  
• Agregue los siguientes scripts a package.json :
  

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

Ahora, si comienza npm run start , los cambios se mostrarán inmediatamente, sin movimientos innecesarios de su parte.

Prefijos automáticos

Configuramos herramientas de desarrollo, ¡genial! Ahora hablemos sobre las herramientas de compilación, en particular, sobre esto: Autoprefixer .
Esta herramienta (o más bien, el complemento postcss) analiza CSS y agrega prefijos de proveedor a las reglas CSS utilizando valores de Can I Use .

Al crear un sitio web, se pueden utilizar nuevas funciones que no son compatibles con todos los navegadores. Proporcionar soporte para tales funciones permite prefijos de proveedor.

Un ejemplo de cómo se verá:

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

Sí, escribirlo a mano es tedioso. Hacer la vida más fácil para nosotros es una herramienta para agregar automáticamente prefijos que harán que el código CSS sea compatible con los navegadores sin ningún esfuerzo adicional.

Entonces, para compilar CSS:

1. Compilamos todos los archivos SCSS en un archivo CSS.
   
2. Agregue prefijos utilizando Autoprefixer.
   
3. Comprime el archivo CSS.
   

No queda nada, no cambie el canal.

• Agregue dos dependencias: postcss-cli y autoprefixer : npm install autoprefixer postcss-cli --save-dev
  
• Modificamos el script de build y agregamos estas líneas a package.json :
  

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "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"</b> … } 

Ahora, cuando inicie npm run build , se agregarán prefijos de proveedor y el código CSS se comprimirá. ¡Solo magia!

¿Quieres un poco más de magia? Levanté el repositorio , ¿para que pueda resolverlo más rápido?

Si está interesado en cómo apliqué estas habilidades a mi página de cartera, eche un vistazo a este repositorio y disfrute del resultado . Espero que estos ejemplos ayuden a comprender mejor lo que se discutió en el artículo.

Y ... eso es todo por hoy! Ahora puede escribir código CSS modular reutilizable compatible.



Sobre el traductor

El artículo fue traducido por Alconost.

Alconost localiza juegos , aplicaciones y sitios en 68 idiomas. Traductores en lengua nativa, pruebas lingüísticas, plataforma en la nube con API, localización continua, gestores de proyectos 24/7, cualquier formato de recursos de cadena.

También hacemos videos de publicidad y capacitación , para sitios que venden, imágenes, publicidad, capacitación, teasers, expliner, trailers de Google Play y App Store.

Más detalles