Articles
Wprowadzenie do CSS
CSS i BEM

CSS i BEM

Ten artykuł wyjaśnia, czym są CSS i BEM.

YouTube Video

HTML do podglądu

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 i BEM: Podejście do efektywnego zarządzania stylami

CSS to podstawowy język używany do definiowania wyglądu strony internetowej. Jednak efektywne zarządzanie CSS może być trudne, zwłaszcza w przypadku dużych projektów. BEM (Block Element Modifier) to konwencja nazewnictwa CSS zaprojektowana w celu rozwiązania tych problemów oraz poprawy wielokrotnego użycia i łatwości utrzymania kodu.

Wyzwania w CSS i potrzeba stosowania BEM

Wyzwania w CSS obejmują następujące problemy:.

  1. Globalna kolizja nazw: W CSS nazwy klas są globalne, co stwarza ryzyko kolizji między różnymi komponentami.
  2. Nadmierne użycie złożonych selektorów: Zbyt złożone selektory potomne lub identyfikatory zwiększają specyficzność, utrudniając przyszłe modyfikacje.
  3. Zmniejszona możliwość ponownego użycia: Konkretne style stają się trudniejsze do ponownego wykorzystania w innych komponentach.

BEM został zaprojektowany, aby rozwiązać te problemy.

Podstawowe pojęcia w BEM

BEM składa się z trzech głównych elementów:.

  1. Blok: Niezależny komponent mający własne znaczenie.
  2. Element: Część bloku, logicznie z nim powiązana.
  3. Modyfikator: Zmienia wygląd lub zachowanie bloku lub elementu.

Konwencje nazewnictwa w BEM przestrzegają poniższego formatu:.

.block__element--modifier
  • block: Nazwa komponentu bloku.
  • element: Element będący częścią bloku.
  • modifier: Reprezentuje konkretny stan lub wariant stylu.

Praktyczny przykład

Poniżej znajduje się prosty przykład.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button jest blokiem.
  • button__text jest elementem.
  • button--primary jest modyfikatorem.

Korzyści z BEM

Poniżej przedstawiono zalety BEM.

  • Spójność Dzięki spójnemu nazewnictwu kod staje się łatwiejszy do odczytania.
  • Ponowne użycie Łatwiej jest ponownie używać komponentów.
  • Łatwość utrzymania Inni programiści mogą łatwiej zrozumieć kod, co ułatwia wprowadzanie zmian.

Tworzenie projektu z wykorzystaniem BEM

Projektowanie HTML

Oto przykład kodu HTML wykorzystującego 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>

Projektowanie CSS

Napisz odpowiedni CSS dla HTML w następujący sposób.

 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}
  • Ten CSS definiuje modularne style przy użyciu konwencji BEM (Block Element Modifier), aby zwiększyć możliwość ponownego użycia i łatwość utrzymania.

Rozszerzanie stylów

Przyjrzyjmy się, jak dodać nowy modyfikator, aby uczynić konkretny element menu nieaktywnym.

Odpowiedni HTML będzie wyglądał następująco.

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}
  • Ten CSS definiuje modyfikator, który wizualnie przyciemnia nieaktywne elementy menu i wyłącza interakcje kliknięcia.

Najczęściej zadawane pytania

Podczas korzystania z BEM można mieć na uwadze następujące kwestie.

P1: Czy muszę ściśle przestrzegać konwencji nazewniczych BEM?

Nie trzeba ściśle przestrzegać zasad nazewnictwa BEM, ale zachowanie spójności jest ważne. Ustanów ujednolicone zasady w projekcie i upewnij się, że cały zespół ich przestrzega.

P2: Czy wprowadzenie BEM nie sprawia, że CSS staje się bardziej rozwlekły?

Wprowadzenie BEM może skutkować dłuższymi nazwami klas CSS, ale dzięki temu role komponentów są bardziej przejrzyste. W rezultacie poprawia się łatwość utrzymania, a korzyści przewyższają nadmiarowość.

P3: Czy BEM można używać razem z innymi frameworkami CSS?

BEM może być używany razem z innymi frameworkami CSS. Na przykład, nawet używając Tailwind CSS lub Bootstrap, możesz zastosować BEM do niestandardowych komponentów.

Wnioski

BEM zapewnia przejrzystą konwencję nazewnictwa do modularizacji i łatwiejszego zarządzania CSS. Stosując tę metodę, można zapobiec konfliktom stylów i znacznie poprawić łatwość utrzymania oraz możliwość ponownego użycia. Projektowanie odpowiednich konwencji nazewnictwa przyczynia się do poprawy jakości projektu i produktywności.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

`aspect-ratio` — Właściwość i projektowanie responsywne