Rethinking CSS in JS
(dev.to)CSS는 사용자 인터페이스를 아름답고 기능적으로 만드는 핵심 요소지만, 스케일이 커질수록 CSS 관리는 점점 더 어려운 작업이 됩니다.
스타일 충돌, 성능 저하, 유지 관리의 어려움은 많은 개발자를 괴롭히죠.
이 글에서는 이러한 문제를 해결하기 위한 새로운 접근 방식, 특히 CSS in JS에 대해 자세히 설명합니다.
CSS의 역사적 배경을 시작으로 현대적인 스타일링 방법부터 미래의 디자인 시스템까지 폭넓은 주제를 다룹니다.
글의 구성은 다음과 같습니다.
- JS에서 CSS의 정의와 배경
1. JS에서 CSS란 무엇인가요?
2. JS에서 CSS의 배경 - CSS와 디자인의 역사적 맥락
3. CSS의 배경
4. 디자인의 배경
5. 디자인 시스템의 배경 - 스타일 관리 방법 분석 및 새로운 제안
6. 스타일 관리는 어떻게 이루어졌나요?
7. 스타일은 어떻게 관리해야 합니까? - JS의 CSS에 대한 구체적인 구현 계획
8. 왜 JS에 CSS가 있나요?
9. mincho 프로젝트를 소개합니다
10. JS의 CSS 친화적 CSS
11. JS에서 확장 가능한 CSS - 디자인 시스템과의 통합
12. 디자인 시스템을 위한 JS의 CSS
특히, 본 글에서는 SCALE CSS 방법론과 StyleStack이라는 새로운 개념을 소개하고, 이를 기반으로 한 mincho 프로젝트를 제안합니다. CSS 친화적이고 확장 가능한 CSS를 JS에 구현하는 것을 목표로 합니다.
이 글의 궁극적인 목적은 개발자, 디자이너 및 기타 웹 프로젝트 이해관계자에게 더 나은 스타일링 솔루션의 가능성을 제시하는 것입니다.
긴 글이지만 읽어주셔서 감사합니다.
프로젝트에 대한 호응이 아니어서 죄송하지만, 프론트엔드 업계는 좀더 장기적인 시각으로 널리 합의된 도구나 컨벤션을 만들어야 하지 않을까 싶습니다. SCSS, LESS, 앵귤러JS 앵귤러2.0 리액트 등 웬만큼 스택 경험이 있는 입장에서는 프론트엔드 신기술이 필요 이상으로 오버엔지니어링 되어있고 소모적으로 느껴집니다
웹에서 합의라면 웹 표준이 있습니다. css에서 scss같은 중첩을 도입하고 클래스, 함수형 프로그래밍 메서드, 웹 컴포넌트 등 지속적으로 논의되고 기능이 추가되고 있죠.
제 생각에 프론트엔드 자체가 분화된지 얼마안되어 이것저것 시도해보는것 같아요.
리엑트, 뷰와 같은 라이브러리부터 시작해서 번들러, 린트 등 툴링등 전반적으로요.
게다가 앱분야와 달리 베스트 프랙티스를 회사 하나가 정해서 퍼뜨리는 것도 아니라 혼란이 큰 것 같네요!!