보다 논리적인 방식으로 CSS 작성-CSS 튜토리얼-php.cn

보다 논리적인 방식으로 CSS 작성

高洛峰

풀어 주다： 2017-02-15 13:14:53

원래의

1262명이 탐색했습니다.

OOCSS 및 BEM

다음과 같은 이유로 OOCSS와 BEM의 조합 사용을 권장합니다.

은 CSS와 BEM의 차이점을 정리하는 데 도움이 됩니다. HTML 명확하고 엄격한 관계.
은 재사용 가능하고 조립하기 쉬운 구성 요소를 만드는 데 도움이 될 수 있습니다.
중첩을 줄이고 특이성을 줄일 수 있습니다.
은 확장 가능한 스타일 시트를 만드는 데 도움이 됩니다.

OOCSS는 "객체 지향 CSS"라고도 알려져 있으며 CSS를 작성하는 방법으로 스타일 시트를 사용하도록 권장하는 것입니다. "객체" 모음: 웹 사이트 전체에서 여러 번 사용할 수 있는 재사용 가능하고 반복 가능한 코드 조각을 만듭니다.

참고:

Nicole Sullivan의 OOCSS 위키
Smashing Magazine의 OOCSS 소개

BEM 또는 "Block-Element-Modifier"는 HTML 및 CSS 클래스 이름에 대한 명명 규칙입니다. BEM은 원래 Yandex가 거대한 코드 기반과 확장성을 가지고 있다는 것을 알고 제안한 것이었습니다. BEM은 이를 위해 탄생했으며 OOCSS를 준수하는 일련의 참조 지침 사양 역할을 할 수 있습니다.

CSS Trick의 BEM 101
Harry Roberts의 BEM 소개

예

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

로그인 후 복사

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

로그인 후 복사

.listing-card는 상위 수준 구성 요소를 나타내는 블록입니다.
.listing-card__title은 .listing-card의 일부인 요소이므로 블록은 요소들로 구성됩니다.
.listing-card--featured은 이 블록이 .listing-card과 상태가 다르거나 변경되었음을 나타내는 수식어입니다.

OOCSS 및 BEM

다음과 같은 이유로 OOCSS와 BEM의 조합 사용을 권장합니다.

은 CSS와 HTML 사이의 명확하고 엄격한 관계를 명확히 하는 데 도움이 될 수 있습니다.
은 재사용 가능하고 조립하기 쉬운 구성 요소를 만드는 데 도움이 될 수 있습니다.
중첩을 줄이고 특이성을 줄일 수 있습니다.
은 확장 가능한 스타일 시트를 만드는 데 도움이 됩니다.

참고:

Nicole Sullivan의 OOCSS 위키
Smashing Magazine의 OOCSS 소개

CSS Trick의 BEM 101
Harry Roberts의 BEM 소개

예

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

로그인 후 복사

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

로그인 후 복사

.listing-card는 상위 수준 구성 요소를 나타내는 블록입니다.
.listing-card__title은 요소이고 .listing-card의 일부이므로 블록은 요소로 구성됩니다.
.listing-card--featured은 이 블록이 .listing-card과 상태가 다르거나 변경되었음을 나타내는 수식어입니다.

보다 합리적인 방법으로 CSS를 작성하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!