재미로보는 2019 css 통계자료
https://2019.stateofcss.com/technologies/methodologies/
(번역) CSS는 프로그래밍 언어는 아니지만, 올바른 작성법을 체계화하는 방법론을 만들어냈다
BEM이 앞서 있지만 atomic CSS는 완전히 새로운 클래스 철학으로 시작된다.
CSS를 작성하는 가장 좋은 방법을 찾기는 힘들겠지만, 우리가 연구하는건 계속될것이다
간만에 방법론들에대해 다시 읽어보고 나의 CSS작성법에대해
생각해보았다(sass에서는 사용한 경험이 적어서 제외)
1.BEM특징중
-요소-상태 순으로 정리
-클래스명을 용도와 형태를 의미하여 직관적
2.SMACSS특징중
-작성하는 css를 base,module,state 세종류정도로 나눈다
-재사용성이 높은 요소를 module에 정의한다
(table,icon,box)
3.OOCSS 특징중
-중복되는 디자인 요소를 따로 빼내어 반복적으로사용한다
-컨테이너와 콘텐츠를 분리하고 위치에 의존적인 스타일을 정의하지않는다(일부)
사실 css방법론을 보기전에도 어느정도 비슷한 생각을 하며 작업은 하고 있었던것 같다.
다만 방법론들을 접하고나서 나름대로 나만의 작성 스타일이 생겼다. 불편한점들은 제외하고 편한점들만 섞어쓰려한거같기도하고..ㅎ
읽어보면 결국 각 방법론에서 비슷한부분들이 존재하며
방법론들의 궁극적 목적인
"재사용성" "가독성" "유지보수" "확장가능"
을 생각하며 나름대로 내 스타일을 계속 찾아가는중이다.
어떤 방법론을 사용하라고 정하기보다는
각 방법론에서 나처럼 본인만의 스타일을 찾아나가면 되지않을까?
다만 어떤 프로젝트냐에따라 더 많은 비율로 특정 방법론을 사용하는게 작업하는데 더 수월할 수 있다면 그 방법론을 공통으로 사용할수도있을것같다.
신입이 들어온다면 각 방법론을 다양하게 활용해보라하고
지양해야할점을 알려주자.
인라인스타일을 남발한다던가.. importat를 남발한다던가..
class를 시맨틱하게 사용하지않는다던가..
(시맨틱한 클래스 사용은 w3c에서도 권장하는 내요이다)
참고 URL
사실 아래 예제같이 sass를 활용하는건
숙련도가 좀 더 많이 올라가야 쓸 수 있겠다.. ㅠ
https://gist.github.com/Anderson-Juhasc/3380325
sass나 less를 사용하며 협업할때는
특히나 컨벤션이 중요해보인다.
https://gomdoreepooh.github.io/notes/smacss-bem-oocss
