Quizás hayas escuchado que los sitios web en Internet se crean en el lenguaje HTML. Pero, en realidad, existe otra herramienta importante sin la cual Internet no se vería como estamos acostumbrados, sino más pálido y aburrido. Esta herramienta se llama CSS. De eso hablaremos hoy: explicaremos qué es CSS en palabras sencillas y para qué sirve este lenguaje.

¿Qué es CSS y Cómo Surgió?

CSS (Cascade Style Sheets) es un lenguaje formal para describir la apariencia de una página; hojas de estilo en cascada.

La primera mención de CSS apareció en 1994, cuando Håkon Wium Lie propuso usar el lenguaje CSS para el diseño estilístico de páginas web. Y el 17 de diciembre de 1996 se publicó la primera especificación (CSS1), y fue recomendada para su uso por el World Wide Web Consortium (W3C).

En este momento, la versión actual es CSS3, que ha avanzado mucho en sus capacidades en comparación con las versiones anteriores.

¿Para qué Sirve el Lenguaje CSS?

En los albores del desarrollo de Internet, los desarrolladores utilizaban HTML para diseñar páginas web, pero en algún momento sus capacidades fueron claramente insuficientes para las tareas de diseño de páginas. Los propietarios de sitios web querían crear sitios web con un diseño individual, a menudo complejo, para atraer a más usuarios.

Antes de la aparición de CSS, las páginas se diseñaban solo dentro del mismo documento con HTML. Las tecnologías CSS permitieron separar el contenido del documento y su diseño visual. Por ejemplo, gracias a ellos, se volvió fácil aplicar un estilo unificado para cada documento, simplemente vinculando un archivo CSS al HTML. Ahora, era suficiente cambiar el valor de cualquier propiedad de estilo solo en un archivo, y se aplicaba a todas las páginas donde se vinculaba ese archivo.

¿Cómo Funciona el Lenguaje CSS?

Para comenzar a trabajar con CSS, el desarrollador primero debe vincularlo a la página. Esto se puede hacer de dos maneras:

Método n.° 1. Vincular un archivo en el documento HTML en la etiqueta <head>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Aquí le comunicamos al navegador que queremos vincular CSS desde el archivo styles.CSS -->
</head>
<body>

</body>
</html>

Método n.° 2. Escribir estilos directamente en el cuerpo del documento dentro de la etiqueta <style>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
    <style>
        p {
            color: red;
            /* asignamos un color al contenido de la etiqueta <p> */
        }
    </style>
</head>
<body>
    <p>Texto</p>
</body>
</html>

Para diseñar cualquier elemento, CSS nos proporciona un mecanismo de selectores. Podemos referirnos a un elemento y definir valores de propiedad para él:

  • Por etiqueta: en ese caso, estos estilos se aplicarán a todas las etiquetas de la página.
  • Por ID: los estilos se aplicarán al elemento con la ID seleccionada.
  • Por clase: los estilos se aplicarán a todos los elementos con la clase seleccionada.
  • Por atributo: los estilos se aplicarán a todos los elementos con el atributo seleccionado.

CSS también tiene pseudo-selectores. Con su ayuda, podemos, por ejemplo, seleccionar solo el primer elemento de una lista o un elemento por número ordinal en una fila de elementos similares.

Ventajas de CSS

Ahora analicemos qué tiene de bueno CSS. Tiene al menos tres ventajas:

  • La simplicidad del propio lenguaje de estilos permite dominarlo con bastante rapidez. Y junto con el principio de separación del diseño del contenido, CSS reduce el tiempo de desarrollo del sitio web.
  • El tiempo de carga de la página se reduce al trasladar las reglas de presentación de datos a un archivo CSS independiente. Gracias a esto, el navegador solo carga la estructura del documento en HTML, así como los datos almacenados en la página. Y el navegador carga la presentación de estos datos solo una vez para todas las páginas y, al navegar entre páginas, se puede tomar del caché del navegador. Esto reduce significativamente el tiempo de carga de la página para el usuario y también reduce la carga en el servidor.
  • Facilidad para cambiar el diseño. Cuando necesitas cambiar algo en el diseño del sitio web, no es necesario editar cada página. Para hacer esto, solo puedes cambiar los valores de las propiedades CSS en el archivo deseado.

Desventajas de CSS

