[CSS in depth] part3 Pattern libraries
- 모듈을 작성하는 것의 가장 큰 장점 : 재사용
- => 새로 작성하는 것보다 무엇을 가지고 있는지 아는 것이 중요함
- 이러한 인벤토리를 제공하는 문서를 작성하는 것 : 패턴 라이브러리(기술적인 부분에 한정) or 스타일 가이드(마케팅 관련/ 개인적인 의견도 포함)
- css모듈을 보여주는 별도의 HTML 페이지 세트
- Knyle Style Sheets
https://github.com/kss-node/kss-node
KSS는 일반 텍스트로 읽기 좋으면서도 기계가 자동으로 추출하고 처리할 수 있을 만큼 구조화된 CSS 문서에 연결된 HTML 스타일가이드를 제작하는 데 도움이 되는 일련의 지침입니다. 이 도구는 CSS 전처리기(예: SCSS 또는 LESS)를 염두에 두고 설계되었으며, 다양한 CSS 프레임워크(예: YUI, Blueprint 또는 960)를 수용할 수 있을 만큼 유연합니다.
~~ 프로젝트 세팅 / 실습 ~~
모듈형 CSS는 CSS 확장의 핵심이며, 패턴 라이브러리는 이러한 모듈을 체계적으로 정리하는 수단입니다.
- html 대신 css 먼저 작성하는 것
- 프로세스
- 대략적인 아이디어 구상
- 패턴 라이브러리에서 페이지에 필요한 기능을 제공하는 기존 모듈을 찾아서 사용. 외부 ~ 내부 순서.
- 패턴 라이브러리에 존재하지 않는 모듈은 생성하고 문서화.
- 필요한 경우, 새로 만든 모듈 적용
장점: CSS에 능숙한 사람이 작성할 수 있음, 재사용, 문서가 있으므로 최신 상태로 유지됨
- CSS에 접근하기 위한 방법 = API
HTML에 CSS를 적용할 때 뿐아니라, CSS 수정시에도 지켜져야 하는 제약사항
- 기존 모듈 변경 프로세스
- 기능이 추가됨
- 추가된 기능을 묘사함(설명 수정)
- 마크업 수정
- 배포
- API 변경이 필요한 경우 - 버전 관리
- 두개의 모듈을 동시 지원
- 그 동안 마이그레이션 진행
X.Y.Z
-
Patch: Z - 버그 픽스
-
Minor: Y - 기능 추가
-
Major: X - 호환 불가능(디자인을 크게 변경하는 경우 포함)
-
버전을 적용하는 방법은 프로젝트 성격에 따라 다름
- Bootstrap, Foundation, and other frameworks
- 모듈형 CSS의 원칙을 따름
- 버전이 관리됨
https://getbootstrap.com/ https://get.foundation/ https://purecss.io/
-
그럼 이걸 직접 만들면 좋은점? 특화가 가능 => 작은 조직에서 적용하기에는 생성/관리 리소스가 크다
-
프레임워크 사용 => 필요한데 없는 것도 있고, 버전 업그레이드가 어려우면 종속될 수 있다.
-
조언: 무턱대고 프레임워크를 사용하는 대신 프레임워크의 사고방식을 취하세요
-
한번 만들어보면 프레임워크를 더 잘 쓸 수 있을 것 같다.(만든 사람의 관점에서 보면)
-
CSS는 특이성을 증가시키는 방향으로 수정하게 된다.(기존 코드의 삭제는 어렵고 더 추가하게 됨)
https://medium.com/@whatjackhasmade/pattern-libraries-abcc45c6144c