다양한 CSS 기술

BEM (Block Element Modifier)

BEM 은 CSS 클래스 이름을 짓는 규칙이다.
블록(Block), 요소(Element), 변경자(Modifier) 형태로 쓰고. 블록은 div 같은 영역을 의미하고, 요소는 button, input 같은 요소를 의미한다. 마지막으로 변경자는 요소의 변형을 표시하는 것이다.
이것들을 .block__element--modifier 형태로 쓴다.

Sass(SCSS)

CSS는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않는다.
그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들었고 그 중에 가장 많이 쓰이는 것이 Sass이다.
변수, 네스팅 문법, 믹스인 등 다양한 기능을 제공한다.
이 중 변수 네스팅 등의 문법은 웹 표준으로 흡수되었다.

네스팅 예시

Scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

믹스인 예시

Scss

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}

.alert {
  @include theme($theme: DarkRed);
}

.success {
  @include theme($theme: DarkGreen);
}

CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(DarkGray, .25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(DarkRed, .25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(DarkGreen, .25);
  color: #fff;
}

React에서 Sass 적용하기
Next.js에서 Sass 적용하기
Sass

CSS Module

리액트 컴포넌트를 CSS로 개발하다 보면 CSS 이름이 겹치는 문제가 발생할 수 있다.
CSS Modules는 마치 자바스크립트 모듈을 사용하듯이 CSS 파일을 각각 독립적으로 사용할 수 있도록 해준다.

import styles from './Sidebar.module.css';

export default function Sidebar() {
  return (
    <div>
      <img className={styles.logo} src="/logo.svg" />
      <input className={styles.searchInput} />
      <nav className={styles.menu}>
        ...
      </nav>
    </div>
  );
}

.logo 라는 똑같은 클래스 이름을 사용하더라도 CSS Modules에서는 서로 다른 클래스 이름이다.
클래스 이름들을 담은 객체로 가져와서 사용한다.

별도의 설정 없이 사용할 수 있다.

CSS in Javascript

자바스크립트 코드로 CSS를 작성하는 방식 = Styled Components

Atomic CSS, Utility-first

Utility-first에서는 각 CSS 속성을 CSS 클래스로 만들고 CSS 속성을 작성하는 게 아니라 미리 잘 정의된 클래스들을 가지고 조합해서 디자인을 적용한다.

<div class="flex justify-end">
  <button class="bg-secondary px-16 py-8">취소</button>
  <button class="bg-primary px-16 py-8">비우기</button>
</div>