Cómo escribir bien CSS: 5 consejos básicos

Cuando comienzas a aprender CSS tu única preocupación es que las cosas funcionen, pero pasados los miedos del principio, hay que empezar a escribir con orden y método.

Una hoja de estilos CSS siempre corre el riesgo de convertirse en un galimatías sólo comprensible por el que la ha escrito y, a veces, ni siquiera para su autor. Y eso no encaja con la idea de flujo de trabajo profesional que debe alcanzar tu código.

Vamos a ver cinco consejos sencillos para escribir bien CSS si estás empezando:

1. Usa un buen editor de código

Un editor de código no es imprescindible para escribir CSS, cualquier bloc de notas puede servirnos. Pero con un editor podremos ver coloreado lo que escribimos e incluso ayudarnos con el predictivo cuando estamos dudando con las propiedades y sus valores.

A un editor de código debes pedirle que sea gratis y multiplataforma. Cumpliendo con eso tenemos algunas opciones:

2. Comentarios para todo

Separa las partes de tu hoja CSS con cabeceras creadas a partir de comentarios, puedes hasta ser creativo en cómo las escribas.

/*////////////////////////////////////
======== menú cabecera ========
///////////////////////////////////*/

Comenta cualquier conjunto de reglas que te hayan servido para solucionar algo, explícatelo a ti mismo como si le mandases un mensaje a tu yo futuro.

/* efecto para campos obligatorios.
Estoy usando un span después de los inputs */

3. Usa multilínea y tabulaciones

El CSS se llama así porque el resultado final es una cascada de reglas escritas de arriba a abajo. Para poder hacerlo legible y ordenado ten en cuenta un par de consejos:

Tabular las reglas que afecten a los elementos hijos.

.nav {float: right; padding-top: 15px}

.nav__item {display: inline-block;}

.nav__item > a {
display: block;
padding: 20px 0 20px 30px;
font-size: 20px;
text-transform: uppercase;
color:#707070;
}

Usar multilínea en general, pero si sólo tienes una propiedad o dos, escríbelas en una sola línea.

.centrar { max-width:970px; margin:0 auto}

.logo {
display: block;
background: orange;
width: 136px;
height: 136px;
padding: 20px;
}

4. Ordena las propiedades dentro de la reglas

Hay reglas que pueden tener bastantes propiedades para poder dibujar lo que queremos, por ejemplo, un botón. En este caso, puede ser buena idea ordenar dichas propiedades poniendo al principio lo que tenga que ver con dimensiones, luego posicionamiento, a continuación el estilo y terminar con lo respectivo al texto.

button {
width: 100%;
height: 60px;
margin-bottom: 30px;
padding: 15px;
border: 0;
background: orange;
font-weight: bold;
font-size: 18px;
color: white;
}

5. Usa una metodología

Hay muchas metodologías CSS, algunas de las más conocidas son BEM, SMACSS y OOCSS.

Estas metodologías quizá sean mucha tela si estás empezando, pues están pensadas para páginas tochas donde trabajan varias personas para editar las mismas hojas de estilo.

Con todo, si sólo nos quedamos con algunos conceptos sencillos, podríamos ponerlos en práctica desde el principio para ir adquiriendo buenos hábitos.

Por ejemplo de BEM:
Nos podemos quedar con la idea de usar sólo clases, nada de IDs.

También puede ser efectivo usar una forma de nombrar la clase de los elementos padre importantes (bloques) y sus hijos (elementos). Así luego será más fácil leer nuestro CSS.

/* bloques con una sola clase*/
.nav {float: right; padding-top: 15px}

/* hijos del bloque con el nombre del bloque seguido por dos guiones bajo del hijo */
.nav__item {display: inline-block;}

De SMACSS
Crear un apartado base al principio para resetear etiquetas HTML.

/* BASE */
body {font-family: “Open Sans”, Arial, Tahoma}
h1 {font-size: 1.3em}

Separar por apartados nuestra hoja de estilos. Y tener clases de estado a las que podamos acudir fácilmente.

.centrar { max-width:970px; margin:0 auto}

Aunque apliques estos consejos, no olvides repasar tu CSS antes de darlo por terminado para buscar redundancias y eliminar propiedades inútiles.

Dinos lo que piensas

Tu email no se mostrará ;)