CSS 및 BEM
이 기사는 CSS와 BEM에 대해 설명합니다.
YouTube Video
미리보기를 위한 HTML
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 및 BEM: 효과적인 스타일 관리 접근법
CSS는 웹사이트의 외형을 정의하는 데 사용되는 기본 언어입니다. 그러나 특히 대규모 프로젝트에서는 CSS를 효과적으로 관리하는 것이 어려울 수 있습니다. BEM(블록 엘리먼트 수정자)은 이러한 문제를 해결하고 재사용성과 유지보수성을 향상시키기 위해 고안된 CSS 명명 규칙입니다.
CSS의 문제점과 BEM의 필요성
CSS에서 직면하는 문제에는 다음과 같은 것이 있습니다:.
- 전역 네임스페이스 충돌: CSS에서 클래스 이름은 전역적이므로 다양한 컴포넌트 간에 충돌 위험이 존재합니다.
- 복잡한 선택자의 과도한 사용: 지나치게 복잡한 하위 선택자나 ID 선택자는 특수성을 증가시켜 이후 수정이 어려워집니다.
- 재사용성 저하: 특정 스타일은 다른 컴포넌트에서 재사용하기 어려워집니다.
BEM은 이러한 문제를 해결하기 위해 고안되었습니다.
BEM의 기본 개념
BEM은 세 가지 주요 요소로 구성됩니다:.
- 블록: 고유의 의미를 가진 독립적인 컴포넌트.
- 엘리먼트: 블록의 일부로서 논리적으로 연결된 구성 요소.
- 수정자: 블록 또는 엘리먼트의 외형이나 동작을 변경.
BEM 명명 규칙은 아래 형식을 따릅니다:.
.block__element--modifierblock: 블록의 컴포넌트 이름.element: 블록의 일부인 엘리먼트.modifier: 특정 상태나 스타일 변화를 나타냅니다.
실용적 예시
아래는 간단한 예제입니다.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>button은 블록입니다.button__text는 요소입니다.button--primary는 수정자입니다.
BEM의 장점
다음은 BEM의 장점입니다.
- 일관성 명명 규칙이 일관되기 때문에 코드가 더 읽기 쉬워집니다.
- 재사용성 컴포넌트를 재사용하기 쉬워집니다.
- 유지보수성 다른 개발자들도 코드를 더 쉽게 이해할 수 있어, 수정이 용이해집니다.
BEM을 사용한 프로젝트 구축
HTML 설계
다음은 BEM을 적용한 HTML 예시입니다.
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>CSS 설계
HTML에 대응하는 CSS를 다음과 같이 작성하세요.
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}- 이 CSS는 BEM(블록 엘리먼트 수정자) 규칙을 사용하여 모듈형 스타일을 정의하고, 재사용성과 유지보수성을 높입니다.
스타일 확장
특정 메뉴 항목을 비활성화하기 위해 새로운 수식어를 추가하는 방법을 살펴봅시다.
해당 HTML은 다음과 같이 보일 것입니다.
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}- 이 CSS는 비활성화된 메뉴 항목을 시각적으로 흐리게 하고 클릭 상호작용을 비활성화하는 수식어를 정의합니다.
자주 묻는 질문
BEM을 사용할 때는 다음과 같은 점을 염두에 둘 수 있습니다.
Q1: BEM의 네이밍 규칙을 엄격히 따라야 하나요?
BEM의 명명 규칙을 엄격하게 따를 필요는 없지만, 일관성을 유지하는 것이 중요합니다. 프로젝트 내에서 통합된 규칙을 세우고 팀 모두가 이를 따르도록 해야 합니다.
Q2: BEM을 도입하면 CSS가 너무 길어지지 않나요?
BEM을 도입하면 CSS 클래스 이름이 길어질 수 있지만, 이는 구성 요소의 역할을 더욱 명확하게 해줍니다. 그 결과, 유지보수가 향상되고, 중복성보다 장점이 더 많아집니다.
Q3: BEM을 다른 CSS 프레임워크와 함께 사용할 수 있나요?
BEM은 다른 CSS 프레임워크와 함께 사용할 수 있습니다. 예를 들어, Tailwind CSS나 Bootstrap을 사용할 때도 사용자 정의 컴포넌트에 BEM을 적용할 수 있습니다.
결론
BEM은 명확한 명명 규칙을 제공하여 CSS를 모듈화하고 관리하기 쉽게 만듭니다. 이 방법을 사용하면 스타일 충돌을 방지할 수 있고, 유지보수성과 재사용성을 크게 향상시킬 수 있습니다. 적절한 명명 규칙을 설계하는 것은 프로젝트의 품질과 생산성 향상에 기여합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.