TIL: 2023-05-04

⚙️ 오늘 학습한 내용

css 전처리기, css-in-js

🐹 오늘의 기분

styled-components를 쓰기만 하고 막상 css 전처리와 css-in-js에 대한 이해는 상대적으로 부족했던 것 같아 정리해보았다. 비가 와서 그런가 날이 어두침침해서 너무 졸리다.. 체력살려

🗝 키워드

css 전처리기, SASS, SCSS, Less, CSS-in-JS

🗣 스스로에게 설명

우선 전에 부트캠프 하면서 정리했던 글

TIL: 2022-10-27

프로젝트의 규모와 복잡도가 커지고 대응해야 할 기기가 많아지면서 구조화된 css 작성의 필요성이 대두됨
BEM, SASS, CSS-in-JS 등 여러 css 방법론이 제시되었고, 그 방법론들의 공통 지향점은 아래와 같다

• 코드 재사용
• 유지보수 용이
• 코드 확장성
• 시맨틱한 클래스명으로 의미 예측 가능

css 전처리기

전처리기의 자신만의 특별한 syntax를 가지고 css를 생성하도록 하는 프로그램
css에서 일반적인 프로그래밍 개념을 사용하여 기존 css가 가질 수 있는 불리한 점을 해결할 수 있게 해준다.
각 전처리기에 맞는 컴파일러로 CSS를 해석한다.

SASS/SCSS

https://sass-lang.com/
Syntatically Awesome Style Sheets

Sass: Syntactically Awesome Style Sheets

Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

CSS 확장언어
파일 확장자를 .scss로 쓴다.

세미콜론, 중괄호를 쓰지 않는다.
SASS의 버전 3에서 SCSS가 등장한다.
SCSS(Sassy CSS)는 CSS와 거의 같은 문법으로 SASS 기능을 지원한다.

css 전처리기, Sass(SCSS)에 대하여

Less

Leaner Style Sheets

Getting started | Less.js

CSS의 기존 문법을 그대로 사용한다
node.js로 컴파일이 가능하다

 

참고

css의 전처리 도구SASS,SCSS,Less의 차이

CSS 전처리기란?

CSS-in-JS

css를 JavaScript 코드에서 작성하는 방식
styled-components, emotion, Linaria 등이 있다.

css-in-js는 runtime css-in-js와 zero-runtime css-in-js로 나뉜다.
zero-runtime이라는 것은 runtime에서의 동작이 없다는 것을 의미하며, 동적으로 스타일을 생성하지 않는다는 것과 같다.

zero-runtime css-in-js 라이브러리로는 Linaria가 있다.
Linaria는 babel plugin과 webpack loader를 이용해 css 코드를 추출하여 정적인 스타일시트를 생성하는 방식으로 동작한다.

 

참고

CSS-in-JS, 무엇이 다른가요?

 

시간날 때 읽어볼 글

CSS vs. CSS-in-JS: How and why to use each - LogRocket Blog

역사로 알아보는 CSS가 어려워진 이유: ①웹 문서에서 웹 애플리케이션으로 | 요즘IT

역사로 알아보는 CSS가 어려워진 이유: ②CSS in JS와 Atomic CSS | 요즘IT