CSS at BEM
Ipinaliliwanag ng artikulong ito ang CSS at BEM.
YouTube Video
HTML para sa Preview
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 & 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<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
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<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
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<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
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 at BEM: Isang Paraan para sa Epektibong Pamamahala ng Estilo
Ang CSS ay isang pangunahing wika na ginagamit upang tukuyin ang itsura ng isang website. Gayunpaman, maaaring maging mahirap ang pamamahala ng CSS nang epektibo, lalo na sa mga malalaking proyekto. Ang BEM (Block Element Modifier) ay isang convention ng pagbibigay ng pangalan sa CSS na idinisenyo upang tugunan ang mga isyung ito at mapabuti ang reusability at maintainability.
Mga Hamon sa CSS at ang Pangangailangan para sa BEM
Kasama sa mga hamon sa CSS ang mga sumusunod na problema:.
- Pagkakabangga sa global namespace: Sa CSS, ang mga pangalan ng klase ay global, na nagdudulot ng panganib ng pagkakabangga sa pagitan ng iba't ibang mga bahagi.
- Sobrang paggamit ng mga kumplikadong selektor: Ang mga napakakumplikadong descendant o ID selectors ay nagpapataas ng specificity, na nagpapahirap sa mga pagbabago sa hinaharap.
- Bawas na reusability: Ang mga partikular na estilo ay nagiging mas mahirap gamitin muli sa ibang mga bahagi.
Ang BEM ay idinisenyo upang lutasin ang mga problemang ito.
Mga Pangunahing Konsepto ng BEM
Ang BEM ay binubuo ng tatlong pangunahing elemento:.
- Block: Isang independent na bahagi na may sariling kahulugan.
- Element: Isang bahagi ng isang block, lohikal na konektado rito.
- Modifier: Nagbabago ng itsura o asal ng isang block o element.
Ang mga naming conventions ng BEM ay sumusunod sa pormat sa ibaba:.
.block__element--modifierblock: Ang pangalan ng component ng block.element: Isang element na bahagi ng isang block.modifier: Kumakatawan sa isang partikular na estado o pagbabagong estilo.
Praktikal na Halimbawa
Narito ang isang simpleng halimbawa.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>- Ang
buttonay isang bloke. - Ang
button__textay isang elemento. - Ang
button--primaryay isang modifier.
Mga Benepisyo ng BEM
Ang mga sumusunod ay mga benepisyo ng BEM.
- Pare-pareho Dahil pare-pareho ang pamamaraan ng pagbibigay ng pangalan, mas madaling basahin ang code.
- Magagamit muli Mas madali nang gamitin muli ang mga komponent.
- Madaling mapanatili Mas madaling maintindihan ng ibang developer ang code kaya madali ring magbago o mag-edit.
Pagbuo ng proyekto gamit ang BEM
Disenyo ng HTML
Narito ang isang halimbawa ng HTML na gumagamit ng 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>Disenyo ng CSS
Isulat ang kaukulang CSS para sa HTML na tulad nito.
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}- Ang CSS na ito ay naglalarawan ng mga modular na estilo gamit ang BEM (Block Element Modifier) para mapahusay ang magagamit muli at madaling mapanatili.
Pagpapalawak ng mga estilo
Tingnan natin kung paano magdagdag ng bagong modifier para gawing inactive ang isang partikular na menu item.
Ang kaukulang HTML ay magmumukhang ganito.
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}- Ang CSS na ito ay nagtatakda ng modifier na nagpapadilim ng mga inactive na menu item at hindi na ito ma-click.
Mga Madalas na Itanong
Kapag ginagamit ang BEM, maaari mong tandaan ang mga sumusunod na punto.
Q1: Kailangan ko bang mahigpit na sundin ang mga patakaran sa pagngalan ng BEM?
Hindi kailangang mahigpit sundin ang mga patakaran sa pagbibigay ng pangalan ng BEM, ngunit mahalaga ang pagpapanatili ng pagkakapare-pareho. Magtatag ng pinag-isang mga patakaran sa loob ng proyekto at tiyakin na sinusunod ito ng buong team.
Q2: Hindi ba magpapabigat ng CSS ang paggamit ng BEM?
Ang paggamit ng BEM ay maaaring magresulta sa mas mahahabang pangalan ng CSS class, ngunit mas nagiging malinaw ang mga tungkulin ng mga bahagi nito. Bunga nito, mas napapadali ang pagpapanatili, at mas napapakinabangan ang mga benepisyo kaysa sa paulit-ulit na mga pangalan.
Q3: Pwede bang gamitin ang BEM kasabay ng ibang mga CSS framework?
Maaaring gamitin ang BEM kasabay ng iba pang mga CSS framework. Halimbawa, kahit na gumamit ka ng Tailwind CSS o Bootstrap, maaari mong i-apply ang BEM sa mga custom na komponent.
Konklusyon
Nagbibigay ang BEM ng malinaw na pamamaraan ng pagbibigay ng pangalan upang gawing modular ang CSS at mas madaling pamahalaan. Sa paggamit ng pamamaraang ito, maiiwasan mo ang mga conflict sa style at lubos na mapapabuti ang pagpapanatili at muling paggamit. Ang pagdidisenyo ng tamang pamamaraan ng pagbibigay ng pangalan ay nakakatulong sa pagpapahusay ng kalidad at produktibidad ng proyekto.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.