Forem: Marcial Ambriz

Buenas practicas en CSS

Marcial Ambriz — Wed, 11 Aug 2021 07:26:13 +0000

Esta es una recopilación que considero como buenas prácticas en la codificación de estilos en CSS.

A lo largo de mi camino como desarrollador frontend he tratado de llevar un uso de prácticas que me ayuden a optimizar y mejorar cada proyecto que hago.

Estas son las actuales prácticas que uso en mis proyectos:

Reinicio de estilos
Incluir información descriptiva
Definir variables
Organizar elementos
Agrupar selectores
Usar anotaciones en componentes
Combinar elementos
Usar valores relativos
Usar shorthands
Conocer el display inicial de los elementos
Crear primero la estructura HTML
Modularizar los estilos
Usar metodologías CSS
Usar prefijos de los navegadores
Validar el codigo
Minificar el codigo
Utilizar preprocesadores
Utilizar post procesadores

Reinicio de estilos

La mayor meta de un archivo de reinicio de estilos es reducir las incompatibilidades de los diferentes navegadores. Provee estilos generales que hacen más fácil editar y personalizar elementos.

El reinicio es esencial para eliminar las inconsistencias comunes de los navegadores tales como heights, headings, margins, font sizes, etc.

El mayor reto en el desarrollo web frontend es la compatibilidad de los estilos entre los diferentes navegadores. Aquí es donde toma partido un reinicio de estilos.

Un ejemplo de este tipo de hojas de reinicio es Normalize.css de Nicolas Gallagher, es una forma moderna de reiniciar CSS. Este preserva los valores iniciales útiles, a diferencia de otras hojas de reinicio de estilos. Además de eliminar las inconsistencias comunes de los navegadores también corrige algunos errores.

Incluir informacion descriptiva

Es útil incluir información que nos permita conocer más sobre el proyecto, datos tales como el autor, títulos, descripción, URLs informativas y otros de talles dentro de la hoja de estilos. Si el usuario o el desarrollador requiere una referencia o más detalles en el futuro, le será sencillo encontrar el contacto de la persona así como otros detalles que buscan.

/*
Project: Portfolio
Description: Portafolio web personal
Project URI: https://github.com/marskdev/portfolio
Author: Marcial Ambriz
Author URI: https://marskdev.netlify.app
*/

Definir variables

CSS ahora cuenta con propiedades personalizadas (variables) que podemos utilizar para guardar valores específicos como typefaces, tamaños, colores, incluso hasta configuraciones de propiedades.

En sitios y proyectos donde hay una gran cantidad de estilos, en general con muchos valores repetidos. Como ejemplo, un color puede ser usado por distintos elementos que sin el uso de la variables sería una tarea tediosa cambiarlo en el futuro, por otro lado las variables nos permitirá reemplazar el valor del color en todos los elementos que hagan referencia a la variable.

Otro beneficio son los identificadores semánticos haciendo que sea más fácil de entender y nos permite identificar con mayor precisión cada valor que usemos en los estilos.

