2021.03.18 오늘의 커밋. CSS 설계 방법 - 기본

오늘 공부한 내용을 독서라고 해야할지, 커밋이라 해야할지 애매했다.

책을 읽었으니 독서이지만 딱히 도서로서의 가치는 없다고 봐야하니

그냥 오늘 배운 내용을 머릿속에 커밋하는 느낌으로다가 접근해야겠다.

 

 

최근 몇일동안 웹 컴포넌트를 개발하면서 단순한 CSS 처리 방법을 몰라 시간을 많이 날렸다.

 

이것은 나 뿐만 아니라 모든 팀원들이 공통적으로 느끼고 있었던 터.

 

전체적으로 CSS에 대한 공부를 더 해야겠다는 생각이 들었다.

 

 

그렇게 구입한 책.

 

 

빠르게 속독하고 천천히 리마인드 해보기로 했다.

 

목표는 다음주까지 완독

 

 

한번 가보자.

 

 

 

 

 

우선 오늘은 2장 'CSS 설계 기본 및 실전'을 읽었다.

(1강은 뭐 CSS 소개 이런건데 굳이 더 설명할 필요가 있을까?)

 

 

좋은 CSS 설계를 위한 4가지 목표가 있다.

 

1. 예측 가능해야 한다.

-> 기대한 대로 동작해야하고, 영향범위를 예측 할 수 있어야 한다.

 

2. 재사용 가능해야 한다.

-> 스타일링이 확실히 추상화되어있고, 적절하게 분리되어있어야 한다.

 

3. 유지보수 가능해야 한다.

-> 기존 모듈 A에 새로운 기능이나 모듈이 추가되면 기존 모듈 B에 영향이 없도록 설계해야한다.

 

4. 확장 가능해야 한다.

-> 프로젝트의 규모가 커지더라도 특별한 이슈 없이 관리가 가능해야 한다.

 

 

여기까지 읽었을때, 나는 살짝 포기하고 싶었다.

세상에.

 

가당키나 한 말인가?

 

어느정도까지는 목표를 충족할 수 있더라도 규모가 커진다면 답이 안나올텐데..??

 

 

 

 

여튼 위 4가지 목표를 실제로 구현할때 아래 8가지 포인트를 감안해야 함을 기억하자.

 

1. 특성에 따라 CSS를 분류한다.

-> 사이트 전체에 기반이 되는 스타일은 클래스명 앞에 'base_'를 붙인다던가 하는걸 말한다.

 

2. HTML과 스타일링을 느슨하게 결합한다.

-> HTML과의 결합이 강하지않다, HTML에 의존하지 않는다 와 같은 말인데, 예를들어

  .bl_module h2 {      

    font-size:10px      

  }                         

이런식의 스타일은 의도하지 않은 h2태그 전체에 영향을 미칠 수 있다.

그러므로

  .bl_module .title {      

    font-size:10px      

  }                         

이렇게 바꾸는것이 현명하다.

이렇게 하면 title에만 적용될 수 있다.

 

3. 영향 범위를 지나치게 넓히지 않는다.

->예를들어 main 안에 어떠한 <span의 스타일을 바꾸겠다고

main span {

...

}

이런식으로 바꿔버리면 나중에 span이 추가되었을때 의도하지 않은 스타일이 적용될 수 있다.

이럴때는 가장 가까운 부모 요소까지 셀렉터에 포함하거나, 별도의 클래스를 따로 지정하는 방법을 사용하면 된다.

 

4. 특정한 콘텍스트에 지나치게 의존하지 않는다.

 -> 예를들어 #main.... { 인 스타일은 #main을 벗어나면 제대로 동작하지 않는다. 만약 이 스타일이 모듈에 포함되는 경우, 모듈은 사이트 내 모든 공간에서 정상적으로 동작해야 하므로 로직을 수정해줘야 한다.

 

5. 상세도를 지나치게 높이지 않는다.

-> 어찌보면 위에서 설명한 내용과 반대되는 개념이다.

모든 요소 하나하나를 구체화시키면 결국 클래스를 지정하거나, 셀렉터를 지정하는것이 의미가 없다.

이를 막기 위해서는 가급적 셀렉터로 아이디는 삼가고 클래스 셀렉터를 사용하는 것이 좋다.

 

6. 클래스 이름에서 영향 범위를 유추할 수 있다.

-> 개발하다보면 당연히 나오는 말이다. main-module1 main-module2는 커밋하면 쌍욕 나오는 클래스명일것이다.

main-body, main-title 이러한 이름을 사용하면 어느부분에서 어떤 동작을 하는지 명확히 알 수 있다.

 

7. 클래스 이름에서 형태, 기능, 역할을 유추할 수 있다.

-> 위와 같은 의미이다.

 

8 확장하기 쉽다.

-> 코드를 확장하기 쉬운 상태로 유지하면 유지보수가 간편해진다.

 

확장성과 관련해 생각해야 할 관점이 있는데, 먼저 싱글 클래스와 멀티 클래스의 정의부터 확인해보자.

싱글 클래스 설계는 클래스 속성이 매우 깔끔하며, 동일한 스타일이 중복되는 경우 extend 기능을 사용한다.

단, 스타일 수만큼 클래스를 준비해야 하므로 약간의 변화에도 클래스 수가 급증할 수 있다.

 

멀티 클래스는 공통 클래스와 별도 클래스를 각각 따로 지정하여 스타일 지정시 둘다 쓰는것을 말한다.

 

 

쉽게말해

싱글 클래스 설계 - html이 간단하고, css는 복잡하다.

멀티 클래스 설계 - html이 복잡하고 css는 간단하다.

 

 

그러나 멀티 클래스의 경우 공통 클래스 뿐만 아니라 별도 클래스 또한 범용적으로 사용할 수 있는 장점이 있어

 

이 책에서는 기본적으로 멀티 클래스를 채용하고 있다.

 

 

 

 

여기서 발생할 수 있는 문제가 있다.

 

위에서 설명한것처럼 규모가 커지면 사람마다 생각하는 것이 다르고,

특히 상세도를 어디까지 가져갈 것인지 의견이 크게 달라진다는 것이다.

 

때문에 이 책에서는 상세도에 대한 일반적인 지침을 제공하고 있다.

 

1. 최소모듈 : 버튼이나 라벨, 타이틀 등 간단한 요소

2. 복합모듈 : 몇 가지 요소를 포함한 한 덩어리로서의 요소

 

위 내용에 대해서는 추후 자세히 설명해준다고 한다.

 

 

 

 

 

결과적으로 정리해보면 CSS설계를 위한 4가지 지향점(목표)가 존재하며, 구현 과정에서 인지해야 할 8가지 포인트도 존재한다.

 

포인트를 인지한다는건 스타일이 의도한 목적으로 동작하도록 중복되지 않으면서, 재사용 가능하도록 작성하라는 것이다.

 

물론 사람마다 생각하는 바가 다르므로 일정한 가이드(지침)이 존재하며, 이를 적당히 유동적으로 판단해야 한다.