Hervera
Open Menu
Serie de tutoriales con lo necesario para dominar CSS. En esta primera parte se tratarán los selectores senzillos más importantes

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.

Fotografía de portada de: unsplash-logo Pankaj Patel