Work/HTML, CSS

[CSS] BEM - CSS : HTML wrapper의 사용

디쟈이너 2021. 3. 23. 20:48

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다.

 

BEM - CSS : HTML wrapper의 사용

전통적으로 HTML wrapper를 사용하는 이유는 아래와 같습니다.

  • HTML 엘리먼트를 다른 엘리먼트에 배치하기 위해
  • 엘리먼트를 섹션 안에 배치하기 위해

BEM 방법론은 mix를 사용하거나 추가 블록 엘리먼트를 생성해 동일한 결과를 달성합니다. 특정한 기능이 없는 불필요하고 추상적인 wrapper를 만들 필요가 없습니다.

다른 블록 기준으로 블록 배치하기

다른 블록 기준으로 블록을 배치하려면 mix 를 사용하는것이 가장 좋습니다.

HTML:

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>

CSS:

.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

블록 안에 엘리먼트 배치하기

중첩된 HTML 엘리먼트의 위치는 일반적으로 추가적인 블록을 생성하여 배치합니다

HTML:

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>

CSS:

.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}
반응형