CSS | 전처리기, 프레임워크 각각의 특징과 장단점

Hayley·2022년 2월 23일
1
post-thumbnail

CSS 전처리기

  • CSS Preprocessor
  • 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램
  • 태생적으로 기존 css가 가질 수 있는 불리한 점 해결 위해 탄생
  • CSS 를 확장하기 위한 스크립팅 언어로 컴파일러를 통해 CSS 포맷으로 변환

Sass/SCSS

SASS: Syntactically Awesome Style Sheets
SCSS: Sassy CSS

특징

  • Sass와 SCSS는 기능적으로 봤을때 유의미한 차이가 없으며, 문법적인 방식에서 차이가 있다. Sass와 SCSS의 핵심적인 차이는 {}(중괄호);(세미콜론)의 유무이다.
  • 셀렉터 중첩 기능으로 선택자를 중복사용, 과용하는 걸 줄일 수 있고 구조 파악에도 용이.
  • 반복적으로 사용하는 값을 변수로 지정해서 일관적, 효율적으로 개발 가능.
  • 조건문, 반복문, 함수 등 프로그래밍적 요소들을 지원.
  • 웹에서 동작 가능한 표준 CSS로 컴파일해서 동작시킴(웹에서는 CSS만 동작)
  • 변수/함수/상속 개념을 활용하여 재사용 가능

단점

  • 디버깅의 어려움이 있음
  • 컴파일한 CSS 파일이 거대해짐
  • 작업이 크고 고도화 될수록 유지 보수에 더 많은 시간과 비용을 발생시킴

참고
Sass Guidelines


프레임워크

Material-UI

특징

  • 처음부터 React로 만들어짐
  • 구글 머테리얼 디자인을 기반으로 제작
  • 자주 사용되는 기능/디자인들을 Component/API로 제공
  • React로 개발을 할 때 다양한 UI를 쉽게 만들 수 있음
  • 반응형 디자인을 만들 때 사용하기에 용이

단점

  • 안드로이드 호환성의 제한으로 인해 다른 운영 체제에서는 사용하기 어렵다
  • 성능 저하 발생 가능성

참고
Material- Pros & Cons
Why you should NOT use Material-UI

부트스트랩

특징

  • 빠르고 쉽게 여러형태의 웹 페이지를 제작
  • 반응형 웹사이트 개발을 위한 CSS, HTML, JS 프레임워크
  • 반응형 디자인을 빠르고 손쉽게 만들 수 있다

단점

  • 다른 프레임워크에 비해 굉장히 무겁다
  • 커스텀이 번거로움

CSS-in-JS

styled-components

특징

  • CSS를 컴포넌트 안으로 캡슐화(모듈화)
  • JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
    (Javascript 환경을 최대한 활용)
  • 자유로운 CSS 커스텀 컴포넌트를 만들 수 있음
  • Sass 라이브러리 설치 없이 Sass 문법을 사용
  • 네이밍이나 최적화를 신경 쓸 필요가 없음
  • 코드 경량화

단점

  • 빠른 페이지 로드에 불리, 느린 성능을 보여줄 수 있음
  • 별도의 라이브러리를 설치해야 하므로 번들 크기가 커짐
  • CSS를 줄 태그를 전부 컴포넌트로 만들어야함

참고
[React] CSS in JS 방법론 (feat. Styled-Component)
styled-components 개념 및 예시 | 기억보다 기록을

profile
👩🏻‍💻✍🏻

0개의 댓글