Pero incluso en este barril de miel no faltó una cucharada de alquitrán. CSS tiene un par de desventajas:

  • El diseño CSS puede mostrarse de manera diferente en diferentes navegadores. Especialmente a menudo hay problemas con diferentes pantallas en navegadores obsoletos. Y es posible que algunas propiedades CSS nuevas o sus valores no sean compatibles con ellos.
  • A veces es necesario corregir no solo el archivo CSS, sino también las etiquetas HTML. Esto sucede cuando las etiquetas HTML están vinculadas a selectores CSS. Debido a esto, surgen costos adicionales de tiempo para la edición y las pruebas.

¿Para qué se Utiliza CSS?

¿Qué podemos controlar exactamente en una página con CSS? Las tareas principales y más comunes:

  • Diseño de texto (establecer color, tamaño de fuente, alineación, altura de línea, etc.);
  • Diseño de elementos HTML (tamaños, márgenes, color de fondo, sombras, redondeos);
  • Construcción de cuadrículas para colocar contenido (más sobre esto a continuación);
  • Animaciones (con CSS podemos crear hermosas animaciones sin usar JavaScript);
  • Creación de diseño adaptable (podemos cambiar la pantalla según el tamaño del dispositivo en el que se ve el sitio web).

Enfoques para Construir Cuadrículas (float, flexbox, grid)

Crear cuadrículas para colocar contenido es una de las tareas más comunes en CSS. Al principio, se hacían con tablas, pero luego aparecieron soluciones más flexibles. Básicamente, un sistema de cuadrícula es una estructura que permite que el contenido se coloque tanto vertical como horizontalmente. Además, el sistema de cuadrícula es móvil, por lo que se puede utilizar en nuevos proyectos.

Uso de la propiedad float (método obsoleto)

La propiedad de estilo float se implementó originalmente en el lenguaje CSS para crear imágenes y recortes de texto ajustados. Pero con el tiempo, amplió su ámbito de aplicación. Los desarrolladores web carecían de herramientas para diseñar maquetas, mientras que las tablas para estos fines resultaron ser voluminosas, incómodas y moralmente obsoletas.

Para reemplazar las tablas para el diseño de columnas CSS, float fue adaptado, a pesar de que esta propiedad no está diseñada para tal función. Pero es universal y compatible con todos los navegadores. Al mismo tiempo, utilizar float a veces es difícil, ya que tiene varias características desagradables. En resumen, pueden hacer que el diseño simplemente se «desmorone». Además, float no se puede llamar intuitivo y otros propiedades que no están directamente relacionadas con float influyen en su funcionamiento. Por ejemplo, overflow.

A continuación, se muestra un ejemplo de un diseño de dos columnas que utiliza float.

Ejemplo n.° 1.

<div class="row">
<section class="sidebar">Barra lateral</section>
<section class="content">Contenido</section>
</div>
<style>
    .row {
        overflow: hidden; /* Ocultamos el desbordamiento */
    }

    .sidebar, .content {
        float: left; /* Creamos columnas */
        box-sizing: border-box; /* El box-sizing incluye el relleno en el ancho y la altura total del elemento */
        padding: 10px; /* Relleno alrededor del texto */
        min-height: 100px; /* Altura mínima */
    }

    .sidebar {
        width: 20%; /* Ancho de la columna */
        background: #ffead0; /* Color de fondo */
    }

    .content {
        width: 80%; /* Ancho de la columna */
        background: #c8eaf5; /* Color de fondo */
    }
</style>
Ejemplo de propiedad float en CSS
Ejemplo de propiedad float en CSS

Uso de Flexbox

CSS Flexbox está diseñado para crear diseños flexibles. Con esta tecnología, puedes distribuir elementos muy fácilmente y de forma flexible en un contenedor, distribuir el espacio disponible entre ellos y alinearlos, incluso si no tienen tamaños específicos.

CSS Flexbox te permite crear un diseño adaptable mucho más fácil que con float y posicionamiento. Flexbox se puede utilizar para el diseño CSS tanto de una página web completa como de sus bloques individuales.

La creación de un diseño CSS con Flexbox comienza con la configuración de la propiedad CSS display con el valor flex o flex-inline para el elemento HTML necesario.

Ejemplo n.° 2.

<style>
    .flex-container {
        display: flex; /* Mostrar como contenedor flex || inline-flex */
    }
</style>
<!-- Contenedor flex -->
<div class="flex-container">
    <div>Elemento flex #1</div>
    <div>Elemento flex #2</div>
    <div>Elemento flex #3</div>
