Prácticas recomendadas de CSS: 16 formas de mejorar rápidamente sus habilidades de CSS

¿Eres principiante en CSS y te preguntas constantemente si estás haciendo las cosas bien? ¿Alguna vez te preguntas si tu marcado está a la altura? Si es así, claramente es hora de aprender algunas prácticas recomendadas de CSS.

Si sigues las pautas básicas para escribir CSS, puedes asegurarte de producir un código limpio, legible y fácil de mantener. Ya sabes, el tipo de código que permite que los demás comprendan lo que hace y que te hace sentir orgulloso de mirarlo.

Si aspiras a alguna de estas cosas (o ambas), hablemos de las mejores prácticas de CSS que te permiten lograrlo.

1. Haz que tu código sea legible

Un formato adecuado garantiza que el código sea legible para usted y otros desarrolladores humanos. Si bien no es necesario que las máquinas (es decir, los navegadores) lo ejecuten, es una buena práctica hacer que su CSS sea fácil de leer. De esta manera, será más fácil comprenderlo, mantenerlo y trabajar con él.

Hemos escrito un texto completoArtículo sobre formato de código y comentarios, por lo que no lo repetiremos todo aquí. Sin embargo, aquí hay una descripción general rápida (consulte el artículo para ver todo):

• Sangra tu código— Ya sea que uses tabulaciones o varios espacios (¡decide cuántos!), asegúrate de sangrar los pares de valores CSS.consultas de medios, anímalos uno dentro del otro para mostrar dependencia.
• Utilice saltos de línea— Separe las distintas propiedades CSS con saltos de línea y coloque los pares de valores en su propia línea.
• Ordenar las reglas en orden alfabético—Esto hace que sea más fácil encontrar lo que estás buscando.
• Utilice comentarios— Incluya comentarios para separar las distintas secciones de la hoja de estilo. Además, considere incluir una tabla de contenidos al principio del archivo. También puede dejar comentarios con información importante que podría olvidar más adelante o que sea importante para comprender la presencia de algún marcado (por ejemplo, alternativas para navegadores más antiguos).

A continuación se muestra un ejemplo de código CSS bien formateado:

.search-submit {border-radius: 0 2px 2px 0;bottom: 0;overflow: hidden;padding: 0;position: absolute;right: 0;top: 0;width: 42px;}@media screen and (min-width: 56.875em) {.site-header {padding-right: 4.5455%;padding-left: 4.5455%;}}

Si bien existen diferentes convenciones para dar formato al marcado CSS, lo importante es que sea coherente. Nada hace que un archivo CSS o su autor se vean más desordenados que un formato inconsistente. Por lo tanto, decídase por sus preferencias y manténgalas. Si ya existe unaguía de estiloQuédate con eso.

Cuando eres constante, incluso si lo arruinas todo, es mucho más fácil corregir todos los mismos errores a la vez (gracias,buscar y reemplazar!).

2. Formatee correctamente su hoja de estilo

No solo debe hacer que su código sea legible, sino también asegurarse de que sus hojas de estilo CSS sean fáciles de manejar y estén bien organizadas. A continuación, se ofrecen algunos consejos y prácticas recomendadas para ello:

• Utilice un enfoque de arriba hacia abajo— Ordena los estilos en tu archivo tal como se muestran en el navegador. Esto significa pasar de reglas más generales a un marcado más específico. Por ejemplo, comienza con body, a, p, y luegoencabezados, luego elementos más específicos.
• Dividir los archivos en secciones— Agrupar estilos en áreas temáticas:tipografía, enlaces, navegación, etc. Incluso las páginas individuales pueden tener su propia sección si cuentan con su propio estilo. Consulta también los consejos anteriores sobre comentarios y creación de una tabla de contenidos. Además, también puedes incluir comentarios para marcar secciones específicas.
• Utilice hojas de estilo independientes para proyectos grandes— Si su marcado incluirá miles de líneas de código, podría tener sentido dividirlo en varios archivos para diferentes secciones de su sitio. Esto es especialmente cierto si esas secciones tienen un estilo muy diferente (por ejemplo, untienda onlinevs una página acerca de). En ese caso, tiene más sentido tener una hoja más grande para estilos globales y archivos más pequeños separados para secciones específicas del sitio.

3. Deshágase de la redundancia

El código redundante es aquel que ocupa más espacio del que necesita. Se carga más lentamente y también es más difícil de mantener y solucionar problemas. Por lo tanto, es importante evitar la redundancia siempre que sea posible. A continuación, se ofrecen algunos consejos para ello:

