Esta sección y sus contenidos han sido contratados específicamente por la marca que se menciona Volver a Genbeta Dev.com

Codificación en CSS para una web moderna: consejos y buenas prácticas

1 comentario

CSS3

Tras echar un vistazo hace un par de días a una serie de consejos para codificar en HTML con el fin de aprovechar mejor las posibilidades de la web moderna, nos ponemos hoy del lado del diseño en su componente más visual y estético con CSS.

Al igual que HTML, también este estándar se encuentra en constante estado de evolución y requiere de nosotros estar siempre atentos a las últimas novedades. Además, es precisamente éste un terreno que suele resultar problemático a la hora de afrontar el desarrollo para múltiples navegadores, así que conviene ser especialmente cuidadosos para poder ofrecer la mejor experiencia posible a nuestros visitantes.

Pero dejemos las introducciones y pongámonos manos a la obra con una serie de consejos para codificar en CSS, un terreno donde una vez más no encontramos reglas que seguir a rajatabla, pero sí buenas prácticas que nos pueden hacer la vida más fácil:

  • Contenido y diseño bien separados: el código CSS puede implementarse desde un archivo externo, incrustado en la cabecera del documento o directamente en las propias etiquetas HTML. Esta última opción rompe por completo el concepto de separación entre contenido y diseño, convirtiéndose en una práctica a evitar por la gran cantidad de problemas que puede suponer.
  • Aprovecha los prefijos de proveedor: en ocasiones los navegadores ofrecen compatibilidad con estándares que aún están pendientes de aprobación. Para poder hacer uso de los mismos, disponemos de prefijos que añadidos a cada propiedad nos permiten probarlos de forma confiable, atajando además posibles problemas futuros de compatibilidad. Esta práctica plantilla puede resultar muy útil para hacer uso de dichos prefijos.
  • Ayúdate de los preprocesadores: estas aplicaciones nos permiten escribir código con mayor agilidad y libertad de posibilidades, haciendo luego el “trabajo sucio” de adaptarlo a un formato óptimo para todo tipo de navegadores. Desde luego, no son la opción ideal para puristas y pueden resultar confusos para quien se esté iniciando en este terreno, pero merece la pena echar un vistazo a las bondades que aportan preprocesadores como Sass, Stylus o Less.
  • Resetea tu código: con la ayuda de normalize.css, podemos realizar de una forma rápida y eficiente un reseteo de nuestra hoja de estilos para depurarla. Esto nos permite una mejor adaptación a estándares modernos, corrección de errores, mejoras de usabilidad y mejor proyección de futuro para la escalabilidad del proyecto.
  • Evita repeticiones: otro concepto bastante básico pero que siempre conviene recordar, pues acabar con las redundancias en nuestra hoja de estilos agrupando cuando sea posible nos hará las cosas más fáciles y ayudará además a aligerar la carga del documento en buena medida.
+ Deja tu comentario

Comentarios