Cosas a tener en cuenta si quieres mejorar tu CSS

Cualquier maquetador web, tenga el nivel que tenga, debería tener unas nociones básicas sobre CSS para aplicar en cualquier proyecto; aunque sea pequeño.

En este artículo, sacado de mi newsletter#07, vamos a dar un repaso a algunas tecnologías que acompañan al CSS tradicional para mejorar nuestro flujo de trabajo -o workflow, para los amigos de los anglicismos.

Primero y más importante, aprende a utilizar un preprocesador

sass.sh-600x600
Puede que a ti, que me lees, te parezca irreal que haya profesionales del CSS que no controlen un preprocesador como SASS, LESS (aprovecho para enlazar mi tutorial, que para eso me lo trabajé, jeje), Stylus o el que sea.

La realidad es bien diferente; muchos profesionales no conocen -ni de lejos- lo que es un preprocesador.

Si bien no es imprescindible, es altamente recomendable. Agilizas trabajo, mejoras la calidad de tu CSS final (siendo organizado y haciéndolo bien, claro) y modularizas tu css, algo que es realmente importante en cualquier tipo de proyecto que necesite mantenimiento y mejoras constantes (y no tan constantes).

Segundo: La importancia de nombrar bien tus clases y organizar el contenido

Otro punto clave para tener un mejor CSS, organizado y sostenible en el tiempo, es comentar bien tu CSS y la nomenclatura que utilizas para tus clases.

Si utilizas preprocesadores, lo suyo es que te fabriques un mini-framework con el que empezar los proyectos, separando (por ejemplo) varibles, mixins, y demás componentes de tu framework y -además- te recomiendo que incluyas comentarios al inicio de cada sección. De esta forma, podrás encontrar fácilmente qué fichero modificar con un vistazo rápido al inspector.

Si quieres ver un ejemplo de mini-framework (aunque ya no es tan mini), te recomiendo que mires el Wakkos CSS Framework, está muy bien documentado y estructurado.

Además, para aprender cómo nombrar las variables, puedes mirar las CSS Guidelines de Harry Roberts [ENG], o una versión adaptada al castellano de Wakkos (CSS Guidelines).

Una última puntualización sobre el uso de los ID y clases en CSS

No me acaba de encajar esa gente que utiliza IDs para maquetar con CSS, ¿En serio hay una capa, exclusivamente una, que necesite estilos? Yo creo que no, pero esa no es la única razón para no utilizar IDS (Lectura recomendada al respecto: Don´t use IDs in CSS Selectors [ENG]).

Otra cosa que debes evitar SI o SI, es reutilizar las clases con las que das estilos para realizar acciones con JavaScript.

En serio, si quieres dar una funcionalidad a una capa concreta, añade una clase con js- delante, el maquetador que llegue detrás de ti te lo agradecerá.

No obstante, para maquetar con JavaScript (o jQuery, o lo que utilices), se suelen utilizar las ID; intenta que estas IDs tengan el prefijo «js-«, así indicas a cualquier desarrollador que ese ID tiene una acción JavaScript asociada. Un detalle sencillo que muy pocos tienen en cuenta.

¿Qué otras buenas prácticas recomendarías tu? ¡Deja un comentario y ayúdanos a mejorar nuestro CSS!

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.