이 글은 웹 크루트 Advent Calendar 2019 8일째 글입니다.
어제는 @hiro_mori 선생의'디자인 사고를 낡은 조직에 침투시키는 절차'였다.

개요

본사가 운영하는 웹 서비스의 대형 개조 사건과 함께 저는 CSS의 관리와 디자인을 다시 배웠기 때문에 이 일을 쓸 것입니다.
(내용은 대략 웹 제작자를 위한 CSS 교과서 설계 개요)

CSS 관리 문제

중·대규모 사이트를 장기간 사용하면'CSS가 복잡해지는 문제'가 발생한다.
처음에는 깔끔하게 정리된 기술이라도 이후 내용의 추가와 사이트 개조로 인해 방대한 기술&파일 수가 되었다
유사한 기술이 중복되고 수정된 후 원하지 않는 곳에 영향을 미치며 상세도가 너무 높아 최종 오의인'!important'를 사용해야 한다...
나는 운영 시간이 긴 사이트일수록 담당자들이 이런 문제로 골머리를 앓을 것이라고 생각한다.

무엇이 좋은 CSS 디자인입니까?

구글 엔지니어 필립 월튼CSS Architecture은 좋은 CSS 디자인은 다음과 같다고 말했다.

예측하기 쉽다

→ 제작자가 생각하는 그런 인상인가(표시)
→ 의도하지 않은 동작이 있는지(영향)

간편한 재활용

→ 공통 모듈 및 구성 요소
→ 각자 독립, 다양한 곳에서 반복 사용 가능

간편한 유지 관리

→ 나중에 기능을 추가할 때 기존 규칙을 위반하지 않음

간편한 확장

→ 사이트 규모 확대, 코드 복잡해져도 추가 수정 쉬울까
→ (사이트 규모 증가 = 담당자 증가) 수정자가 증가하더라도 유지 보수가 쉬운지 여부

겨냥해야 할 곳

이상적
・독특하고 알기 쉬운 명명 규칙(다른 것은 영향을 주지 않음)
・ 가능한 한 html 구조에 의존하지 않는다
어느 곳에서나 사용하기 좋다
/CSS 덮어쓰기 최소화
・ 비슷한 부품 유니버설
이런 디자인을 할 수 있었으면 좋겠어요.

유명한 CSS 설계 기법

CSS 디자인의 유명한 제품은 다음과 같다.
・OOCSS
・SMACSS
・BEM
・MCSS
등, 상세한 설명은 많은 문서와 기사가 있기 때문에 사랑을 베푼다
이번에는 FLOCSS의 이점을 제공합니다.
(FLOCSS 방법을 통해 상기 목표는 어느 정도 실현되었다)
일본어 문서가 있고 기업(웹 서비스)도 많으며 검색하면 기사가 많은 것도 채택 이유 중 하나다.

FLOCCS 개요

웹 페이지 열기Foundation Layout Object　┝ Component　┝ Project　┗ Utility의 계층형 관리 및 설계 방법에 대해 설명합니다.
SASS를 사용하여 위와 같은 디렉토리 구조, common을 생성합니다.scss 등에 통합하여 컴파일하면 모듈별로 관리할 수 있고 읽은 CSS는 하나일 수 있습니다.
또한 오리지널 규칙으로서 페이지 단위의 독자적인 CSSPage를 기술하는 디렉터리와 CSS 파일을 준비하여 원칙적으로 2개의 CSS 파일을 읽도록 설계하였다(아래 참조)
(19.12.10 추적이 맞지 않습니다. 아래 그림의 @mixin 은 @import 오류입니다.

또 리모델링 프로젝트가 진행 중이어서 CSS가 이렇게 많이 줄었고 유지보수성이 높아졌다는 결과가 앞으로 기대된다.용서해 주세요.
현재의 피부감으로서 도입하기 위한 학습 비용은 상응하고 초기의 제정은 상당히 어렵다
중복 이용성이 높기 때문에 코드를 쓸수록 편해지지 않을까 싶어요.
다만, 앞으로 담당자가 바뀔 때 전체적인 디자인을 이해할 필요가 있다고 생각합니다.

창도자 곡탁수 선생의 문서

FLOCSS 공식 문서
시바견도 아는 FLOCSS.
다들 모르는 FLOCSS.

참고문

각 CSS 설계 방법의 장단점 요약
만약 네가 CSS 디자인을 배우려고 한다면, 너는 이것을 먼저 볼 수 있다
CSS의 무법지대에서 벗어나다.FLOCSS에는 포인터가 있는 디자인이 있습니다.
FLOCSS를 사용하여 CSS 파일을 20000행에서 9000행으로 변경한 사연
FLOCSS를 사용한 CSS 설계의 고민 및 솔루션
[CSS 디자인] 메이크업 마크♡ FLOCSS 언제나 예쁘게 코딩 결정!
CSS 설계 목적 및 FLOCSS 개요 – FLOCSS에서 시작된 CSS 설계
내일은 @wchikarusato 선생님입니다.잘 부탁드립니다.