Conceptos básicos de CSS: cómo usar una “clase”

Si te preguntas cómo usar las clases en CSS y HTML, estás en el lugar correcto. Al ser un tema introductorio de CSS, mi intención aquí es acercarte, de una manera sencilla, a cómo funcionan las clases y cómo usarlas en tu proyecto.

Las clases son selectores de CSS. Usamos selectores CSS para estilizar elementos en HTML, usando el atributo “clase”, por ejemplo: <div class=”blue”></div> para hacer referencia a una clase CSS “blue”.

¿Confuso? Tenga la seguridad de que obtendrá todo lo que necesita saber a continuación:

¿Qué son las clases de CSS?

Si está familiarizado con la programación, sabe que casi todos los lenguajes de programación, como Java, PHP, Python, etc. tienen clases en sus sintaxis. La buena noticia es que CSS es mucho más fácil.

En CSS, el concepto de clases es un poco diferente, ya que CSS no se parece en nada a los lenguajes mencionados anteriormente.

En primer lugar, CSS es un lenguaje que se usa para estilizar sitios web. Describe el aspecto que deberían tener los elementos HTML y lo hace a través de selectores .

Puede considerar los selectores como palabras clave con reglas específicas que “seleccionan” ciertos elementos HTML en una página, por lo que puede asignar una apariencia diferente a esos elementos.

Por ejemplo, hay selectores de CSS para seleccionar etiquetas HTML, etiquetas con id específicos, por ejemplo <div id="footer"></div>, clases , por ejemplo <div class="footer"></div>, etiquetas dentro de etiquetas, entre otras reglas más específicas. Vea el ejemplo a continuación:

<style>
	div {
		color: red;
	}
</style>
<div>Test</div>

El código CSS anterior define un selector CSS “div”, que selecciona todas las etiquetas div en la página y pinta el texto en color rojo.

Las clases CSS son simplemente selectores. La sintaxis a utilizar es un punto “.” seguido de una palabra clave, luego los estilos se establecen entre “{” y “}”. Vea el siguiente ejemplo:

<style>
	.bordered {
		border: 2px solid black;
	}
</style>

<div class="bordered"></div>

Diferentes formas de usar las clases CSS

Como se ve en el ejemplo anterior, las clases CSS son fundamentalmente un tipo diferente de selector. Puede combinar clases de CSS de varias maneras. Consulte a continuación para obtener más ejemplos:

<style>
	.blue {
		color: blue;
	}
</style>

<div class="blue">Blue text</div>
<a href="#" class="blue">Blue link text</a>

En el ejemplo anterior, cualquier etiqueta que tenga la clase establecida en “azul” tendrá su texto en azul.

<style>
	div.blue {
		color: blue;
	}
</style>

<div class="blue">Blue text</div>
<a href="#" class="blue">Black text, even though the class is blue</a>

En el ejemplo anterior, el div tendrá texto azul, pero el enlace no. Esto se debe a que el selector de CSS se describió de tal manera que combina la etiqueta “div” con la clase “.blue”, por lo que aplica el estilo solo a la etiqueta div que contiene la clase “blue”.

<style>
	.blue-text {
		color: blue;
	}
	
	.black-background {
		background: black;
	}
</style>

<div class="blue-text black-background">Blue text, black background</div>
<a href="#" class="blue-text">Blue text</a>

El código anterior muestra cómo puede usar varias clases al mismo tiempo y también usar varias clases en la misma etiqueta. De esta forma puedes escribir una serie de estilos y reutilizarlos, simplemente aplicando diferentes clases, separándolas por espacio en el atributo HTML “clase”.

Esta es la mejor manera de usar las clases. Algunas bibliotecas CSS como bootstrap, por ejemplo, hacen uso de esto todo el tiempo.

Consejos útiles sobre clases y selectores

Si está comenzando con CSS, hemos cubierto lo suficiente sobre las clases específicamente. Pero aún puede tener dudas sobre diferentes aplicaciones de clase, selectores que puede haber visto en alguna otra pieza de código, etc.

Lo primero que quiero que sepas es que las clases son fáciles de implementar y todo lo que ves en los ejemplos anteriores es prácticamente todo lo que necesitas saber sobre las clases.

Es posible que sienta curiosidad por otros temas relacionados con CSS, pero al final, la sintaxis de CSS es bastante simple. Lo que frena a la mayoría de las personas es memorizar muchas propiedades y poder hacer que las páginas se vean exactamente como esperas. Pero todo se reduce a la práctica.

Aquí hay algunos consejos sobre clases y selectores de CSS que pueden ayudarlo mucho:

Trate de aprender los principales selectores de CSS : selectores de clase: .class, id: #id, etiqueta: div, atributo: input[type="text"], así como la jerarquía de estos selectores, son conceptos importantes para aprender. Esto debe incluirse en otro artículo, pero una vez que comprenda y memorice los conceptos básicos, CSS será mucho más fácil de entender.

Los selectores de CSS se usan en JavaScript y jQuery : ¿Alguna vez te has preguntado por qué en jQuery usamos, $('#container')por ejemplo? La idea detrás de jQuery proviene precisamente de los selectores de CSS. La biblioteca facilita la selección de elementos por id, clase, nombre de etiqueta, etc., a través de los selectores de CSS. Lo mismo se puede lograr a través document.querySelectorAll('#container')de JavaScript puro.

Use patrones para los nombres de las clases: es importante nombrar las clases de CSS con algo significativo. Por ejemplo, usar una .borderedclase para un elemento que tiene bordes visibles: este parece obvio, pero no todos lo hacen. Además de usar nombres que tengan sentido, también se recomienda mantener siempre un patrón en la denominación de las clases. Siempre recomiendo usar slug case, con minúsculas, reemplazando los espacios con guiones “-“, ejemplo: .is-centeredpara un contenedor con property text-align: center.

Aproveche las combinaciones de las clases: ¿Tendrá elementos con las mismas propiedades en la misma página o en varias páginas diferentes? Luego puede definir un conjunto de estilos comunes y reutilizables. Por ejemplo, supongamos que tiene un menú lateral con una sombra que es igual a la sección “leer más” en la parte inferior de la página. Luego puede crear una .card-shadowclase que contenga la box-shadowpropiedad y posiblemente otras características comunes que los elementos puedan compartir, de modo que pueda reutilizar esa clase cuando lo necesite, reduciendo la cantidad de código CSS y creando una estructura de hoja de estilo semántica.

Recomendaciones finales

Si bien CSS acepta el uso de otros tipos de selectores, como #para ID, se recomienda que use clases en lugar de ID para definir estilos entre CSS y HTML.

El objetivo principal de las clases en CSS y HTML es poder reutilizar el mismo código para múltiples elementos que comparten el mismo estilo.

Para que esto suceda, intente mantener sus clases organizadas en su código CSS, de modo que siempre pueda recordar que ya existe una clase para un estilo en particular y evite volver a crear clases que hagan exactamente lo mismo.

Una sugerencia aquí es usar /* CSS Comments */ para definir diferentes secciones en su archivo CSS, como una sección que define clases tipográficas, otra sección que define clases de botones, otra sección que define clases para menú, encabezado, pie de página, etc.