</div>

En el diseño Flexbox se utilizan dos ejes para colocar elementos.

  • El primer eje está orientado horizontalmente de izquierda a derecha por defecto y se denomina eje principal.
  • El segundo eje es vertical y está orientado de arriba hacia abajo por defecto. El eje principal establece la dirección principal de los elementos Flexbox en el contenedor, mientras que el eje transversal determina su dirección cuando se transfieren a una fila.

De forma predeterminada, los elementos en un contenedor Flexbox se colocan a lo largo de la dirección del eje principal en una línea, es decir, de izquierda a derecha.

La dirección del eje principal se puede cambiar mediante la propiedad CSS flex-direction. Por ejemplo, al cambiar su valor a column, podemos cambiar la dirección de horizontal a vertical para que los elementos se alineen en una columna. O podemos invertirla 180 grados (usando el valor row-reverse) para que los elementos vayan de derecha a izquierda o de abajo hacia arriba.

Los elementos se pueden alinear dentro del contenedor a lo largo del eje principal mediante la propiedad CSS justify-content.

Ejemplo n.° 3.

justify-content: flex-start; /* flex-start (los elementos flex se alinean con el comienzo del contenedor) - predeterminado
flex-end (los elementos flex se alinean con el final del contenedor)
center (los elementos flex se alinean en el centro del contenedor)
space-between (distribuye uniformemente los elementos flex, con igual espacio entre ellos)
space-around (distribuye uniformemente los elementos flex, pero agrega espacio adicional antes del primer elemento y después del último) */
Ejemplos de contenedor CSS con flex
Ejemplos de contenedor CSS con flex

Cuadrícula usando grid-layout

Después de familiarizarte con float y Flex, habrás notado que diseñar diseños complejos y personalizados con estas herramientas no es tan fácil. Flex introdujo nuevas técnicas, pero no resolvió el problema principal: la creación prolongada de una cuadrícula para el sitio web. Para crear una buena estructura, debes realizar anidamientos adicionales, ya que Flex es esencialmente un sistema unidimensional. Podemos controlar cómodamente el contenido por el eje x o por el eje y. Esto es útil cuando se trabaja con contenido, pero no cuando se crea la estructura de una página web.

Para crear la estructura de la página, apareció otra poderosa herramienta: CSS Grid Layout. A diferencia de Flex, es un sistema bidimensional para organizar el contenido en la página. Para crear una cuadrícula con CSS Grid, debes especificar cuántas columnas debe tener la página de ancho y cuántas de ellas debe ocupar un fragmento específico de contenido. Si lo deseas, también puedes especificar la cantidad exacta de filas y colocar el contenido con mucha precisión en las filas y columnas deseadas. O en filas y columnas simultáneamente.

Ejemplo n.° 4.

<div class="grid-thirds">
<div class="container-1">.container-1</div>
<div class="container-2">.container-2</div>
<div class="container-3">.container-3</div>
<div class="container-4">.container-4</div>
<div class="container-5">.container-5</div>
</div>

Solo hay tres cosas que necesitas para construir una cuadrícula simple:

  • La propiedad display: grid, que activa CSS Grid.
  • La propiedad grid-template-columns, que define el número de columnas en la cuadrícula.
  • Las propiedades grid-column-gap y grid-row-gap, que definen cuánto espacio hay entre cada fila y columna.

Ejemplo n.° 5.

.grid-thirds {
/* activa CSS Grid */
display: grid;

/* Crea 3 columnas, cada una con un ancho de 1 fr */
grid-template-columns: 1fr 1fr 1fr;

/* Agrega un espacio de 10 px entre columnas y filas */
grid-column-gap: 10px;
grid-row-gap: 10px;
}
Ejemplo con CSS Grid
Ejemplo con CSS Grid

Metodologías del Lenguaje CSS

Hacer que el código permanezca conciso y que se pueda mantener o reutilizar es una tarea difícil. Si se descuida cualquier secuencia en la escritura del código, este puede salirse de control. Esto es relevante tanto para proyectos pequeños como para medianos y grandes, en los que trabajan más de un desarrollador.

