7 consejos importantes para escribir mejor CSS

Uno de los mayores problemas de la programación es el mantenimiento. En un escenario del mundo real, no siempre comenzamos a desarrollar proyectos desde cero. En su mayoría, se nos asigna (o aceptamos) un proyecto que ya se ha escrito tal vez un par de años antes o incluso más.

Para trabajar de manera eficiente en ese proyecto, primero debemos comprender el código fuente. Este es el punto en el que nos damos cuenta de inmediato de la importancia de un código limpio. Como desarrolladores, debemos intentar escribir nuestro código de la manera más limpia posible.

Este también es el caso de CSS. Hay algunos puntos a los que debemos prestar atención al escribir CSS. En este artículo, me gustaría compartir contigo algunos de los más importantes. Creo que estos 7 consejos te ayudarán a mejorar la calidad de tu código CSS.

Vamos a empezar

1. SECO

DRY significa "Don't Repeat Yourself" . Este es un principio general de desarrollo de software y se puede aplicar en cualquier lenguaje de programación, así como en CSS. Como podemos entender por su nombre, DRY tiene como objetivo evitar o reducir la repetición tanto como sea posible.

Por ejemplo, podemos crear 3 clases CSS para 3 botones como este:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

O podemos usar el principio DRY escribiendo las reglas comunes una vez en una clase adicional y las diferentes reglas cada una en otras clases:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

Como podemos ver, la aplicación del principio DRY evita la repetición, disminuye el número de líneas y mejora la legibilidad e incluso el rendimiento.

2. Nombrar

Nombrar los selectores de CSS es otro punto importante para escribir mejor CSS. El nombre de un selector debe ser autodescriptivo y legible ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

Normalmente,

es una etiqueta HTML y significa párrafo. Arriba, no podemos entender realmente qué es la clase p . Además, debe evitar nombres como myFirstForm , y no recomiendo usar camel case .

En su lugar, use nombres declarativos (separados por un guión para varios nombres):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

Creo que los nombres tienen más sentido ahora :)

Nombrar cosas en la programación no es tan fácil, pero existen varias convenciones de nomenclatura que puede utilizar en su proyecto. BEM (modificador de elemento de bloque) es uno de ellos. He trabajado con BEM antes y puedo recomendarlo.

3. No utilice estilos en línea

Bueno, hay argumentos en la web sobre esto: algunos te dicen que nunca uses estilos en línea, mientras que otros argumentan que puede ser útil en algunos casos.

En mi opinión, la mejor práctica es no utilizar estilos en línea. Me centraré aquí en por qué no deberíamos.

Separación de intereses

De acuerdo con el principio de separación de preocupaciones, el diseño (CSS), el contenido (HTML) y la lógica (JavaScript) deben separarse por razones como una mejor legibilidad y mantenimiento.

Incluir reglas CSS dentro de las etiquetas HTML rompe esta regla:

 Some Text 
Preferimos mantener nuestras reglas de estilo en archivos CSS externos.

Dificultades en la búsqueda

Otro problema con el uso de estilos en línea es que no podemos buscarlos. Entonces, cuando necesitamos hacer un cambio en el estilo, normalmente buscamos selectores CSS del elemento HTML.

Por ejemplo, cambiemos el tamaño de fuente del texto en nuestra página web. Para hacer eso, primero encontramos esa parte específica en el navegador donde se necesita el cambio mirando la estructura HTML:

 Some Text 

Luego necesitamos encontrar el selector, que es la clase de texto en negrita aquí. Finalmente, vamos a esa clase y hacemos los cambios:

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

Pero si las reglas están escritas en línea en lugar de usar clases:

 Some Text 

Incluso si encontramos la etiqueta HTML, no podemos saber si hay otras reglas de tamaño de fuente dentro del HTML o no. Como no se utiliza ningún selector, tenemos que revisar todas las páginas HTML una por una, intentar encontrar las otras reglas de tamaño de fuente y cambiarlas también.

¿No sería más fácil con un selector de CSS? Pero hay algo aún peor ...

Problemas de especificidad / sobrescritura

Los estilos en línea tienen la mayor especificidad entre los selectores de CSS (cuando no contamos las etiquetas importantes ).

Teniendo en cuenta que estamos usando tanto una clase como un estilo en línea para un elemento:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

Aquí, el tamaño de fuente del texto será 14px , porque los estilos en línea tienen mayor especificidad que las clases CSS. Cuando haces un cambio en la clase:

.text-bold { font-size: 20px; font-weight: bold; }

El tamaño de fuente seguirá siendo de 14px. Entonces, su cambio en la clase CSS no funcionará, lo que hará que termine diciendo:

"Oye, ¿por qué no funciona mi código CSS? ¡Odio el CSS!"

y llevarlo a usar una etiqueta! important que hace la magia:

.text-bold { font-size: 20px !important; font-weight: bold; }

Lo cual es un gran no-no y nos lleva al siguiente punto ...

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!