• Utilice DRY (“No se repita”)— Compruebe si hay repeticiones en su marcado. Hacen que su código sea más lento y más difícil de leer. Defina las cosas una vez y, luego, sobrescríbalas más abajo según sea necesario.
• Aprovecha las ventajas de las abreviaturas CSS— CSS ofrece muchas posibilidades para definir varias propiedades a la vez. Por ejemplo, margin-top, margin-bottom, margin-righty margin-leftpueden definirse todas con una única margindeclaración. Ocupa menos espacio, utiliza menos código y funciona igual de bien, lo que da como resultado un mejor rendimiento.
• Combine selectores cuando sea posible— Si varios elementos, como las definiciones tipográficas de los encabezados y párrafos, comparten los mismos estilos, asegúrese de combinarlos todos en un conjunto de reglas de llamada. No es necesario repetir el mismo marcado por separado.
• Evite selectores redundantes— Sea tan específico como necesite con sus selectores para lograr el resultado deseado, pero no más allá de eso. Si se adhiere a esto, también será más fácil sobrescribir el marcado con CSS más específico si es necesario. Por el contrario, evite los selectores muy amplios, ya que consumen más potencia de procesamiento.

4. Importante: Evite !importante

El siguiente paso en nuestras mejores prácticas de CSS es intentar evitar el uso de la !importantetiqueta tanto como sea posible.

Probablemente sepas que esta es la opción fundamental para que una declaración CSS se propague por toda la cascada sin que se sobrescriba. El problema es que, si confías demasiado en ella, es posible que necesites muchas de ellas, lo que hará que tu código CSS acabe siendo lo que llamamos un desastre (por usar el término técnico).

La verdad es que, si confías en !importantque tu marcado funcione, probablemente tengas que dedicar más tiempo a aprender sobreEspecificidad de CSSSi sabe cómo funciona la especificidad, generalmente no es tan difícil crear un selector más específico para sobrescribir lo que necesita sobrescribir.

Otros casos en los que !importantse suele utilizar son los estilos en línea o las hojas de estilo externas. Si te encuentras con estos, deberías aprovechar la oportunidad para pensar en una mejor organización y estructura de tus estilos en lugar de optar por lo nuclear.

En resumen, resérvelo !importantpara fines de prueba, pero evítelo en entornos de producción.

5. Considere utilizar un marco de trabajo

Los frameworks CSS pueden ser muy útiles y te ayudan a ponerte en marcha rápidamente. Al igual que otros frameworks, vienen con elementos preconfigurados que puedes usar para crear diseños rápidamente y sin tener que empezar desde cero. Si quieres aprender más sobre los frameworks CSS, puedes consultarViento de cola,Oreja, oBulma.

Al mismo tiempo, hay una gran salvedad: solo incorpore un marco a su proyecto si realmente lo va a utilizar. De lo contrario, probablemente afectará su rendimiento. Si se compromete con un marco para una sola característica, aún necesita cargar toda su hoja de estilo para funcionar. Como puede imaginar, eso suele ser mucho más código del que vale la pena.

Por lo tanto, si descubres que sobrescribes los estilos de tu marco o lo modificas de alguna otra forma, probablemente no deberías usarlo.

6. Utilice un restablecimiento/normalización de su CSS

Los restablecimientos aparecen al principio de una hoja de estilo y definen una serie de propiedades predeterminadas, como altura de línea, márgenes, colores de fondo, etc., para su sitio web. Esto ayuda a eliminar inconsistencias de diseño en diferentes navegadores y crea una línea de base común. A continuación, se muestra un ejemplo:

