보다 논리적인 방식으로 CSS 작성
- 高洛峰원래의
- 2017-02-15 13:14:531257검색
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 사이의 명확하고 엄격한 관계를 명확히 하는 데 도움이 될 수 있습니다.
은 재사용 가능하고 조립하기 쉬운 구성 요소를 만드는 데 도움이 될 수 있습니다.
중첩을 줄이고 특이성을 줄일 수 있습니다.
은 확장 가능한 스타일 시트를 만드는 데 도움이 됩니다.
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과 상태가 다르거나 변경되었음을 나타내는 수식어입니다.
보다 합리적인 방법으로 CSS를 작성하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!