클린 CSS 작성을위한 황금 지침 - itepoint

(이 발췌문은 css 마스터 에서 Tiffany Brown, 서점과 eBook으로 제공됩니다.) 주요 개념 : 광범 경량, 재사용 가능한 CSS의 경우. 이것은 충돌을 방지하고 코드 부풀어 오른다 낮은 특이성 우선 순위 : 선택기를 간결하게 유지하십시오. 유형과 클래스 선택기 (예 : ) 또는 체인 클래스 선택기 (예 : )를 결합하지 마십시오. 이것은 재사용 성과 유지 가능성을 향상시킵니다 설명 클래스 이름 사용 :

규칙의 목적 또는 영향에 영향을 미치는 내용을 명확하게 전달하는 시맨틱 클래스 이름을 사용하십시오 (예 : , ). 이것은 디자인 변경에 대한 코드 이해와 적응성을 향상시킵니다 마크 업에서 CSS를 분해하기 : 는 자식 대신 클래스 선택기 (), 자손 (``) 또는 속성 선택기를 가능할 때마다 사용합니다. 이를 통해 CSS 수정이 필요하지 않고 마크 업이 변경되어 유연성을 촉진합니다.

클린 CSS 제작 : 모범 사례

이 가이드 라인은 경량 및 재사용 가능한 CSS를 촉진합니다
• Global Selectors 거부 : Global Selectors 스타일 모든 일치하는 요소 사이트 전체에서 스타일을 거부합니다. 이로 인해 갈등이 발생할 수 있으며 변형이 필요할 때 광범위한 재정의가 필요합니다. 클래스를 사용하면 타겟팅 스타일이 가능합니다 * p 특이성 최소화 : button 높은 특이성 (복잡한 선택기에서)은 스타일을 재정의하기 어렵게 만듭니다. 간단한 클래스 기반 선택기가 바람직합니다. 체인 클래스를 피하십시오. [type=checkbox]
시맨틱 클래스 이름을 받아들이십시오 :
• 시각적 스타일뿐만 아니라 기능과 내용을 설명하는 이름을 선택하십시오. 이것은 디자인이 진화함에 따라 장수를 보장합니다 uncouple CSS 및 Markup : p.error 클래스 선택기는 유연성을 제공합니다. CSS를 특정 마크 업 구조에 묶는 아동 또는 자손 셀렉터에 대한 과도한 관계를 피하십시오. .message.warning
예 : 글로벌 선택기 방지
• 기본 버튼 스타일을 고려하십시오 다른 스타일 ".close"버튼이 필요한 경우 수많은 스타일이 재정의되어야합니다. .alert 더 나은 접근 방식은 기본 스타일에 클래스를 사용하는 것입니다. .error 이것은 코드를 줄이고 충돌을 피합니다. 예 : 지나치게 특정 선택기를 피하는 <code>.product-image
• (특이성 0,2,0)는 (특이성 0,1,0)보다 재사용 가능성이 떨어집니다. 후자는 모든 요소에 적용될 수 있습니다 예 : 시맨틱 대 비 미용도 클래스 이름

  는

  보다 덜 설명 적입니다. 후자는 더 나은 목적을 전달하고 디자인이 변경 되더라도 관련성을 유지합니다.

  .red-text CSS 및 마크 업의 단단한 커플 링을 피하십시오 .error-message

  클래스 선택기 (예 : ) 사용을 사용하면 아동/자손 선택기와 달리 CSS 조정없이 마크 업 변경이 가능합니다.

  추가 읽기와 자원 : 필립 월튼의 "CSS 아키텍처" 해리 로버츠의 CSS 지침 니콜라스 갤러거 (Nicolas Gallagher)의 "HTML 시맨틱 및 프론트 엔드 아키텍처에 관한" 깨끗한 CSS에 대한 자주 묻는 질문 (FAQ) :

  이 섹션에는 제공된 FAQ에 대한 답변이 포함되어 있으며, 간결함과 명확성을 위해 다시 제작하여 원래 의미를 유지합니다. 길이로 인해이 섹션을 생략했습니다. 내가 포함시키고 싶다면 알려주세요.

위 내용은 클린 CSS 작성을위한 황금 지침 - itepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!