0418 TIL / CSS 설계기법, 실습 피드백

CSS 설계기법 (OOCSS, SMACSS, BEM)

OOCSS

구조 : width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들
스킨 : font, color, background, border 등 시각적인 영향을 주는 속성

SMACSS

http://smacss.com/

1. 프로젝트 표준 스타일
   전체적으로 사용되는 폰트 관련, reset, img 공통
2. 레이아웃
   헤더, 메인, 푸터, 사이드 같은 큰 틀을 구성하는 모듈
   ID 선택자를 사용하기도 함
3. 모듈
   레이아웃안에 배치되는 모든 요소를 의미, ID 선택자 사용X
   비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만듬
4. 스테이트
   기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일
   is 라는 접두사를 사용하고 자바스크립트로 필요할 때 넣다 뺐다 할 수 있다
5. 테마
   스타일 관련

BEM

기본적으로 OOCSS 와 같은 모듈 기반의 방법을 뿌리로 합니다
ID선택자와 요소 선택자를 권장하지 않습니다
클래스 선택자를 사용해 가중치를 이용하기 쉽게 하기 위함

1. Block
   어디에서나 재사용 가능한 부품을 의미합니다
   클래스 네이밍은 목적이 명확해야 합니다
   소문자를 사용하며 여러 단어가 연결되는 경우는 케밥케이스를 사용
2. Element
   Block 을 구성하는 요소들로 block에 종속되야 합니다
   block의 클래스 이름을 상속 받고 element 클래스 이름을 언더바 두 개를 접두사로 사용합니다.
   element 안에 또 element 를 사용할 경우 네이밍은 서로 종속의 관계로 보지 않기 때문에 element 끼리중첩하기 않습니다.

   <p class="txt-grey">더 많은 정보가 필요하시면
   <button class="txt-grey__btn">
       <!-- <strong  class="txt-grey__btn__bold">여기</strong> 이렇게 네이밍 하지 않습니다. -->
       <strong class="txt-grey__bold">여기</strong>
   </button>
   를 클릭하세요!
   </p>

 

3. Modifier (수식어)
   block, element의 모습이나 상태 또는 움직임 등을 정의합니다
   단독으로 사용하지 않고 두 번째 클래스 이름으로 사용합니다.두 개 이상의 단어를 사용해야하면
   block 처럼 하이픈으  로 연결합니다

<!-- <nav class="nav-global--off"></nav> 잘못된 예 -->
   <nav class="nav-global nav-global--off">
   <a href="" class="nav-global__link"></a>
   <a href="" class="nav-global__link"></a>
   </nav>

코드 피드백

1. 형제레벨에서의 heading 태그는 맞춰주는게 좋다
2. 컨텐츠에 normal flow 를 벗어나게 설정할 경우 부모요소에서 인식을 못해
3. 높이를 잡지 못하는 문제점 신경쓰기
4. position 으로 요소 자리 잡기 하지말자
5. inline, inline-block, block 확인해서 불필요한 속성 제거
6. img 태그로 클릭이벤트 주는것 보다 a 태그 활용
7. 로그인 상태 유지 양옆으로 다 클릭되는 것 수정하기
8. 모달 닫는 버튼 구현할 때 왜 닫는 버튼을 마지막에 배치를 할까 ?
   -> 스크린리더로 읽을 때 보통 닫는 버튼을 마지막에 찾기 때문에 사용자 배려

강사님코드

모듈형으로 만들어서 필요한 곳에 가져오도록 구현

아무곳에 넣어도 쓸 수 있도록 구현해줘야 한다

추가 참고 내용

왜 button 에 display: block 을 줘도 width 가 content 에 맞춰지는지

https://stackoverflow.com/questions/27605390/why-doesnt-display-block-width-auto-stretch-a-button-to-fill-the-contai

Why doesn't "display: block" & "width: auto" stretch a button to fill the container?