[CSS] 웹 스타일링

🐾들어가며

CSS 관련해서 여러 가지를 사용해보는데, 어떤 차이가 있는지 간단하게 구분해보려고 글을 씁니다.

✨본격적으로

✅CSS, module, SCSS, CSS in JS...

CSS: 웹 문서의 디자인을 씌울 수 있게 만드는 스타일 시트.
-> 대규모 프로젝트에서 전역적으로 적용되는 CSS는 관리의 어려움이 있다.

selecorA {
    /*...css...*/
} 

selectorB.class {
    /*...css...*/
}

CSS-module: style.module.css 처럼 CSS를 module화하여 사용
-> 중복되는 클래스명이어도 고유한 hash 값이 클래스명에 붙기 때문에 다른 스타일로 작성할 수 있다.

selecor {
    /*...css...*/
} 

selector.class {
    /*...css...*/
}

SCSS: CSS에서 코드의 가독성을 향상하고, 재사용성을 높이기 위해 사용하는 전처리기
-> Sass의 3버전에서 새롭게 등장한 SCSS. Sass의 모든 기능을 지원하는 CSS의 상위집합.

@import './shared.scss';

selecor {
    /*...css...*/
    &.class {
        /*...css...*/
    }
}

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.class { @include border-radius(10px); }

CSS in JS: 자바스크립트를 사용해 CSS를 적용할 수 있다.
-> React와 사이가 좋다. 컴포넌트를 만드는 방식으로 사용이 가능하기 때문에.
대표적으로 styled-components와 emotion이 있다.

const Box = styled.div`
    //...css...
`
<Box/>

-> vue의 style scoped: module과 비슷하지만, 하나의 컴포넌트에서 적용할 수 있도록 한다.
data 속성값을 사용해 css 선택자를 변경하는 것.

✔️결론

이렇게 까지 적고 나니 여기에서 무엇을 더 알아야 좋을까 하는 고민과 더 이상 글이 이어지지 않아서 마무리합니다...!