코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

해당 게시글은 2022.02.14에 깃허브로 작성되었습니다. 1. 배경 웹 서비스가 확장되고 프로젝트의 규모가 커지면서 필요한 팀원의 수도 늘어남에 따라 CSS 코드는 기하급수적으로 늘어나고 규칙없이 혼잡해졌다. 그로 인해 사이트 유지보수 작업 시, 상당한 수고의 노동이 필요해졌고 이를 해결할 방법을 강구하기 시작한다. 2. 방식 Sass(SCSS), Less, Stylus와 같은 친구들은 CSS 전(예비)처리기(CSS Preprocessor) 라고도 불린다. (1) 전처리기 중 Sass(SCSS)를 권장하는 이유 Sass(SCSS) Less Stylus Stylus와 비슷한 문법 낮은 진입장벽 깔끔하고 세련됨 Sass, SCSS 모두 하나의 컴파일러로 컴파일 가능 많이 사용되는 전처리기 비교적 늦게 나..

해당 게시글은 2022.02.10에 깃허브로 작성되었습니다. 개인 작업이든 협업이든 페이지의 구조가 복잡하거나 양이 많을수록 class명을 짓는 과정에서 애를 먹게 된다. 이런 때에 필요한 게 바로 BEM이며 BEM은 sass 사용 시에도 아주 유용하니 알아두는 편이 좋다. 1. BEM 방식이란? class명으로 명시 -> 기본적으로 ID 사용X / class만을 사용. '어떤 목적인가'에 따라 작명. 이름을 연결할(단어의 조합) 때에는 하이픈(-) 하나만 사용. ex) search-form 2. Block__Element--Modifier (1) Block - 재사용 가능한, 기능적으로 독립적인 페이지 컴포넌트 ex) Logo는 header, footer 등 다양한 곳에서 사용 가능하다. Block은 ..