CSS Methodology

최근에 CSS 작성에 대한 고민이 있었다. 어떻게 짜야 효율적으로 짜는걸까? 하다가 멘토님이 영상 두개를 보내주셨다.

동동의 CSS 방법론
https://www.youtube.com/watch?v=B70h37mpD74

외국의 누군가의 반응형 페이지 라이브 코딩
https://www.youtube.com/watch?v=IXucQAEkIMo

BEM Info
https://en.bem.info/methodology/quick-start/

위에서부터 순서대로 시청했다.

처음 css방법론에 대해서 공부를 좀 했다. 아래는 정리했던 노트이다.



보면서 느낀건 나중에 갈수록 써먹을만한 것들이 나온다는 거다. 사실 볼때부터 BEM 재밌겠다 생각하면서 본 듯. 영상으로 쭉 정리를 끝낸 후 다른 사람이 CSS짜는 영상도 보았다.

나는 이때까지 HTML을 먼저 짜고 CSS를 짜는 식이었는데 공통적인 부분을 클래스로 먼저 짜고 HTML의 순서대로 CSS를 동시에 짜는 방식을 보면서 많이 배웠다.

이후 사람들이 많이 쓰는 방법론에는 이유가 있겠거니 하고 BEM 공식문서를 간략하게 살펴보았고

BEM 관련 사이트에 SCSS와 함께 사용하면 더 효율적이라는 말을 듣고 공식 문서를 한번 훑은 후 프로젝트를 진행하였다. JS관련 내용은 아니니 간단하게 반응형 웹페이지를 퍼블리싱한다고 생각하고 구현을 시작했다. (이미지나 디자인 아이디어는 코드잇에서 왔습니다. 마침 반응형 단원이기도 하고 방법론은 체화가 필요하다고 생각해서 쉬운걸로 했움)

프로젝트 링크 https://codefug.github.io/responsive-web-design-with-BEM-SCSS/

github 레포지토리 https://github.com/codefug/responsive-web-design-with-BEM-SCSS