Tutorial CSS parte 1: Selectores sencillos
CSS (cascade style sheets) es un "lenguaje
de programación" en el que iniciarse es
muy fácil pero que dominarlo y hacer que nuestras hojas de estilo sean mantenibles
y escalables ya no es tan sencillo.
Tiempo atrás, no era necesario tener un buen dominio de CSS, ya que las aplicaciones no eran tan
grandes y con unos cuantos !importants se hacia más o menos lo que
se necesitaba.
Actualmente, debido a la exigencia de las páginas web, los tamaños de los equipos de desarrollo y
los ciclos de vida mas largos es recomendable usar todo el potencial de CSS y seguir unas buenas
prácticas.
A continuación, voy a compartir una lista de temas útiles para desarrollar código CSS de calidad.
Selectores CSS sencillos
CSS se basa principalmente en el uso de
selectores y propiedades asociadas a
ellos.
No es necesario memorizar todas las propiedades con todos sus posibles valores, aunque a medida que las vayamos utilizando,
las más importantes se irán quedando grabadas a fuego en nuestro cerebro. No obstante, entender como
seleccionar
los elementos que queremos modificar es clave para dominar CSS (y ya que estamos,
nos
vendrá bien para
nuestros desarrollos en Javascript).
Los selectores más importantes son:
| selector | modo de uso | ejemplo | explicación |
|---|---|---|---|
| selector por etiqueta/elemento | nombre-elemento | span | se usa para seleccionar todos los elementos de un mismo tipo en base a la etiqueta html. |
| selector por clase | .nombre-clase | .summary__title | se usa para seleccionar todos los elementos que ésta sea una de sus clases. |
| selector por identificador único | #identificador | #name | se usa para seleccionar el elemento único con el id especificado. |
| selector por atributo | [atributo] | [data-error] | selecciona todos los elementos que tengan el atributo especificado. |
| selector por contenido de atributo | [atributo="contenido"] | [id="main"] | selecciona todos los elementos que tengan el contenido especificado en el atributo. |
Con un dominio de estos selectores, en conjunto con los selectores compuestos, ya se puede empezar a
desarrollar CSS y dar estilo a las webs y aplicaciones.
Aunque en las siguientes partes del
tutorial veremos como hacerlo de una forma mantenible
y escalable.