CSS 공부모음집 😉💙

[211221]

■ CSS 최적화

Developer Tool : Coverage

https://developer.chrome.com/docs/devtools/coverage/
ctrl+shift+p → coverage 검색

내가 만든 웹사이트 확인해보기

• fontawesome의 경우 주로 <i>를 활용하여 마크업하지만 나의 경우 거의 가상요소를 사용하기 때문에 해당 CSS에서 사용하는 클래스를 거의 사용하지 않고 있었다.

• 각각의 파일을 클릭해보면 내가 사용하고 있지 않은 코드를 보여준다. icon-brand의 경우 만들어 놓고 막상 마크업하니 사용할 필요가없어서 사용을 하지 않았는데 까먹었던 부분이었다. CSS의 코드를 줄일 때 잘 사용할 수 있을거 같다.

💡 @font-face의 경우 사용하지 않는 코드라는 버그가 뜬다.

■ CSS 선택자 우선순위

선택자 우선순위 : id ← class,[attr],:class ← tag,::element

예시

• 선택자의 우선순위 순서대로 확인해보고 카운팅하는 방식
  
• 예를 들면, div 태그의 경우 tag에 해당된다. 즉 id,class,[attr],:class에는 포함되지 않기 때문에 각각 0점이며 tag에만 해당되기 때문에 1점을 받게 된다.

• 해당 선택자는 #main이라는 id선택자의 자식 클래스의 가상요소이다. 즉 중첩 요소의 경우에도 id의 1점이 들어가는 점을 볼 수 있다.

선택자 관리

• 특이성 점수가 020 보다 낮게 적용되도록 하는 것이 관리하기 용이함.
• 즉, 선택자를 작성할 때 중첩을 많이 하는 것은 좋지 않다.

■ CSS 네이밍 기법

BEM이란

• B : Block
  재사용 가능한 독립적인 블록.
• E : Element
  블록을 구성하는 종속적인 하위 요소.
• M : Modifier
  블록 또는 요소의 변형 ( 모양, 상태, 동작 )

BEM 특징 (엄격한 의미론)

• 의미론적 클래스 선택자 작명 규칙.
• 다른 형식의 선택자 사용을 제한.
• 전역에서 유일한 이름 권장.
• 낮은 선택자 특이성 유지.
• HTML/CSS 연결이 느슨. 병렬 개발 가능

BEM 명명 규칙

💡 하나의 이름에 요소, 변형은 각 한 번만 사용

• 두 개의 언더바 (__) : 하위 요소
• 두 개의 하이픈 (--) : 상태 변형

.block {}
.block__element {}
.block__element--modifier {}
.block--modifier{}

접두어 사용을 추천

• 다른 라이브러리를 사용 시 함께 사용할 수 있는 장점

.abBtn {}
.abBtn__title {}
.abBtn--small{}

• 이건 Bootstrap이 사용하는 클래스이다. 컴포넌트 이름을 클래스로 바로 사용하기 때문에 겹칠 위험이 있다.

BEM 키워드 연결 방법

1. PascalCase
2. camelCase
3. kebab-case
4. snake_case

BEM Cheatsheet

https://9elements.com/bem-cheat-sheet/#custom+checkbox