Articles
Introducción a CSS
CSS y BEM

CSS y BEM

Este artículo explica CSS y BEM.

YouTube Video

HTML para vista previa

css-bem.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS y BEM: Un enfoque para una gestión efectiva de estilos

CSS es un lenguaje fundamental utilizado para definir la apariencia de un sitio web. Sin embargo, gestionar CSS de manera efectiva puede ser un desafío, especialmente en proyectos de gran escala. BEM (Block Element Modifier) es una convención de nombres de CSS diseñada para abordar estos problemas y mejorar la reutilización y el mantenimiento.

Desafíos en CSS y la necesidad de BEM

Los desafíos en CSS incluyen los siguientes problemas:.

  1. Colisión de espacio de nombres global: En CSS, los nombres de clase son globales, lo que plantea un riesgo de colisión entre diferentes componentes.
  2. Uso excesivo de selectores complejos: Los selectores descendientes o de ID demasiado complejos aumentan la especificidad, dificultando las modificaciones futuras.
  3. Reusabilidad reducida: Los estilos específicos se vuelven más difíciles de reutilizar en otros componentes.

BEM fue diseñado para resolver estos problemas.

Conceptos básicos de BEM

BEM consta de tres elementos principales:.

  1. Bloque: Un componente independiente con su propio significado.
  2. Elemento: Una parte de un bloque, lógicamente conectado a él.
  3. Modificador: Cambia la apariencia o el comportamiento de un bloque o elemento.

Las convenciones de nomenclatura de BEM siguen el siguiente formato:.

.block__element--modifier
  • bloque: El nombre del componente del bloque.
  • elemento: Un elemento que es parte del bloque.
  • modificador: Representa un estado específico o una variación de estilo.

Ejemplo práctico

A continuación se muestra un ejemplo simple.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button es un bloque.
  • button__text es un elemento.
  • button--primary es un modificador.

Beneficios de BEM

Las siguientes son las ventajas de BEM.

  • Consistencia Debido a que la convención de nombres es consistente, el código se vuelve más fácil de leer.
  • Reutilización Se vuelve más fácil reutilizar los componentes.
  • Mantenibilidad Otros desarrolladores pueden entender el código más fácilmente, facilitando las modificaciones.

Construcción de un proyecto utilizando BEM

Diseño HTML

Aquí hay un ejemplo de HTML que aplica BEM.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

Diseño CSS

Escribe el CSS correspondiente para el HTML de la siguiente manera.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • Este CSS define estilos modulares utilizando la convención BEM (Bloque Elemento Modificador) para mejorar la reutilización y la mantenibilidad.

Extensión de estilos

Veamos cómo agregar un nuevo modificador para hacer inactivo un elemento específico del menú.

El HTML correspondiente se vería así.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • Este CSS define un modificador que atenúa visualmente los elementos inactivos del menú y desactiva las interacciones de clic.

Preguntas Frecuentes

Al utilizar BEM, se pueden tener en cuenta los siguientes puntos.

P1: ¿Debo adherirme estrictamente a las convenciones de nomenclatura de BEM?

No es necesario seguir estrictamente las reglas de nomenclatura de BEM, pero mantener la consistencia es importante. Establece reglas unificadas dentro del proyecto y asegura que todo el equipo las siga.

P2: ¿No hace que el uso de BEM haga el CSS más extenso?

Introducir BEM puede dar lugar a nombres de clases CSS más largos, pero esto hace que los roles de los componentes sean más claros. Como resultado, la mantenibilidad mejora y los beneficios superan la redundancia.

P3: ¿Se puede usar BEM junto con otros frameworks de CSS?

BEM puede usarse junto con otros frameworks de CSS. Por ejemplo, incluso al usar Tailwind CSS o Bootstrap, puedes aplicar BEM a componentes personalizados.

Conclusión

BEM proporciona una convención de nombres clara para modularizar y hacer que el CSS sea más fácil de manejar. Al usar este método, puedes prevenir conflictos de estilos y mejorar drásticamente la mantenibilidad y la reutilización. Diseñar convenciones de nombres apropiadas contribuye a mejorar la calidad y productividad del proyecto.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

`aspect-ratio` y diseño responsivo