실무 CSS 코드 작성법 (BEM 아키텍처와 브라우저 호환성)

혼자서 작은 웹사이트를 만들 때는 상관없지만, 10명이 넘는 개발자가 네이버 같은 거대한 사이트를 만들 때는 클래스 이름이 겹쳐서 디자인이 박살나는 대참사가 벌어집니다. 이를 막기 위한 작명 규칙이 BEM입니다.

언더바 2개(__)는 내가 누구의 소속(Element)인지 밝힙니다.
대시 2개(--)는 나의 현재 상태나 강조(Modifier)를 나타냅니다.

심화 학습

브라우저 호환성 (Vendor Prefix)

새로 나온 최신 CSS 기술을 아직 업데이트하지 않은 구형 브라우저에서도 작동하게 만들기 위해 브라우저 회사(Vendor)의 접두사를 붙여주는 것입니다.

🛠️ 실무 꿀팁: Autoprefixer

요즘 실무에서는 개발자가 일일이 저 긴 접두사를 손으로 치지 않습니다. 표준 코드 한 줄만 적으면, Webpack이나 PostCSS 같은 도구가 코드를 배포할 때 알아서 벤더 프리픽스를 덕지덕지 붙여주는 자동화 시스템을 사용합니다.

<div style="padding: 20px; font-family: sans-serif;">
    <h3 style="margin-top: 0;">BEM (Block, Element, Modifier) 적용 예시</h3>
    <p style="color: #64748b; font-size: 0.9rem; margin-bottom: 20px;">
        HTML 태그의 클래스 이름만 봐도 <b>어떤 컴포넌트(menu)</b>의 <b>어느 부분(item)</b>이 <b>어떤 상태(active)</b>인지 명확하게 알 수 있습니다.
    </p>

    <!-- HTML 적용 모습 -->
    <ul class="menu">
        <!-- menu(블록)의 item(엘리먼트)이면서 active(모디파이어) 상태 -->
        <li class="menu__item menu__item--active">홈</li>
        
        <!-- menu(블록)의 item(엘리먼트) -->
        <li class="menu__item">소개</li>
        <li class="menu__item">서비스</li>
        <li class="menu__item">문의하기</li>
    </ul>
</div>
<!-- ====== 브라우저 호환성 (Vendor Prefix) ====== -->
<div style="margin: 30px 0; border-top: 1px solid #475569;"></div>
<style>
/* 과거 크롬, 사파리, 파이어폭스마다 다르게 적어야 했던 벤더 프리픽스 */
.box {
    width: 100px;
    height: 100px;
    background: #3b82f6;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    margin: 40px auto;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>

<div class="box">
  <div style="transform: rotate(-45deg);">Box</div>
</div>

실행 결과