CSS-Inline-1

El CSS, Cascading Style Sheet, es uno de los lenguajes en que se desarrolla el front end, la parte que no se observa en un sitio y que permite al usuario ver las imágenes, colores, tipografías y otros elementos tal y como fue diseñado, así como interactuar y navegar en él.

CSS MEJORES PRÁCTICAS

7 8 9 1

El CSS, Cascading Style Sheet, es uno de los lenguajes en que se desarrolla el front end, la parte que no se observa en un sitio y que permite al usuario ver las imágenes, colores, tipografías y otros elementos tal y como fue diseñado, así como interactuar y navegar en él. Para que funcione correctamente existen reglas estrictas que deben seguirse, pero también es cierto que hay mejores prácticas que podemos implementar para hacer un uso más óptimo de él.

FIEloisa

AUTOR

Eloisa Pereyra

Diseñadora Gráfica

Estas mejores prácticas abarcan muchos campos, pero en esta ocasión quiero mencionar tres que nos han funcionado trabajando en equipo y con el administrador de contenido, CMS, Drupal.

UNA MARCA ES UNA NARRATIVA, ES LA SÍNTESIS DE UNA HISTORIA QUE DESCRIBE LA EXPERIENCIA DE VALOR DE UN PRODUCTO O SERVICIO.

Eduardo Danilo Ruiz
CEO Danilo Design Group

SEGMENTA Y CUIDA LA SEMÁNTICA

Aunque existen diferentes lugares para ubicar nuestros estilos, el lugar ideal es en “archivos externos .css.”

Si segmentamos en hojas específicas, debemos hacer que semánticamente nos indiquen de qué partes o elementos del sitio estamos hablando (layout.css, blocks.css, forms.css) así será más fácil organizar y mantener en orden el front end de nuestro proyecto. Mientras más grande sea el website que construimos, más complejos y abundantes serán los archivos que lo conforman, por lo que mantener una buena segmentación ahorra tiempo y dolores de cabeza.

La semántica siempre será importante y apreciada no sólo por ti, sino también por el resto del equipo y por los futuros desarrolladores; es por eso que debemos cuidar tanto los nombres de los archivos, como las clases y los ids de nuestros tags, buscando siempre que sean lo más explícitos posible.

CSS-miniinline

Elementos del sitio.

ORGANIZA Y COMENTA

Una vez segmentados nuestros archivos, es importante que cada uno esté organizado. Al momento de comenzar a codificar es muy fácil leer estas hojas pero ¿qué pasa cuando las líneas de código empiezan a crecer y nuestros archivos se hacen muy extensos? Si utilizamos una lógica para organizar nuestros selectores será más fácil leer y entender nuestros estilos. Recuerda siempre dejar comentarios que ayuden a saber de qué trata cada parte del archivo.

CSS-Inline-1

DE GENERAL A PARTICULAR

Codificar un buen CSS va de la mano con un markup limpio y bien estructurado de HTML. Así que una parte fundamental al momento de trabajar con cualquier CMS es conocer la estructura que arroja y su lógica de armado, clasificación e identificación de elementos. Esto nos facilitará estilar de lo general a lo particular, es decir, debemos identificar primero aquellos elementos que comparten características y declarar sus estilos solamente una vez, con selectores que nos permitan reutilizar el código, y después ir hacia aquellos que necesitan un tratamiento específico.

CSS-inline-2

Estas son sólo algunas prácticas que ayudan a que un website esté bien hecho de principio a fin. Al arrancar un proyecto haz un análisis, toma en cuenta todas las páginas y escenarios que conformarán el sitio web, establece junto con tu equipo las mejores prácticas a seguir y busquen ser consistentes y constantes a lo largo del proyecto. bullet-final

FIEloisa

Eloisa Pereyra

Diseñadora Gráfica

Diseñadora gráfica con enfoque en diseño web y desarrollo front end.

PROYECTOS RELACIONADOS