Cómo organizar estilos usando Less CSS
Durante el desarrollo de esta serie de artículos sobre Less CSS consideré si era necesario tratar cada una de las funcionalidades de LESS o si, de otra forma, te muestro que se puede hacer para que descubras en conjunto varias funcionalidades. Está última me pacece mejor así que aquí vamos.
Qué significa organizar estilos
Aunque el diseño gráfico, incluyendo los estilos web, son usualmente algo desordenado, un tanto libre en su desarrollo hay momentos en que mantener un orden es beneficioso, especialmente con proyectos amplios o con un futuro prometedor, que como ejemplo podría mencionar temas de wordpress, aplicaciones web, portales de contenido, etc.
Significa que antes de crear si quiera una clase comenzarás definiendo en qué forma se dividirán los estilos, la paleta de colores, las fuentes a utilizar, la carpeta de imágenes, e incluso pre-definir clases genericas para utilizar en toda la hoja de estilos para algunos elementos repetitivos como el logotipo o colores de identidad de la marca
De qué forma me ayuda Less CSS a organizar estilos
Dividir estilos por sección
Una buena forma de dividir los estilos es por la sección del sitio web que modifican (portada, página interna, contacto, etc). De esta forma existirá una hoja de estilo por cada sección aunque al final se mezclen en una única hoja de estilos utilizando el comando import.
En el siguiente código estoy definiendo las hojas de estilos que utilizaré como base, la primera es parte del framwork Foundation sobre el cual trabajo, el segundo es una adaptación de la libreria de estilos Less Elements, la tercera es un framework propio sobre el que estoy trabajando y la última es una librería de estilos para controles de formulario. En situaciones así, en donde intervienen varias hojas de estilo los namespaces resultan muy útiles.
Predefiniendo la paleta de colores
Los colores se definen por su nombre en variables. También se pueden definir como variables llamadas como su contexto (error, hover, informativo) aunque esto es más complicado. Quizá la forma ideal (aunque no la más rápida) sea una combinación de ambas como en el siguiente ejemplo en dónde defino los colores que son parte de la identidad de la marca seguido de algunos colores definidos por su contexto (action que significa que son enlaces)
Para evitar confusiones con los nombres de variable acostumbro a anteponer una c al nombre de la variable, excepto que sea el nombre de un color lo dejo como esta.
Uso de fuentes
De vez en cuando las fuentes es un tema olvidado en los estilos web, se define un estilo y se olvida el resto. Pero es una buena práctica al menos definir cuatro tipos de fuentes:
- La fuente del contenido, o texto en general (fontBase)
- …de los titulares (fontHeadings)
- …de los controles de formularios o de elementos que actuen como parte de la interfaz, usualmente es una fuente más angosta y aún legible en dimensiones reducidas (fontControls)
- y la fuente del código fuente, que por recomendación debe ser monoespaciada.
En el ejemplo anterior además importe una hoja de estilos, font.less, que es la encargada de definir la webfont Yanone Kaffeesatz.
Definir variables de referencia
Definir variables de referencia no es necesario pero yo se los recomiendo, es un buen tip, por ejemplo para definir la ubicación de las imágenes, de las fuentes, el ancho máximo de la pantalla u otros valores de referencia dentro de todo el diseño gráfico. Por ejemplo si sabemos que el logotipo siempre deberá tener un margen especifico podríamos definirlo desde el inicio.
Luego de un código como el anterior es mucho más fácil trabajar, por ejemplo para agregar una imagen como fondo utilizariamos un estilo similar a este:
.panel{
background:url("@{dirImages}/fondo.jpg") repeat;
}
Es importante aclarar que las variables se incluyen de la forma @{variable} porque están dentro de una cadena de texto.
Definir estilos globales
Para finalizar se debe definir los estilos globales, los del body y demás contenedores, para poder tener una base de estilos sobre la culal poder trabajar.
