집 > 기사 > 웹 프론트엔드 > CSS 명명 규칙으로 디버깅 시간 답변 절약

CSS 명명 규칙으로 디버깅 시간 답변 절약

小云云원래의: 2018-01-27 10:05:241432검색

이 글은 주로 CSS 명명 규칙을 통해 디버깅 시간을 절약할 수 있다는 관련 지식을 공유합니다. 관심 있는 친구라면 이 글이 모두에게 도움이 되기를 바랍니다. CSS 디버깅은 시간이 많이 걸리는 작업입니다. 명명 규칙을 잘 사용하면 디버깅 시간을 많이 절약할 수 있습니다.

간략한 설명: CSS 디버그는 좋은 명명 규칙이 있으면 디버깅 시간을 많이 절약할 수 있습니다.

문자열을 구분하려면 하이픈('-')을 사용하세요.

Javascript에서 camelCase 이름 지정을 사용하는 데 익숙할 수도 있습니다:

var redBox = document.getElementById（'...'）

그러나 이 이름 지정 방법은 CSS에서 권장되지 않습니다:

.redBox { 
  border：1px纯红色; 
}

대신 다음과 같은 종류의 이름 지정:

.red-box { 
   border：1px纯红色; 
}

를 사용하세요.

이것은 더 나은 가독성을 위한 표준 CSS 명명 규칙입니다.

또한 CSS 속성과 이름이 동일합니다.

//正确
.some-class { 
   font-weight：10em 
}
//错了
.some-class { 
   fontWeight：10em 
}

BEM 명명 규칙

팀에서는 CSS 선택기를 작성하는 다양한 방법을 가지고 있습니다. 일부 팀은 하이픈 구분 기호를 사용하는 반면 다른 팀은 BEM이라는 보다 구조화된 명명 규칙을 선호합니다.

일반적으로 CSS 명명 규칙에는 해결해야 할 세 가지 문제가 있습니다.

선택기의 기능은 이름을 통해 명확하게 알 수 있습니다.
선택기를 어디에 사용할 수 있는지 확인할 수 있습니다.
클래스 간의 관계를 볼 수 있습니다.

다음과 같이 작성된 클래스 이름을 본 적이 있습니까?

.nav--secondary {
  ...
}
.nav__header {
  ...
}

이것이 BEM 명명 규칙입니다.

B는 Block을 의미합니다.

BEM은 전체 사용자 인터페이스를 재사용 가능한 독립 블록으로 나누려고 합니다(블록, 여기서 블록은 인라인 블록을 참조하지 않는다는 점에 유의하세요). 헤더(로고, 입력, 메뉴)도 차단될 수 있습니다.

예를 들어 아래 사진을 찍으세요.

이것은 스틱맨입니다(블록이라고 생각할 수 있습니다). 앞서 언급했듯이 이 구성 요소의 이름을 스틱맨으로 설정할 수 있습니다.

기본 키의 스타일은 다음과 같아야 합니다.

.stick-man { 
  
}

E는 요소를 나타냅니다.

블록에는 일반적으로 여러 요소가 있습니다. 예: 스틱맨에는 머리, 두 개의 팔, 발이 있습니다

머리 , 발, 팔은 모두 이 구성 요소의 요소입니다. BEM 명명 규칙을 사용하여 블록과 요소를 이중 밑줄로 연결합니다.

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M은 modifier를 의미합니다.

BEM의 M은 수정을 의미하며, 블록(Block) 또는 요소(Element)를 수정할 수 있습니다(모양이나 동작 조정). 스틱맨을 조정하여 파란색 스틱맨과 빨간색 스틱맨( 실제로는 파란색 버튼과 빨간색 버튼이 필요할 수 있습니다.)

BEM의 명명 규칙을 사용하여 이중 커넥터를 사용하여 이름을 지정합니다('--')

예:

.stick-man--blue {
}
.stick-man--red {
}

수정자는 요소에도 사용할 수 있습니다. 예를 들어 스틱맨의 머리 크기만 조정하려고 합니다. 이렇게 이름을 지정할 수 있습니다

.stick-man__head--small {
}
.stick-man__head--big {
}

위는 BEM의 이름 지정 방법입니다. 이 이름 지정 방법은 다소 장황하지만 간단하게 설명하면 복잡한 프로젝트의 여러 부분 간의 관계를 명확하게 나타낼 수 있습니다. 프로젝트에서 직접 사용하세요. 구분 기호의 이름만 지정하면 됩니다.

JavaScript에서 사용되는 CSS 클래스 이름은 어떻게 지정해야 할까요?

이 글을 보고 여러분의 프로젝트를 리팩토링해 보세요.

원본 코드를

<p class="siteNavigation">
</p>

에서

<p class="site-navigation">
</p>

로 변경했습니다. 보기에는 좋지만 이 클래스 이름을 어딘가(JavaScript)에서 사용했다는 사실을 잊었습니다.

//the Javasript code
const nav = document.querySelector('.siteNavigation')

이때 nav에는 null이 표시됩니다.

이를 방지하기 위해 다음과 같은 이름을 사용하여 상기시켜줄 수 있습니다.

이름을 지정하려면 'js-*'를 사용하세요

js-를 사용하여 클래스 이름을 지정할 수 있습니다.

<p class="site-navigation js-site-navigation">
</p>

JavaScript 코드에서는 js-site-navigation을 사용하여 DOM을 가져옵니다.

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

이제 js-가 표시됩니다. 사이트 탐색은 DOM 개체를 얻기 위해 JavaScript 코드에서 이 클래스 이름을 사용하는 것을 고려합니다.

CSS 명명 규칙으로 디버깅 시간 답변 절약

관련 기사