/* http://meyerweb.com/eric/tools/css/reset/    v2.0 |Actualizado0126   License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

Lo anterior es deMeyerWeb, una de las soluciones más populares. También puedes consultarNormalizar.css.

7. Incorpore accesibilidad a su diseño

Cómo hacer que su sitio sea accesibleSignifica que sea utilizable para la mayor cantidad de personas posible, independientemente de sus capacidades. Tu CSS juega un papel importante en eso, así que repasemos algunas prácticas recomendadas para esto:

• Proporcionar suficiente contraste— Asegúrate de que haya suficiente variación entre los colores de primer plano (por ejemplo, el texto) y de fondo para que las personas con discapacidad visual puedan leerlo. Puedes usar unComprobador de contrastePara ello, haz que tus enlaces sean coloridos para que sean reconocibles. Además, utiliza un tamaño de fuente lo suficientemente grande (al menos 18-20 píxeles).
• Mantener la outlinepropiedad— Los esquemas son fundamentales para las personas que navegan por su sitio con un teclado o lectores de pantalla. Ayudan a llevar un registro de qué elemento está activo. Si no le gusta cómo se ve su esquema, tiene la posibilidad de modificarlo. Más información al respectoaquí.
• Mantener visibles los elementos flotantes— De manera similar, asegúrese de que las descripciones emergentes u otros elementos que aparecen al pasar el cursor sobre un elemento también aparezcan cuando se selecciona mediante la pestaña.Funciones de ARIAPara eso.

Para muchos de los puntos anteriores, es importante conocerpseudoelementosEs muy útil. Más sobre CSS y accesibilidadaquí.

8. Evite editar hojas de estilo de temas directamente en WordPress

WordPress viene con mucho CSS, la mayoría de él se encuentra en hojas de estilo de temas (a menos que estés usando unTema de bloquees decir). Si tu plan es hacer cambios en el estilo de tu tema, la peor idea es editarlo style.cssdirectamente.

¿Por qué?

Porque la próxima vez que hagas clic en elActualizar ahorabotón para tu tema (o la próxima vez que tuactualizaciones automáticasentra en acción), se borrarán todas sus modificaciones.

Entonces, ¿qué hacer en su lugar?

Si solo está planeando cambios más pequeños, puede utilizar elCSS adicionalsección en el Personalizador de WordPress.

Es a prueba de actualizaciones e inyecta su CSS directamente en headla sección de su sitio.

De lo contrario, para modificaciones más grandes, utilice unTema infantilTodo lo que coloque en su hoja de estilo sobrescribirá lo que esté en el tema principal y también permanecerá en una actualización del tema.

9. Consejos rápidos sobre las mejores prácticas de CSS

Muy bien, para la sección final, te daremos algunas prácticas recomendadas de CSS para tener en cuenta:

• Obtenga más información sobre clases e identificaciones— Las clases y los IF se utilizan de formas muy diferentes. Las clases son para elementos repetidos, los ID para elementos únicos. Para obtener más información, tenemos unArtículo completoSobre esto.
• Opte por flexibilidad y cuadrícula en lugar de flotación— Los flotantes solían ser la forma principal de organizar elementos web a la izquierda y a la derecha y crear diseños. Ahora tenemos sistemas sólidos para eso en funcionamiento concaja flexibleyred, así que aprovecha el tiempo y úsalos.
• Aprovecha los preprocesadores— Los preprocesadores ayudan a organizar el marcado, evitar la repetición, agregar modularización, brindar automatización y más. En tiempos devariables personalizadasYa no son tan necesarios, pero siguen siendo útiles. Los más populares sonHABLAR CON DESCARO A,MENOS, yAgujaTambién podrías investigar sobre postprocesadores comoPostCSSyprefijador automático.
• Utilice unidades relativas— En los días deDiseño responsivoy sitios web que se muestran en una amplia variedad de tamaños de pantalla, normalmente debería confiar en unidades como em, rem, %y otros tamaños relativos. Los tamaños fijos como pxson solo para ciertos escenarios.
• Minimiza tu CSS— La minimización elimina todo lo que es necesario para la lectura humana (es decir, todo lo que te dijimos que pusieras antes). Sin embargo, los navegadores no necesitan un formato especial y la minimización permite que los archivos sean más pequeños y se carguen más rápido, así que ¡adelante!Optimización automáticaes un gran complemento que puede hacer esto automáticamente.
• Eliminar el marcado no utilizado— Por razones similares a las anteriores, revise su código para ver si hay marcas que no se estén usando en sus páginas y elimínelas. Esto reducirá aún más el tamaño de sus archivos. Tenemos unaArtículo completosobre ese tema también.
• Utilice un validador CSS— Valide su CSS para comprobar que el marcado se utiliza correctamente. Hay suficientesherramientas en líneaPara eso.

Las mejores prácticas de CSS son una excelente base para seguir aprendiendo

Cuando te inicias en CSS, puede resultar un poco abrumador. Hay mucho que aprender y mucho que comprender. Si adoptas las mejores prácticas de CSS desde el principio, te darás una buena base sobre la que apoyarte y a partir de la cual seguir aprendiendo.

Arriba, hemos cubierto una serie de las prácticas más importantes que se deben adoptar. Esto no es todo lo que hay que saber en términos de mejores prácticas de CSS, pero es un buen punto de partida. ¡Esperamos que disfrutes de tu próximo viaje!

¿Qué otras prácticas recomendadas de CSS consideras que es absolutamente esencial conocer? ¡Cuéntanoslo en la sección de comentarios a continuación!