Cuando ya hemos avanzado en el campo del diseño de páginas web y la estilización se ha vuelto una parte común de nuestros desarrollos cotidianos, es fácil olvidar que en un principio existieron muchas dudas al abordar las hojas de estilo y sus propiedades. La confusión siempre se encuentra presente al utilizar algo por primera vez y el aprender CSS no es la excepción, en este artículo vamos a tratar de recordar algunos de esos factores y momentos que causaron confusión y nos hicieron dudar a tal grado que se necesito consultar más de una referencia.

Aclaramos que en esta ocasión no vamos a tratar con problemas mayores como son las excepciones para Internet Explorer o el manejo de CSS3 en navegadores antiguos. Simplemente manejaremos cosas fundamentales, como lo son esas pequeñas diferencias de sintaxis que pueden significar grandes cambios.

Clasifica tus selectores CSS

Si al leer la palabra “selectores” en el título de la sección solo añadiste una duda más a tu libro de preguntas, pues no te preocupes porque aquí te explicamos qué es. Un selector es el pedazo de código que va antes de las llaves ({}) en una hoja de estilo, estos se encargan de delimitar el rango de elementos que vamos a modificar agregándoles un estilo específico. Por ejemplo en el siguiente código:

#soyUnId{
 color: red;
}

El selector sería la palabra “#soyUnId”, y mediante este texto delimitamos el grupo únicamente al elemento que contiene ese identificador, por lo que será él nada más quien reciba el estilo de texto color rojo.

Muchas veces por cuestiones de comodidad utilizamos selectores bastante genéricos para aplicar un estilo, ya sea un id, una clase o el nombre de un elemento, ya que son los de uso más común y de sintaxis más conocida, pero existe la capacidad de utilizar elementos anidados, multielementos e incluso expresiones regulares.

El hecho de que un selector sea muy elaborado no garantiza que sea necesariamente el más adecuado para nuestro código, debemos clasificar los selectores para identificar cual es el que realmente cumple con el propósito que buscamos. Por ejemplo si tuviéramos dos bloques de código como los siguientes:

.claseX {
/* Estilo */
}
p.claseX{
/* Estilo */
}

En teoría lucen bastante similares, sin embargo existen diferencias sutiles que pueden verse reflejadas en el rendimiento. El primero de estos selectores aplicará el estilo a todos los elementos que pertenezcan a “claseX”, mientras que el segundo lo aplicará únicamente a los elementos de tipo párrafo que pertenezcan a esa misma clase.

El primero resulta más genérico puesto que el código puede ser útil para varios tipos de elementos, y tiene la gran ventaja de que es más rápido de entender y aplicar por parte del navegador. Por su parte el segundo es más específico y por lo mismo puede ser más única su aplicación, es raro cuando se use un ejemplo como el segundo ya que eso indica que la clase se usará en múltiples elementos de distintos tipos.

Si ese no es tu caso entonces debes optar por la primera opción, lo cual permitirá un mejor rendimiento, demostrando con esto que un selector elaborado no es siempre la mejor opción. Ya que si deseas utilizar esa misma clase en distintos tipos de elementos entonces deberás realizar un código como este:

p.claseX{
color: red;
}
span.claseX{
color: orange;
}

Orden de tu CSS, un factor relevante

En el desarrollo de hojas de estilo en muchas ocasiones nos encontraremos con el hecho de que el orden de los factores sí altera el producto. El primer ejemplo claro de esto se encuentra en los selectores, no es lo mismo poner primer el elemento y después la clase a poner primero la clase y luego el elemento.

Si manejamos dos bloques de código como estos:

.claseX div { color: red; }

div.claseX  { color: orange; }

No obtendremos los mismos resultados, ¿Cuál es la diferencia?, bueno ese pequeño espacio que existe entre el nombre de la clase y el tipo del elemento de la primera sentencia indica que el estilo de color rojo se aplicará a todos los elementos div que estén dentro de la clase “claseX”.

Por su parte la segunda sentencia es tomada únicamente como un selector por el orden de los factores, esto hace que el estilo de color naranja únicamente se aplique a los elementos de tipo div que tengan la clase “claseX”.

El orden también es un factor a considerar al momento de llamar dos o más hojas de estilo en un archivo HTML, la última hoja es la que tiene prioridad y si una propiedad se define en dos o más parte las propiedades que se dieron en la última hoja son las que se respetarán.

De igual manera esto se ve reflejado en el orden interior de las hojas de estilo, es decir, si en una misma hoja tenemos dos selectores con la misma especificidad, como los siguientes:

.claseRojo   { color: red; }
.claseVerde  { color: green; }

Y aplicamos ambas clases al mismo elementos, el último en el orden es el que finalmente predominará y aplicará sus propiedades.

Reemplazo de propiedades CSS

Es importante leer bien nuestro código y verificar que no existan propiedades repetidas en una misma sentencia, en caso de que llegaran a existir entonces el orden será un elemento a considerar para determinar que propiedad prevalecerá. Si tenemos un código como este:

.claseX{
color: red;
border: 1px solid;
color: orange;
}

Donde claramente definimos dos veces el color de nuestro texto, debemos estar concientes que únicamente la última propiedad será la que se aplicará, dejando el texto de color naranja.

El uso de identificadores

Hasta cierto punto el uso de un ID o una clase en un elemento resulta bastante similar, es de todos saber que el uso de un identificador se debe de hacer cuando queremos aplicar un estilo único, mientras que la clase nos ayuda a aplicar el mismo estilo a diferentes elementos, pero ¿Existe algún otro beneficio claro en el uso de IDs? sí los hay.

Técnicamente un ID es mucho más rápido de interpretar por parte del navegador, utilizar un ID en Javascript resulta mucho más sencillo y sobre todo el nivel de especificidad de un ID no es superado por lo que tiene predilección sobre el resto de las sentencias aplicadas a un mismo elemento.

Conclusión

Como podemos observar todos hemos pasado por problemas de principiantes, nadie nace sabiendo y el que lo niegue debe estar en un error, somos muchos los que ya cruzamos este campo y es bueno ir recopilando esta clase de lecciones para que sea más sencillo para los que inician, espero haya sido de provecho y que ahora te resulte más sencillo estructurar hojas de estilo.