2022년에 알아야 할 5가지 CSS 방법론

반응형

크고 복잡하고 빠르게 반복되는 시스템에서 CSS는 유지하기가 매우 어렵다. CSS에 내장된 범위 지정 메커니즘이 없는 것도 원인 중 하나다.

CSS에서는 모든 것이 글로벌합니다. CSS가 네이티브 범위 지정 메커니즘을 얻기 전까지는 HTML 문서의 특정 섹션에 대한 스타일을 고정하는 우리만의 시스템을 고안해야 합니다. CSS 방법론이 해결책입니다.

이 기사에서는 2022년에 알아야 할 CSS 방법론에 대해 알아보겠습니다!

1. 객체 지향 CSS

 

OOCSS 개념은 유연하고 모듈식이며 상호 호환 가능한 구성 요소를 작성하는 데 도움이 됩니다.

예를 들어, 단추 요소의 스타일은 다음과 같은 클래스를 통해 설정할 수 있습니다.

• .button — 버튼의 기본 구조를 제공합니다.
• .grey-btn — 색상 및 기타 시각적 특성을 적용합니다.

CSS:

.button {
      box-sizing: border-box;
      height: 50px;
      width: 100%;
}

.grey-btn {
      background: #EEE;
      border: 1px solid #DDD;
      box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
      color: #555;
}

 

HTML:

<button class="button grey-btn">
      Click me!
        </button>

2. 원자력 CSS

Atomic CSS는 시각적 기능에 기반한 이름을 가진 소규모 단일 목적 클래스를 선호하는 CSS 아키텍처에 대한 접근법이다.

예:

 

색상은 16진수 값을 사용하여 설정됩니다. 알파 투명도는 불투명도 값을 16진수 색상에 더함으로써 생성됩니다.

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
      Lorem ipsum
      </div>

3. BEM

블록 요소 수정자는 프런트 엔드 개발에서 재사용 가능한 구성요소 및 코드 공유를 작성하는 데 도움이 되는 방법론입니다.

예:

 

<form class="loginform loginform--errors">
      <label class="loginform__username loginform__username--error"> 
                Username <input type="text" name="username" />
                      </label>
    <label class="loginform__password">
              Password <input type="password" name="password" />
                    </label>
    <button class="loginform__btn loginform__btn--inactive">
              Sign in
          </button>
</form>

.loginform 클래스는 세 가지 요소로 구성된 블록이다.

4. SMA CSS

SMACSS는 설계 프로세스를 검사하는 방법이며 이러한 경직된 프레임워크를 유연한 사고 프로세스에 맞추는 방법입니다.

예:

 

우리의 레이아웃이 .l-footer라고 합시다. 우리는 그 안에 검색 양식 모듈이 있습니다. 사용자가 검색 양식을 이미 한 번 이상 제출했습니다.

<section class="l-footer">
      <form class="search is-submitted">
                <input type="search" />
                          <input type="button" value="Search">
                                </form>
</section>

5. 체계적 CSS

체계적인 CSS는 OOCSS, BEM, SMACSS, SUIT CSS 및 기타 CSS 방법론에서 찾을 수 있는 많은 원칙과 아이디어를 공유합니다. 체계적 CSS는 기존 CSS 방법론에 대한 단순한 대안이다.

예:

 

다음은 탐색 모음과 검색 양식을 렌더링하는 두 개의 위젯에 대한 표시입니다.

<!-- navigation bar --> 
<div class="NavBar">
     <ul>
        <li><a href="./">Home</a></li>
                <li><a href="about.html">About</a></li>
                        <li><a href="learn/">Learn</a></li>
                                <li><a href="extend/">Extend</a></li>
                                        <li><a href="share/">Share</a></li>
                                             </ul>
</div>

<!-- search form --> 
<div class="SearchBox">
     <form action="search.html" method="get">
              <label for="input-search">Search</label>
       <input name="q" type="search" id="input-search" />
                <button type="submit">Search</button>
    </form>
</div>

그런 다음 위젯 및 무계층 HTML 요소 형태의 내용이 레이아웃 내에 배치됩니다. 마지막으로 수식어 클래스가 추가되어 사물의 기본 표현을 바꿉니다.

결론

모든 CSS 기법은 대형 웹 디자인을 수많은 작은 모듈식 개별 구성요소로 분할하기 위한 클래스 기반 접근 방식을 제공함으로써 CSS의 확장성과 유지보수성 문제를 해결한다.

 

각 UI 모듈은 설계 전반에 걸쳐 재사용될 수 있으며, CSS 방법론이 동일할 경우 한 프로젝트에서 다음 프로젝트로 포팅될 수도 있다. CSS 접근 방식은 CSS 확장성 문제를 해결하는 것 이상의 역할을 합니다.

읽어주셔서 감사합니다.

이 게시물이 마음에 드셨다면 제 기사, 제품 출시 및 기술 뉴스를 놓치지 마시고 제 뉴스레터를 구독해 주십시오!