CSS 클래스 명명 규칙

CSS 클래스 명명 규칙

---

웹 페이지에는 두 개의 컨트롤 블록 (기본 및 보조)이 있습니다. 대부분의 사람들은 어떤 클래스 이름을 사용합니까?

선택 1 :

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

선택 2 :

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

---

질문에 대한 직접적인 대답은 Curt 의이 질문 바로 아래에 있습니다 .

CSS 클래스 명명 규칙에 관심이 있다면 BEM ( Block, Element, Modifier ) 이라는 매우 유용한 규칙을 고려하는 것이 좋습니다 .

최신 정보

여기에 대한 자세한 읽어 보시기 바랍니다 - http://getbem.com/naming/을 - 다음과 같은 대답이되지 않는 렌더링하는 최신 버전의 그.

---

주요 원칙 :

• 페이지는 독립적 인 블록으로 구성됩니다. Block은 클래스 이름에 "b-page", "b-login-block"또는 "b-controls"와 같이 "b-"접두사가있는 HTML 요소입니다.

• 모든 CSS 선택기는 블록을 기반으로합니다. "b-"로 시작하지 않는 선택자는 없어야합니다.

좋은:

.b-controls .super-control { ... }

나쁜:

.super-control { ... }

• 이미 가지고있는 블록과 유사한 다른 블록 (다른 페이지에서)이 필요한 경우 새 블록을 만드는 대신 수정자를 추가해야합니다.

예:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

수정 자 포함 :

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

그런 다음 CSS에서 수정 사항을 지정할 수 있습니다.

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

질문이 있으시면 기꺼이상의 해 드리겠습니다. 저는 2 년 동안 BEM 을 사용해 왔으며 이것이 제가 만난 최고의 대회라고 주장합니다.

---

나는 함께 갈 것이다 :

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

언제 까지나 당신의 CSS가 제대로 구성되어,로 primary및 secondary응용 프로그램에 다른 어떤과 충돌해서는 안 :

.controls.primary {}

메인 클래스이므로 코드에서 / controls앞에 추가했습니다 .primarysecondary

아래의 첫 번째 세트가 두 번째 세트보다 훨씬 더 읽기 쉽다고 생각합니다.

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}

---

NCSS 라는 훌륭한 대안이 있습니다 .

Named Cascading Style Sheets는 의미 CSS에 대한 명명 규칙 및 지침입니다.

왜:

대규모 CSS는 여러 종류의 개발자와 함께 프로젝트를 진행하는 동안 악몽이었습니다. 관습과 지침의 부족은 유지 불가능한 진흙 덩어리로 이어질 것입니다.

골:

HTML 템플릿에 대한 의미 정보를 제공하는 예측 가능한 CSS 문법입니다.

• 영향을받는 태그, 구성 요소 및 섹션
• 한 클래스와 다른 클래스의 관계는 무엇입니까

클래스:

명명 된 캐스 케이 딩 스타일 시트는 다음과 같이 나뉩니다.

• 네임 스페이스
• 구조 클래스
• 구성 요소 클래스
• 유형 클래스
• 수정 자 분류
• 기능적 클래스
• 예외

추가 정보 : https://ncss.io/documentation/classes

예 :

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Further reading: https://ncss.io/documentation/examples

Tools:

Installation:

npm install ncss-linter

Validate a HTML string:

bin/ncss-linter --html='<div class="box-content"></div>'

Validate a local path:

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Validate a remote URL:

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Further reading: https://ncss.io/documentation/tools

---

Twitter uses SUIT CSS:

https://github.com/suitcss/suit/blob/master/doc/README.md

The same author also wrote Idiomatic CSS:

https://github.com/necolas/idiomatic-css

참고URL : https://stackoverflow.com/questions/7927193/css-class-naming-convention