{"id":55396,"date":"2022-07-28T09:39:22","date_gmt":"2022-07-28T07:39:22","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=55396&preview=true&preview_id=55396"},"modified":"2025-01-20T11:04:33","modified_gmt":"2025-01-20T10:04:33","slug":"buenas-practicas-css","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/buenas-practicas-css\/","title":{"rendered":"14 Buenas Pr\u00e1cticas de CSS para Principiantes"},"content":{"rendered":"

Cuando comienzas con el dise\u00f1o web, un elemento clave para hacer que todo funcione correctamente y tenga el aspecto que deseas es el CSS. Es la abreviatura de Cascading Style Sheets (Hojas de Estilo en Cascada), y funcionan permiti\u00e9ndote estilizar los elementos HTML<\/a> de la forma que quieras.<\/p>\n

Y aunque puedes experimentar con CSS de muchas maneras \u2013 la mayor\u00eda de las veces inline \u2013 , hay una forma mejor de hacerlo. Y eso se ajusta a una serie de buenas pr\u00e1cticas que debes seguir para asegurarte de que tu c\u00f3digo<\/a> es funcional, carece de volumen innecesario y est\u00e1 bien organizado.<\/p>\n

Hoy destacaremos 14 buenas pr\u00e1cticas de CSS para principiantes, pero incluso los profesionales experimentados deber\u00edan repasar los fundamentos de vez en cuando.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Mira Nuestro Videotutorial con las Mejores Pr\u00e1cticas CSS para Principiantes<\/a><\/strong><\/p>\n<\/kinsta-video>\n

1. Organizar la Hoja de Estilos<\/h2>\n

Lo primero que debes hacer al aplicar las mejores pr\u00e1cticas de CSS es organizar tus hojas de estilo. La forma de hacerlo depender\u00e1 de tu proyecto, pero como regla general, deber\u00e1s seguir los siguientes principios de organizaci\u00f3n:<\/p>\n

S\u00e9 coherente<\/h3>\n

Independientemente de c\u00f3mo decidas organizar tu CSS, aseg\u00farate de que tus elecciones sean coherentes en toda la hoja de estilos, as\u00ed como en todo tu sitio web.<\/p>\n

Desde los nombres de las clases hasta las sangr\u00edas de las l\u00edneas y las estructuras de los comentarios, mantenerlo todo coherente te ayudar\u00e1 a hacer un seguimiento de tu trabajo m\u00e1s f\u00e1cilmente. Adem\u00e1s, te asegura que hacer cambios, m\u00e1s adelante, no supondr\u00e1 un dolor de cabeza.<\/p>\n\n

Utiliza Libremente los Saltos de L\u00ednea<\/h3>\n

Aunque el CSS funcionar\u00e1 incluso si es feo visualmente, es mejor para ti y para cualquier otro desarrollador que vaya a trabajar con tu c\u00f3digo si utilizas muchos saltos de l\u00ednea para mantener cada fragmento de c\u00f3digo separado y legible.<\/p>\n

Normalmente, es mejor colocar cada par de propiedades y valores en una nueva l\u00ednea<\/a>.<\/p>\n

\"Captura
C\u00f3digo CSS<\/figcaption><\/figure>\n

Crea Nuevas Secciones Donde Tenga Sentido<\/h3>\n

De nuevo, la forma de configurar tus hojas de estilo depender\u00e1 en gran medida del tipo de sitio en el que est\u00e9s trabajando. Pero como regla general, es una buena idea establecer secciones para los estilos tal y como se van a utilizar. Es decir, una secci\u00f3n para los estilos de texto, una secci\u00f3n para las listas y columnas, una secci\u00f3n para la navegaci\u00f3n y los enlaces, etc. Tambi\u00e9n puedes crear secciones para p\u00e1ginas espec\u00edficas que pueden tener un estilo diferente al resto, como la tienda o las preguntas frecuentes.<\/p>\n

Comenta Tu C\u00f3digo<\/h3>\n

Aunque s\u00f3lo t\u00fa vayas a ver tu CSS, sigue siendo una buena idea ser minucioso con tus comentarios. Los comentarios tendr\u00e1n el siguiente aspecto:<\/p>\n

\/* This is what a standard CSS comment looks like *\/<\/code><\/pre>\n
De esta forma, te resultar\u00e1 m\u00e1s f\u00e1cil saber a qu\u00e9 corresponde cada secci\u00f3n de un vistazo, sin tener que repasar despu\u00e9s cada l\u00ednea.<\/p>\n
Los comentarios pueden ayudarte a definir las secciones, pero tambi\u00e9n puedes utilizarlos para dar una idea de las decisiones que has tomado, sobre todo si crees que puedes olvidarlo m\u00e1s tarde.<\/p>\n
Utiliza Hojas de Estilo Separadas para los Proyectos m\u00e1s Grandes<\/h3>\n
Esto no se aplica a todos los sitios web, pero si tienes un sitio grande con necesidad de mucho CSS espec\u00edfico, usar varias hojas de estilo es una buena idea. Nadie \u2013\u00a0incluido t\u00fa\u00a0\u2013\u00a0deber\u00eda tener que desplazarse durante mucho tiempo para encontrar la \u00fanica l\u00ednea de c\u00f3digo que necesita.<\/p>\n
Evita la molestia y crea hojas de estilo separadas para las diferentes secciones del sitio, especialmente si van a tener estilos completamente diferentes.<\/p>\n
Por ejemplo, puede que quieras crear una hoja de estilo para los estilos globales y otra para tu tienda online<\/a> con estilos dedicados a las descripciones de los productos, los encabezados o los precios.<\/p>\n
2. CSS Inline vs. CSS Externo vs. CSS Interno<\/h2>\n
Hay tres tipos diferentes de CSS con los que puedes tener que lidiar cuando construyes un sitio web y ajustas su estilo. Hablemos un poco de lo que es y hace cada uno de ellos y luego hablemos de cu\u00e1l deber\u00edas utilizar realmente en tus proyectos.<\/p>\n