ways to create css

• 외부에.css file
• CSS-in-JS
• CSS Pre-processor (원래css형태로 컴파일됨)

---

CSS-in-JS

CSS-in-JS란 JavaScript 언어로 CSS를 코딩하는 것을 말한다.
외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합한다.

• styled-components
• emotion

const CommenterInfo = styled.div`
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
`;

export default function ProfileName() {
    return <CommenterInfo>name</CommenterInfo>;
};

CSS Pre-processor

• Scss
  {}, ;을 사용한다. CSS와 유사하다+nested

• Sass
  {}, ; 을 생략한다. 들여쓰기는 2 spaces

• PostCSS

/* Scss */ 
.container {
    .main {
        display: flex
        a {
            text-align: center;
        }
    }
}

/* Sass */ 
.container 
  .main
    display: flex
    a 
      text-align: center

---

CSS / CSS Module

CSS의 단점: class이름이 중복될수 있고, js와 연동이 어렵다
CSS Module은 부여한 class 이름뒤에 숫자나 알파벳이 자동으로 부여하여 class 이름이 중복되는 것을 방지한다.

CSS

예를 들어 여러파일에서 .container를 쓴다고 할때, 각 container는 스타일링은 차별화 할 수 없다.

CSS module

css를 모듈화해서 class 이름이 컴포넌트명_클레스명__랜덤값 형태로 붙어서 전역 처리되는 것을 방지한다.

주의할 점

CSS Module로 작성하더라도 태그(Element) 단독으로 작성되면 전역으로 적용된다

a {
  font-size: 2rem
}

위 코드는 CSS Module로 작성되었지만 a 태그 앞에 선택자가 없기 때문에 전역으로 적용된다.

sass 에 관한 정보