Si el código es grande, con el tiempo se le realizan cambios, pero se hacen sin la debida organización. Esto lleva a que los equipos de desarrollo dejen de eliminar fragmentos de código y modificar los existentes, y simplemente comiencen a agregar nuevos estilos al final del documento. La razón de tales «correcciones» es que, a menudo, eliminar y editar estilos puede tener consecuencias inesperadas. Por ejemplo, incluso «romper» el diseño CSS en lugares específicos. Pero agregar estilos sin editar los demás tampoco es una estrategia ganadora, ya que el código puede duplicarse y surgen problemas de especificidad.

La mayoría de las veces, la elección de la metodología más adecuada para tus necesidades es un proceso interactivo. Comienza familiarizándote con lo que ya existe en la red. A continuación, describimos 3 metodologías que te ayudarán a combatir los estilos deficientes.

Metodología BEM

El objetivo de la metodología BEM es «desarrollar sitios web que deban lanzarse rápidamente y mantenerse durante mucho tiempo. La metodología ayuda a crear componentes de interfaz expandibles y reutilizables».

El concepto de esta metodología CSS se basa en un soporte sencillo de proyectos a lo largo del tiempo y en la reutilización de componentes. La estrategia principal de BEM consiste en organizar el código CSS en módulos reutilizables mediante un sistema inteligente de nomenclatura.

Metodología Atomic CSS

Atomic CSS, también conocido como ACSS, es CSS atómico. En cierto modo, este enfoque representa a OOCSS llevado al extremo. Al utilizar este enfoque, se debe crear una clase separada para cada valor de propiedad que se reutilice.

Ejemplo: el estilo «margin-top: 1px» sugiere crear la clase «mt-1», el estilo «width: 200px» sugiere crear la clase «w-200».

Este estilo permite reducir el volumen de código CSS mediante la reutilización de declaraciones y, también, implementar cambios en los módulos con relativa facilidad, por ejemplo, si cambió la especificación técnica.

Sin embargo, este enfoque tiene desventajas importantes. Son las siguientes:

  • Los nombres de las clases son nombres descriptivos de propiedades, que no describen la esencia semántica del elemento, lo que a veces puede dificultar el desarrollo.
  • Las configuraciones de visualización de los elementos se transfieren a HTML. Y, como recordamos, no es para eso que se inventaron las hojas de estilo.

Debido a estas desventajas, el enfoque encontró una ola de críticas.

No obstante, puede ser eficaz para proyectos muy grandes. Además, se utiliza CSS atómico en varios marcos para establecer estilos correctores de elementos y en algunas capas de otras metodologías.

Metodología SMACSS

SMACSS es la abreviatura de Scalable and Modular Architecture for CSS («arquitectura escalable y modular para CSS»). Su objetivo principal es reducir la cantidad de código y su división lógica en capas de uso. SMACSS propone dividir los estilos en 5 partes en el orden en que se incluyen en el documento.

  • Base rules: estilos básicos. Son estilos de los elementos principales del sitio: body, input, button, ul, ol, etc. En esta sección se utilizan principalmente selectores de etiquetas y atributos, clases, en casos excepcionales. Por ejemplo, si tienes selectores de JavaScript estilizados.
  • Layout rules: estilos de capas de diseño. Aquí están los estilos de elementos globales: tamaños del encabezado, pie de página, barra lateral, etc.
  • Modules rules: estilos de módulos, es decir, de los bloques que se utilizarán varias veces en la página.
  • State rules: estilos de estado. Aquí se indican los estados de los módulos y del esqueleto del sitio.
  • Theme rules: diseño. Aquí se describen los estilos de diseño que, con el tiempo, quizás deban reemplazarse. Es conveniente hacerlo, por ejemplo, con un tema oscuro para el sitio web.

Este enfoque simplifica la escritura y el mantenimiento del código. Últimamente, SMACSS atrae a muchos desarrolladores.

Curso de Programación web

El Futuro de CSS

CSS es una tecnología establecida y madura que actualmente cubre bien las necesidades de los desarrolladores. Es difícil suponer que aparecerán cambios en el estándar CSS que influyan drásticamente en el proceso de escritura de estilos.

Por lo tanto, la próxima versión de CSS4 será simplemente un conjunto de novedades geniales: nuevas propiedades y nuevos valores para las ya existentes. Muchas de ellas están relacionadas con la creciente gama de dispositivos en los que los usuarios ven sitios web; ¡ahora incluso se puede navegar por Internet desde relojes! Y también, con las crecientes demandas de los usuarios de un diseño llamativo con animaciones hermosas y complejas, una disposición de contenido no estándar y otras posibilidades.

Categorizado en:

CSS,