馃摑 Escribiendo CSS de la forma correcta 馃摑 - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

martes, 12 de marzo de 2019

馃摑 Escribiendo CSS de la forma correcta 馃摑


Este lenguaje para dar estilos a p谩ginas web tiende a empezar siendo algo simple y volverse muy complicado conforme avanza el desarrollo del sitio (mantener 100 l铆neas de CSS es f谩cil, mantener decenas de miles no).

Sintaxis


Empecemos hablando de la sintaxis, cada desarrollador com煤nmente tiene las suyas propias dependiendo de donde aprendieron y se suelen quedar con esa sintaxis.
Con el tiempo fui desarrollando mi propia sintaxis para escribir el c贸digo, algunas de las reglas que defin铆 son:
  • Usar identaci贸n suave con dos espacios, el usar espacios en vez de tabulaciones permite que todos los editores muestran la identaci贸n de la misma forma, los dos espacios es para que se note la identaci贸n, pero no sea tan grande.
  • Si dos selectores comparten estilos agruparlos dejando cada uno en una l铆nea.
  • Dejar un espacio al final del selector y antes de la llave de apertura ({).
  • Termina todas las declaraciones de estilos con punto y coma (;), esto ayuda a evitar futuros errores por olvidarse de ponerlo en la 煤ltima l铆nea.
  • Cada declaraci贸n tiene que tiene su propia l铆nea, esto permite encontrar m谩s f谩cil los errores que teniendo todo en una sola l铆nea.
  • No prefijes los valores de 0.x, por ejemplo si ten茅s 0.5 es mejor usar .5.
  • Usa min煤sculas para los valores hexadecimales de los colores, es m谩s f谩cil de leer de esta forma y utiliza la forma abreviada siempre que puedas (#f00 en vez de #ff0000).
  • No coloques unidades al valor 0, no es necesario que ya 0 es siempre 0 sin importar la unidad, 0px son 0em y 0%.

Orden de declaraci贸n


Para el orden de declaraci贸n me resulta mucho m谩s c贸modo usar el orden alfab茅tico, esto resulta muy c贸modo para poder buscar luego una propiedad, por ejemplo si quer茅s buscar un z-index sabes que siempre est谩 al final de las declaraciones. Otra raz贸n para usar este orden es que algunos editores (como Sublime Text) tienen una opci贸n para ordenar alfab茅ticamente tocando una sola tecla o con dos clicks.

@imports

En CSS tradicional los @import son anecd贸ticos, son m谩s lentos de cargar que un <link> en el HTML y no unen de verdad el CSS, sino que hace una nueva petici贸n al servidor para bajar el segundo CSS.
En los pre procesadores en cambio el @import se vuelve una herramienta muy poderosa ya que estos son utilizados por los compiladores para buscar una segunda hoja de estilos e incorporarla al CSS final, quedando un 煤nico CSS que combina muchos archivos de LESS.

Media queries


Para ubicar las media queries hay muchas formas diferentes, una de las primeras es colocar los media queries al final del documento fij谩ndote en cada archivo individualmente, otra es crear 3 media queries (mobiletablets desktop) y ubicar los estilos que aparecen en 2 o m谩s de las versiones fuera de las media queries y en la que no modificar esa regla desde la media query.

Actualmente el m茅todo que utilizo consiste en colocar justo despu茅s de cada selector la media query de ese selector, gracias a los pre procesadores puedo colocar la media query dentro del selector como si fuese otra declaraci贸n.

Prefijos


Para esto tambi茅n hay muchas opciones, una muy buena es usar prefix-freede Lea Verou, otra es usar mixins dentro del pre procesador que se encarguen de agregar los prefijos de cada navegador y por 煤ltimo usar alg煤n plugin para tu editor que los agregue por vos.
Para sitios me parece mejor la segunda opci贸n, el uso de mixins. Dejo siempre una lista de mixins para todas las propiedades que tengas prefijos para poder usarlas f谩cilmente en cualquier proyecto.
Para aplicaciones en cambio es preferible usar prefix-free y olvidarse de los prefijos, aunque tengas que cargar otro archivo JS, este solo pesa 2kb y te ahorra muchas l铆neas de CSS.

Declaraciones multi l铆nea e individuales


Cuando se declaran las propiedades de un estilo estas las coloco siempre en su propia l铆nea, quedando la primer l铆nea del selector y la llave de apertura ({), cada propiedad en una l铆nea propia y una 煤ltima l铆nea para la llave de cierre (}).
En el caso de estilos de una sola propiedad coloco todo en una sola l铆nea dejando un espacio entre las llaves y la declaraci贸n.

Propiedades abreviaciones


Muchas veces se aconseja el uso de las propiedades abreviadas para reducir la cantidad de l铆neas de c贸digo, usar margin: x x x x; en vez de declarar cada margen por separado.
Esto es genial cuando se quieren declarar los estilos para todos los m谩rgenes (o paddings, o propiedades del background o lo que sea) pero cuando solo necesitas declarar el margen inferior (por poner un ejemplo) esto no tiene mucho sentido ya que estar铆as declarando todos los m谩rgenes solo para declarar uno solo.
Para esto es mejor usar la forma no abreviada (margin-bottom en el ejemplo) y dejar la forma abreviada para cuando tenga sentido.

Anidaci贸n


Es mejor tratar de evitar la anidaci贸n siempre que se pueda, en lugar de anidar es mucho mejor crear clases con prefijos, por ejemplo .btn y .btn-success es mejor que tener .btn y .btn .success.


Solamente considero que vale la pena anidar cuando quer茅s dar estilos a una etiqueta directamente sin usar clases (cosa que es mejor tratar de evitar de todas formas).

Comentarios


Los comentarios tienen que ser simples, de una l铆nea y no m谩s de 80 columnas. Tiene que haber al menos un comentario por cada modulo o componente creado explicando para que sirve ese componente.


Las clases de utiler铆a tambi茅n tiene que tener un peque帽o comentario explicando su funci贸n.

Nombre de clases


Los nombres de las clases deben estar en ingl茅s siempre, y para los nombres de clases la mejor metodolog铆a que encontr茅 es usar la siguiente estructura:


  • .moduleName-subElement {}
  • .moduleName—modifier {}
  • .moduleName.is-state {}
Para las clases de utilier铆a quedar铆an:


  • .u-name {}
  • .u-name-xs {}
  • .u-name-sm {}
  • .u-name-md {}
  • .u-name-lg {}
Un ejemplo:


  • .btn {}
  • .btn—lg {}
  • .btn—success {}
  • .btn-icon {}
  • .btn.is-disabled {}
Como ven en el ejemplo tenemos un bot贸n, que puede estar modificado para ser grande o ser un bot贸n de 茅xito, dentro puede tener un 铆cono y tambi茅n puede estar desactivado.

Organizaci贸n


Por 煤ltimo la organizaci贸n del c贸digo, para esto uso la metodolog铆a de SMACSS que propone dividir el c贸digo de la siguiente forma:
  • Base: Estos son los estilos aplicados a etiquetas de forma global, un ejemplo es Normalize o Reset.
  • Layout: El sistema de grillas y estilos espec铆ficos de una pantalla.
  • Modules: Componentes reutilizables de la aplicaci贸n, como botones, formularios, bloques, etc.
  • States: Estados modificados de los estilos, estos son los is-disable por ejemplo.
  • Theme: Todo lo relacionado al tema, colores de texto, fondo, borde, im谩genes de fondo.
Base deber铆a ser un 煤nico archivo con todos los estilos, layout deber铆a ser un archivo que importe los distintos layouts, los cuales deber铆an estar en una carpeta. Modules deber铆a ser similar a layout, un archivo que importar otros. Los states deber铆an estar o agrupados por m贸dulos o todos juntos y el tema deber铆a estar todo junto.

Esta es la forma que, con el tiempo, encontr茅 m谩s c贸moda para escribir mi c贸digo en CSS, tratando de reutilizar c贸digo y de mantener un c贸digo lo m谩s organizado posible.

Post Top Ad

Responsive Ads Here