CSS Trend

# 유튜브 '드림코딩 by 엘리' 2022년 1월 19일에 올라온 영상 보며 아래 사이트 참고하여 정리하였다

# 참고 : https://2021.stateofcss.com/

The State of CSS 2021

---

* CSS Post-processors(전처리기)

개발 시 좀 더 편한 문법을 이용하다가 사용자에게 배포하기 전에는 순수 css로 변환해준다

사용도 : Sass, Less, PostCSS, Styleus, Assembler CSS 순

만족도 : PostCSS, Sass, Stylus, Less, Assembler CSS 순

관심도 : PostCSS, Sass, Assembler CSS, Less, Stylus 순

 

* CSS Frameworks(프레임워크)

사용도 : Bootstrap, Tailwind CSS, Materialize CSS, Foundation, Bulma ... 등 순

만족도 : Tailwind CSS, PureCSS, Ant Design, Bulma, Semantic UI ... 등 순

관심도 : Tailwind CSS, PureCSS, Halfmoon, Semantic UI, AntDesign... 등 순

  - Bootstrap : 2021년 중반 v5 릴리즈

  그리드 향상, jquery에 대한 의존성 X, 앞으로 더 많은 사람들이 찾지 않을까 생각한다

  - 굳이 Tailwind로 업데이트 할 필요는 없을 것 같지만, 눈여겨 보면서 공부해볼 필요는 있을 것 같다.

 

* CSS-in-JS

아직 전체적으로 사용도가 높지 않다.

사용도 : Styled Components, CSS Modules, Styled JSX, Emotion, JSS, Styled System ... 등 순

만족도 : vanilla-extract, CSS Modules, Windi CSS, Styled Components, Stitches, Emotion ... 등 순

관심도 : CSS Modules, vanilla-extract, Stitches, Theme UI, Styled Components, Linaria ... 등 순

  (CSS Modules : 자바스크립트 파일에서 CSS 스타일링을 정의하는 방식은 아니기 때문에,

    해당 카테고리에 맞지 않을 것 같기도 함)

---

* flexbox & grid

flexbox가 grid보다 9배 가까운 사용율을 보인다.

flexbox를 조금 더 중점적으로 공부한 이후에 완벽하게 마스터 되면

grid를 공부 해보는 것도 좋을 것 같다.

---

빠르게 스타일링을 하기 위해서 전처리기가 나왔다.

그 중에서 Saas가 사용율은 단연 1등이다.

많이 사용되는 함수들/조건문/반복문/중첩기능(부모&자식 중첩가능) 등을 확인 할 수 있다.

 

많은 기능들이 순수 CSS에 편입되어 사용할 수 있을 것으로 예상된다.

---

올해는 정말로 공부하는 해라고 생각하고 보내야겠다.