:root {
    /* theme */
    --dark-base: #282A3E;
    --base: #2B2D42;
    --slate: #A8A8C7;
    --light-slate: #C7C7DB;
    /* Branding */
    --primary: #F6BE5F;
    --gradient: linear-gradient(109.8deg, #F6BE5F -6.35%, #FA9875 105.29%);
    /* Typeface */
    --font-headline: 'Lato', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

h1,h2 {
    font-family: var(--font-headline);
}

Organizar elementos

Organizar elementos en la hoja de estilos de arriba hacia abajo no es tan fácil como podría serlo. Sin una estructura que organice los elementos podría ser difícil localizar un elemento dentro de un desorden.

Además crea una legibilidad increíble que hace mucho más sencillo mantener en el futuro, permitirá encontrar elementos más rápidos. Además no sabes quien en el futuro podría necesitar mirar el código.

Una buena estructura puede iniciar incluyendo los estilos generales, seguidos por un comentario que divide un componente de otro e indicando el nombre dentro del comentario.

/****** General Styles *********/
body {…}
h1, h2, h3 {…}
p {…}
a {…}
/****** Header Style *********/
#header {…}
/****** Navigation Style *********/
#nav {…}
/****** Footer Style *********/
#footer {…}

Agrupar selectores

Si tienes diferentes selectores para un mismo componente, sería ideal agruparlos todos juntos para que parezca más organizado. Esto te ayudará a localizar errores fácilmente.

/* Cylinder */

.cylinder { width: 960px; margin: 0; padding: 0; }

.cylinder #new { font-family: Arial, sans-serif; font-size: 40px; color: black; }

.cylinder #tagline { font-family: Verdana; font-size: 20px; }

Usar anotaciones en componentes

Es recomendable colocar detalles sobre el código CSS que se está utilizando que revelen el propósito o describan el comportamiento de las propiedades en donde sea difícil a la vista entenderlo. Será de mucha ayuda en componentes muy complejos.

La mejor manera de hacerlo es colocar un comentario para cada grupo o componente.

Combinar elementos

Algunos elementos algunas veces comparten propiedades, en lugar de asignar propiedades a cada uno de forma independiente puedes optar por asignar las mismas propiedades a diferentes elementos, de esta forma evitarás la repetición de código.

h1, h2, h3, .headline, .title { font-family: tahoma, color: #333 }

Usar valores relativos

El uso de valores relativos como em (font-size element) o rem (root font-size element) en lugar de valores absolutos como px (píxeles) permite que los tamaños sean más flexibles en diferentes tamaños de pantalla.

Las unidades em toman el valor de font-size del elemento donde se declara y rem toma el valor del elemento raíz.

Para cambiar los valores de los elementos para diferentes tamaños de pantalla solo necesitarás redefinir el valor de font-size del elemento raíz a través de una media query cuando el tamaño de la pantalla cambie y en consecuencia se ajustaran los demas tamaños.

/* Default body font-size 16px

  Screen size | body | headline
     400px    | 19px |   42px
     800px    | 21px |   46px
*/

.headline { 
    font-size: 2.2em; /*35px*/
}
@media (min-width: 400px) {
    body { font-size: 118.8%; }
}
@media (min-width: 800px) {
    body { font-size: 131.3%%; }
}

Usar shorthands

Puedes reducir la cantidad de código considerablemente usando shorthands. Para elementos como padding, margin, font, etc, puedes combinar estilos en una sola línea.

.noShorthand {
    margin-top: 8px;
    margin-right: 7px;
    margin-left: 5px;

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.withShorthand {
    margin: 8px 7px 0 5px;

    font: 600 18px Arial, sans-serif;
}

Conocer el display inicial de los elementos

Cada elemento HTML tiene un display inicial, dependiendo el tipo de elemento, el valor inicial será diferente por ello es importante entender el valor inicial de cada uno.

Tener en cuenta este dato nos permitirá saber cuándo cambiar el display dependiendo el contexto. Algunas propiedades requieren de un display específico como block para ser aplicadas.

Estos son los elementos más comunes:

/*Default display: inline*/
span, a, strong, em, img, br, input, abbr, acronym

/*Default display: block*/
div, h1...h6, p, ul, li, table, blockquote, pre, form

Encuentra la lista completa de los elementos aquí.

Crear primero la estructura HTML

Algunos desarrolladores crean los estilos al mismo tiempo que van creando la estructura HTML.

Es lógico crear ambos al mismo tiempo, pero actualmente podrías ahorrar tiempo si primero creas la estructura. La razón de esto es que ya tienes en mente la estructura de todos los elementos del sitio.

Crear primero la estructura te permite visualizar el sitio entero.

Modularizar los estilos

Dependiendo de la complejidad del diseño y el tamaño del sitio es recomendable separar los estilos en módulos en diferentes archivos que después se incorporan en uno solo importando los módulos, será más sencillo de mantener y editar que una única hoja gigante.

Permitirá gestionar los estilos que solo necesita una pagina especifica y evitará cargar estilos innecesarios para las diferentes vistas.

/* This file: main.css */

@import url("components.css");
@import url("layout.css");
@import url("header.css");
@import url("footer.css");

Usar metodologias CSS

Las metodologías CSS son una serie de indicaciones para escribir, modularizar, escalar y reutilizar código que permiten resolver problemas de implementación. Usarlo te ayudará a escalar el proyecto y mantenerlo en un futuro. Algunas metodologías son BEM, ITCSS, OOCSS, SMACSS, etc.

Incluso podemos combinar metodologías tomando lo mejor de cada una.

Usar prefijos de los navegadores

Usar los prefijos creará mejor compatibilidad en el despliegue del sitio entre los diferentes navegadores. Omitir los prefijos es encontrarse con problemas de compatibilidad de las características implementadas en navegadores específicos.

Algunas de las propiedades no son compatibles con ciertos navegadores, las cuales necesitan de prefijos para ser usadas en algunos navegadores. Para ello tenemos que definir múltiples líneas a la vez para una misma propiedad.

Estos son los prefijos de los navegadores más comunes.

iOS: -webkit-

Safari: -webkit-

Firefox: -moz-

Chrome: -webkit-

Opera: -o-

IE-Microsoft-Edge: -ms-

Validar el codigo

Siempre puedes usar W3C free CSS Validator para examinar si tu código ha sido organizado y estructurado apropiadamente. Otro beneficio de usarlo es ayudarte a encontrar errores dentro del código. Esto te ahorrará todo el tiempo que gastarías encontrando el problema de manera manual.

Minificar el codigo

Si sientes que va lento mientras se cargan los estilos en los navegadores. Entonces es momento de intentar comprimir el tamaño del archivo css. Muchos elementos incluyen saltos de línea y espacios en blanco, que nos permiten hacer de la hoja de estilos legible no son necesarios, estos podrían crear un retraso al momento de cargar el sitio.

Una forma de sacar el máximo potencial de una hoja de estilos es eliminando esos elementos que a nosotros como desarrolladores nos permite leer con facilidad los estilos, al navegador no le importara si no se encuentran. Una forma de hacerlo es minificar el código, esto hará que la carga de estilos sea más rápida.

Utilizar preprocesadores

El uso de un procesador puede ser beneficioso de varias maneras. Un procesador es una herramienta que te deja usar características avanzadas que no existen en CSS. Estas pueden ser variables, loops e incluso funciones.

Los preprocesadores ayudan a organizar tu hoja de estilos de mejor manera. Tienen la habilidad de romper los estilos en pequeños archivos reutilizables. Los cuales pueden ser importados dentro de otros o implementarlos de forma separada.

Anidar selectores

Otra gran ventaja es que mejora la legibilidad anidando los selectores. Es una simple y poderosa característica que CSS no tiene. La jerarquía estructural hace más sencillo de visualizar.

.wrapper {
    .sidebar {
        &.collapsed {
            ...
        }
        .list {
            &-item {
                ...
                &--active {
                    ...
                }
            }
        }
    }
}

Vendor prefix automáticos

Esta es una característica experimental. Como más arriba explico, algunas propiedades no son compatibles con algunos navegadores.

Para que nuestros estilos tengan soporte para la mayoría de los navegadores, tenemos que definir múltiples líneas a la vez para una misma propiedad.

.gradient {
    background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
}

Utilizar post procesadores

Una mejor opción es un port-procesador. Este puede crear un paso de optimización adicional una vez que el CSS fue generado por un preprocesador. Unos de los más populares post-preprocesadores son postCSS o CSSnano.

Puedes usarlo para colocar prefijos automáticamente a las propiedades, ya no tendrás que preocuparte por dar soporte a todos los navegadores. Ya no habrá excusas de "Eso no lo puedo usar".

Conclusión

El uso de estas prácticas te ayudarán a optimizar y escribir estilos CSS que te brindarán ventajas y beneficios aumentando la calidad de tus proyectos. Además evitarán malas prácticas que podrían perjudicar tu proyecto.

Entre los beneficios se encuentran: una escritura rápida y lectura legible, mayor soporte entre navegadores, optimización de código, mejor escalabilidad y mantenimiento sencillo en el futuro.

Dime que opinas y si tienes otra buena práctica compartela.

Puedes encontrarme en otros sitios como Twitter, Instagram y Linkedin

Metodologías CSS

Marcial Ambriz — Mon, 09 Aug 2021 22:25:56 +0000

Metodologías CSS

Una de las cosas difíciles en el desarrollo web y programación en general es el nombramiento de las cosas y el nombramiento en CSS no es diferente.

Cuando trabajas en un proyecto pequeño el nombramiento no es una prioridad pero si es una buena practica, todo cambia cuando se convierte en un proyecto grande, entonces el nombramiento se vuelve primordial, mantener el rastro de todos los selectores se vuelve un caos sin una convención de nombres, usar alguna hará la tarea fácil.

El código se volverá sencillo de leer, mantener y modificar.

¿Qué es la convención de nombres?

Una convención de nombres es un conjunto de reglas para la elección de la secuencia de caracteres que se utilice para identificadores que denoten variables, tipos, funciones y otras entidades en el código fuente y la documentación.

Algunas de las razones para utilizar esta metodología son:

Reducir el esfuerzo para leer y entender el código fuente.
Mejorar la claridad y apariencia del código fuente.
Ayuda a evitar conflictos de nombres.
Mejora la comprensión en la reutilización de código.

Ver en Wikipedia

En lenguajes de programación como JavaScript se utilizan convenciones para nombrar variables, tipos, funciones y algunos otros, dependiendo el caso de uso es el tipo de convención que se utiliza.

En CSS se utiliza kebab-case, este es una convención bastante estándar en CSS, lo podemos ver incluso en las propiedades de los selectores.

body { font-size: 16px; }

Metodologías que puedes implementar

Los siguientes son convenciones de nombres que puedes usar:

BEM

BEM (Bloque, Elemento, Modificador) tiene un enfoque en componentes en el desarrollo web. La idea de esta metodología es separar la interfaz de usuario dentro de bloques independientes. Esto hace el desarrollo de interfaces fácil y rápido incluso con una UI compleja y permite la reutilización de código creando pequeños componentes.

Estos son los 3 problemas que esta convención de nombres trata de resolver:

Saber lo que hace un selector con solo mirar su nombre.
Tener una idea donde puede ser usado un selector con solo mirarlo.
Saber la relación entre los nombres de las clases con solo mirarlas.

<div class="card-post">
    <header class="card-post__header">
        <h1>Tittle Post</h1>
    </header>
    <div class="card-post__body card-post__body_hide">
        <p>Here should there some text.<p/>
    </div>
</div>

El bloque describe el propósito, el elemento compone una parte del bloque, separado con doble guión bajo __ y el modificador define la apariencia separado por un solo guión bajo _.

Sintaxis

.block__element_modifier { }

En la comunidad de BEM hay otra forma de separar el modificador con dos guiones --.

.block__element--modifier { }

Conoce más sobre BEM.

SMACSS

SMACSS (Scalable and Modular Architecture for CSS) es una guía que estructura los estilos en categorías. Es una forma de examinar el proceso de diseño y adaptarlos a un pensamiento flexible. Esta metodología trata de documentar el diseño con un enfoque coherente para el desarrollo los estilos de un sitio.

Hay 5 tipos de categorías:

Base
Layout
Module
State
Theme

La idea de esta metodología es dividir código en categorías. El mayor propósito es codificar patrones para su reutilización.

Conoce más sobre SMACSS.

ITCSS

ITCSS representa un triangulo invertido de CSS y la principal filosofía es ayudarte a organizar los archivos CSS del proyecto de tal manera que des un mejor trato al global name-space, la cascada y los selector específicos.

Conoce más sobre ITCSS mira como usarlo.

OOCSS

OOCSS (Object-Oriented CSS) tiene el propósito de fomentar la reutilización de código y el fácil mantenimiento de las hojas de estilos.

OCSS se centra en dos principales principios:

Separación de la estructura de la apariencia.
Separar el contenedor del contenido.

Conoce más sobre OOCSS.

AMCSS, SUIT CSS & ACSS

Estas tres ultimas considero que es avanzado para principiantes. Pero si tienes curiosidad puedes pasar a visitarlos AMCSS , SUIT CSS ACSS.

Fuentes

MDN