이 세 가지 CSS 방법론으로 무례한 스타일 시트를 길들이십시오-IT산업-php.cn

Tame Unruly Style Sheets With These Three CSS Methodologies

이 기사는 Siteground와 협력하여 일련의 기사의 일부입니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다. Tame Unruly Style Sheets With These Three CSS Methodologies 이 기사는 원칙, 목표 및 장점을 포함하여 세 가지 성공적인 CSS 아키텍처 방법을 탐색 할 것입니다.

키 포인트

BEM, SMACSS 및 ECSS는 각각 고유 한 원칙, 목표 및 장점을 가진 CSS 아키텍처 관리를위한 세 가지 방법입니다.

BEM (Block-Element-Modifier)은 스마트 명명 규칙을 사용하여 CSS 코드를 재사용 가능한 모듈로 구성하는 장기적인 프로젝트 및 구성 요소의 재사용 가능성을 쉽게 유지 관리하는 데 중점을 둡니다.

SMACSS (확장 가능 및 모듈 식 CSS 아키텍처)는 CSS 규칙을 분류하여 패턴을 식별하고 유지 관리 가능하고 재사용 가능한 CSS를 작성하기위한 가이드를 만들고 코드 조직 및 팀 효율성을 돕는 유연한 이름 지정 규칙을 사용합니다.

ECSS (영구 CSS)는 격리를 강조하고 자체 공유 폴더에 각 구성 요소를 구축하는 데 필요한 모든 코드를 캡슐화하고 엄격한 CSS 명명 규칙을 사용합니다. 장기적 으로이 접근법은 쉽게 유지 보수를 지원하고 파일 크기를 최소화합니다.

CSS 코드는 왜 제어를 벗어나게됩니까?

CSS 코드를 얇게 유지하고 재사용 할 수 있으며 유지 관리 할 수있는 것은 매우 어렵습니다. 이는 중소 및 대규모 프로젝트, 특히 코딩 및 조직 규칙을 일관된 방식으로 실행하지 못한 경우 여러 개발자가 포함 된 프로젝트에서 발생할 수 있습니다. 코드 기반이 크고 시간이 지남에 따라 많은 변경 사항을 겪고 조직이 부족한 경우 팀은 종종 코드의 일부를 제거하거나 기존 코드를 수정하는 대신 스타일 시트 문서 끝에 새로운 스타일 규칙을 추가하는 것을 선호합니다. 주된 이유는 종종 CSS 진술을 편집하거나 삭제하는 효과가 예측할 수 없으며 프로젝트 어딘가에 설계를 유발할 수 있기 때문입니다. 이는 코드 복제, 우선 순위 문제 (스타일 규칙을 재정의하는 것이 전투가 된) 및 전체 인플레이션으로 이어지는 실패한 전략입니다. 일반적으로 귀하의 요구에 가장 적합한 방법을 선택하는 것은 기존 방법에 익숙해지는 것으로 시작하는 반복적 인 프로세스입니다. 지저분한 스타일 시트의 도전에 대처하는 데 도움이되는 세 가지 방법이 있습니다.

bem

BEM은 블록 요소 모디퍼를 나타냅니다. CSS를 구축하기 위해 Yandex가 만든 건축 방법입니다. BEM 방법의 목표는 빠르게 출시되고 장기 지원되는 웹 사이트를 개발하는 것입니다. 확장 가능하고 재사용 가능한 인터페이스 구성 요소를 만드는 데 도움이됩니다. BEM 웹 사이트
여기서 핵심 개념은 프로젝트 및 구성 요소 재사용의 장기적인 유지 보수 용이성입니다. BEM의 핵심 전략은 지능형 이름 지정 규칙의 도움으로 CSS 코드를 재사용 가능한 모듈로 구성하는 것입니다. 자세히 살펴 보겠습니다.
블록이란 무엇입니까?
블록 식별은 BEM 방법을 적용하는 핵심 단계입니다. 블록은 재사용 할 수있는 기능적으로 독립적 인 페이지 구성 요소입니다. HTML에서 블록은 클래스 속성으로 표시됩니다. BEM 문서.
블록으로 취급 할 내용을 결정할 때 코드의 해당 부분을 쉽게 삭제하고 다른 곳에서 사용할 수 있는지 스스로에게 물어보십시오. 예를 들어, 웹 사이트 헤더 또는 바닥 글을 블록으로 취급 할 수 있습니다. 예를 들어 블록을 안전하게 둥지로 만들 수 있습니다. 예를 들어, 메뉴 블록을 헤더 블록 안에 배치 할 수 있습니다.

원칙적으로 페이지의 어느 곳에서나 블록을 재사용 할 수 있기 때문에 블록의 CSS는 여백이나 포지셔닝 규칙을 설정해서는 안됩니다. 마지막으로, 이름을 선택할 때 이름이 블록의 모습이나 상태가 아니라 블록의 무엇을 설명하는지 설명하십시오. 다시 말해, 그 이름은이 질문에 대답해야합니다.
무엇입니까? <..> (예 : 헤더, 메뉴 등)는
대신 어떻게 생겼습니까? <..> (예 : 고정 헤더, 작은 메뉴 등).
<ul class="menu"></ul>
로그인 후 복사
요소는 무엇입니까?
BEM 방법에 따르면, 요소는 A & GT의 일부이며, 이는 독립적 인 의미가 없으며 의미 적으로 블록과 관련이 있습니다. bem 를 얻으십시오 다음은 요소에 적용되는 몇 가지 원칙입니다. 요소는 블록 에만 존재할 수 있습니다 요소는 다른 요소에 속할 수 없으며 블록의 일부일 수 있습니다. 당신은 중첩 요소를 만들 수 있습니다 요소 이름은 외관이 아니라 그 목적을 설명합니다. 명명 요소 일 때 다음 규칙을 따라야합니다. Block__ Element
수정자는 무엇입니까?
수정자는 블록 또는 요소의 외관, 상태 또는 동작을 정의하는 엔티티입니다. BEM 문서 예를 들어, 헤더 블록은 페이지 상단에
를 고정 할 수 있고, 아코디언 블록은
on
또는
off
가 될 수 있고 버튼 블록은 비활성화 등. BEM 수정 자에 대한 명명 규칙은 다음과 같습니다. block 요소
수정 자. 이것이 BEM 방법의 핵심입니다. 또한 BEM은 문서 구조 조직 원리, 도구 세트 및 활발한 커뮤니티를 지원할 수있는 적극적인 커뮤니티를 제공합니다.
BEM 사용의 장점 다음은 프로젝트에서 BEM을 사용하는 것의 장점 중 일부입니다. 새로운 개발자는 태그의 구성 요소와 CSS 규칙 간의 관계를 빠르게 이해할 수 있습니다. 팀 생산성을 촉진합니다. 이 장점은 대규모 프로젝트에서 특히 명백합니다 이름 지정 규칙은 클래스 이름 충돌 및 스타일 누출의 위험을 줄입니다 CSS는 페이지 내의 특정 위치의 마커와 밀접한 관련이 없습니다. CSS는 재사용 가능 입니다

smacsss

SMACSS (Scalable and Modular CSS Architecture)는 CSS 코드를 구성하고 작성하는 데 사용되는 웹 개발 방법입니다. 제작자 Jonathan Snook은 다음과 같이 설명합니다. CSS를 사용할 때 사이트 개발에 대한 일관된 접근 방식을 문서화하려고합니다. SMACSS 웹 사이트 의 핵심은 CSS 규칙을 분류하는 것입니다. 분류는 패턴을 가져오고, 디자인에서 여러 번 반복되는 패턴을 가져 오며, 이에 따라 유지 관리 가능하고 재사용 가능한 CSS 작성에 대한 안내서를 개발할 수 있습니다. SMACS의 핵심 범주는 다음과 같습니다
기본 -이 범주에는 요소의 기본 모양을 제어하는 CSS 규칙이 포함되어 있습니다. 선택기에는 단일 요소 선택기, 속성 선택기, 의사 클래스 선택기, 형제 자매 선택기 등이 포함됩니다. 예를 들어, HTML, Body, A, A : 호버 등

레이아웃 -이 범주는 페이지를 섹션으로 나누는 페이지를 스타일링하는 데 사용됩니다. 모듈 -모듈은 메뉴, 대화 상자, 검색 상자 등과 같은 재사용 가능한 빌딩 블록 스타일 구성 요소로 설계되었습니다. 상태
-이 범주는 특정 상태 (예 : 눈에 보이거나 숨겨진, 확장 또는 닫는 등) 또는 특정보기 (예 : 홈)의 레이아웃 또는 모듈의 모양에 대한 설명이 포함됩니다. 또는 내부 페이지) 스타일. 주제 -이 범주는 레이아웃 및 모듈 모양을 담당하는 CSS 규칙이 포함되어 있기 때문에 상태와 유사합니다. 모든 프로젝트 에이 추가 범주가 필요하지는 않지만 항상 그 존재를 아는 것이 좋습니다.

~~SMACSS 명명 컨벤션~~ 위에서 설명한 범주와 관련하여 SMACSS는 코드 조직 및 개발 팀의 생산성을 돕기위한 이름 지정 규칙을 제안합니다. 레이아웃, 상태 및 모듈 규칙은 의미있는 이름이나 약어로 접두사됩니다. 레이아웃, 그리드 및 간단한 L-와 같은 레이아웃 규칙의 경우 허용 가능한 접두사입니다. 국가 규칙의 경우, 협약은 IS- 숨겨진 주 접두사, 예 : is-hidden, is-visible 등을 사용하는 것입니다. 모듈은 .menu, .dialog 등과 같은 구성 요소의 이름 만 사용하십시오. 예를 들어, 열리는 대화 상자를 스타일링하려면 CSS에서 .dialog.is-open과 같은 선택기를 사용할 수 있습니다. 동일한 모듈의 모듈 및 변형 내의 관련 요소는 모듈의 기본 이름으로 접두사를 작성해야합니다. 또한 ID, 요소 선택기 또는 중첩 선택기를 사용하지 마십시오. 예를 들어, menu
라는 모듈 내에서 메뉴 항목을 선택하려면 다음과 같은 선택기를 쓰지 말고 .menu li a, .menu-link 또는 .menu-item과 같은 것을 사용하십시오. BEM과 달리 SMACSS는 너무 엄격한 이름 지정 규칙을 규정하지 않습니다. Jonathan Snook은 다음과 같이 분명히 밝혔습니다. 계약을 체결하고 기록하고 고수하십시오. SMACSS 웹 사이트 SMACSS를 사용하는 장점 CSS 인코딩에 대한 SMACSS 방법의 일부 장점은 다음과 같습니다.
는 너무 엄격하지 않으면 서 모듈 식, 유지 관리 가능한 CSS에 대한 효과적인 가이드를 제공합니다 당신은 smacsss를 신속하게 배우고 가르 칠 수 있습니다 ~~SMACSS 이름 지정 규칙은 BEM만큼 동점이 아니며 어떤면에서 마스터하기가 더 쉽습니다. 크고 소규모 프로젝트에 잘 사용될 정도로 유연합니다~~

ecsss

영구 CSS 또는 ECSS는 크고 빠르게 변화하는 오랜 웹 프로젝트를위한 스타일 시트를 작성하는 안내서입니다. ECSS 웹 사이트 이 CSS 접근법은 대규모 CSS 문제를 다루는 저자 벤 프레인의 원래 관점에 대한 저의 관심을 끌었습니다. ECSS의 핵심 개념은 격리입니다. 격리는 각 구성 요소가 독립적 인 코드 단위, 종속성 없음, 컨텍스트 부담 없음, 스타일 누출 위험없이 재사용 가능하며 제거 할 수 있음을 의미합니다. 이것은 주로 다음에 의해 달성됩니다 :

자체 공유 폴더에서 모든 코드 (CSS뿐만 아니라 각 구성 요소를 빌드하는 데 필요한 모든 기술)를 캡슐화합니다.
기존 구성 요소와 유사한 구성 요소가 필요하지만 변형이 작더라도 변형이 작더라도 완전히 새로운 구성 요소를 만듭니다.
엄격한 CSS 이름 지정 규칙 를 사용하십시오
위의 두 번째 지점에 따르면, 반복 속성과 값은 ECS에 문제가되지 않는 것이 분명합니다. 이와 관련하여 ECSS는 기존 구성 요소를 확장하거나 추상화하여 BEM 및 SMACSS와 같은 방법과 근본적인 차이를 나타내므로 가능한 한 코드 복제를 피하거나 피할 수 있습니다. 이것은 ECSS가 큰 스타일 시트 파일을 생성한다는 것을 의미합니까? 불확실한. 파일 압축으로 약간의 테스트를 거친 후 Ben Frain은 "GZIP가 중복 문자열을 압축하는 데 매우 효율적이기 때문에 ECSS를 사용하는 파일 크기 차이와 중복보다는 추상적 인 방법 사이의 파일 크기 차이가 매우 작다고 결론지었습니다.
ECSS를 사용하는 이점 다음은 ECSS 방법을 적용하고 반복성에 대한 견해를 받아 들여 얻을 수있는 이점입니다.
각 시각적 모드의 분리를 유지함으로써 CSS 코드는 유지하기가 더 쉽습니다. 중복 속성과 값을 찾을 수 있지만 파일 크기 증가는 장기적으로 여전히 작습니다. 이는 모듈이 독립적이고 독립적 인 장치이기 때문에 디자인을 깨는 것에 대해 걱정하지 않고 더 이상 필요하지 않은 모듈을 신속하게 삭제할 수 있기 때문입니다. 모듈을 작성하는 데 필요한 모든 언어/기술 파일은 동일한 폴더를 공유하므로 더 이상 필요하지 않은 컨텐츠를 편집하고 물리적으로 삭제할 수 있습니다.

당신은 Frain의 Book Persistence CSS 에서이 혁신적인 접근법의 모든 세부 사항을 읽을 수 있습니다.
결론

관리 가능하고 잘 조직 된 CSS 코드 작성은 어려운 일입니다. 이 기사에서는이 작업에 도움이되는 세 가지 방법을 소개합니다. 이것은 결코 철저한 목록이 아니며, 이러한 방법 중 어느 것도 프로젝트에서 발생할 수있는 모든 문제를 해결하지 못합니다. 그것을 시도하고 당신에게 무엇이 효과가 있는지 확인하십시오. 또한 BEM 및 SMACS를 조합하여 사용해 볼 수도 있고, 자신이 설정 한 일련의 질문에 따라 자신의 접근 방식을 개발할 수도 있습니다. 잘 조직되고 관리하기 쉬운 CSS 코드를 작성하는 황금률은 무엇입니까? CSS 아키텍처 접근법을 사용하면 통증이 완화 될 수 있다고 생각하십니까? 주석 상자를 클릭하여 알려주세요.

CSS 아키텍처 방법에 대한 질문

OOCSS, SMACSS 및 BEM 방법의 주요 차이점은 무엇입니까?
OOCSS, SMACSS 및 BEM은 개발자가 깨끗하고 유지 관리 가능하며 확장 가능한 CSS를 작성할 수 있도록 설계된 CSS 방법입니다. OOCSS 또는 객체 지향 CSS는 개발자가 재사용 가능한 객체 지향 코드를 작성하도록 권장합니다. 구조물을 외관에서 분리하고 컨테이너를 컨텐츠에서 분리하는 데 중점을 둡니다. SMACSS, 또는 확장 가능 및 모듈 식 CSS 아키텍처는 CSS 규칙을 분류하여 코드를보다 유연하고 관리하기 쉽게 만드는 지침을 제공합니다. BEM 또는 Block Element Modifier는 CSS를보다 쉽게 읽고 이해할 수있는 이름 지정 컨벤션입니다. 재사용 및 결합 할 수있는 별도의 블록으로 UI를 나눕니다.
CSS에서 WordPress 인코딩 표준을 구현하는 방법은 무엇입니까?
WordPress에는 자체 CSS 코딩 표준 세트가있어 다양한 프로젝트 간의 일관성과 가독성을 보장합니다. 이러한 표준에는 명명 규칙, 계약, 간격 및 의견에 대한 규칙이 포함됩니다. 이러한 표준을 구현하려면 Stylelint와 같은 WordPress 구성과 함께 CSS Lint 도구를 사용할 수 있습니다.
웹 개발에서 스타일 시트의 역할은 무엇입니까?
"사무실에서 CSS 영웅이되고 CSS 아키텍처를 통해 구조적이고 유지 가능하며 확장 가능한 CSS를 시청하십시오! 이 과정을 시청
스타일 시트는 웹 페이지의 레이아웃과 디자인을 정의하는 파일 또는 코드 양식입니다. 레이아웃, 색상, 글꼴 및 애니메이션을 포함하여 페이지에서 HTML 요소의 시각적 렌더링을 제어합니다. CSS (캐스케이드 스타일 시트)는 가장 일반적으로 사용되는 스타일 시트 언어입니다.
CSS 방법은 웹 디자인 프로세스를 어떻게 개선합니까?
CSS 방법은 CSS를보다 체계적이고 재사용 가능하며 확장 가능하게하여 웹 디자인 프로세스를 크게 향상시킬 수 있습니다. 이들은 CSS를 작성하는 체계적인 방법을 제공하여 코드의 복잡성을 줄이고 이해하고 유지 관리하기 쉽고 성능을 향상시킵니다.
HTML에서 CSS를 작성하기위한 모범 사례는 무엇입니까?
HTML에서 CSS를 작성하기위한 모범 사례에는 외부 스타일 시트를 사용하여 컨텐츠에서 스타일을 분리하고, 선택기를 효율적으로 사용하고, 관련 스타일을 그룹화하고, 속성 속성을 사용하고, 명확성을위한 주석을 달성하는 것이 포함됩니다. CSS를 확인하여 오류가없고 다른 브라우저와 호환되는지 확인하는 것이 중요합니다.
내 CSS 코드를 더 쉽게 유지할 수 있도록하는 방법은 무엇입니까? CSS 코드를 더 쉽게 유지할 수 있도록하려면 OOCSS, SMACSS 또는 BEM과 같은 CSS 방법을 사용하여 코드를 구축하고 구성하기위한 가이드를 제공 할 수 있습니다. 다른 전략에는 CSS가 모듈화, SASS 이하와 같은 전처리기를 사용하고 명명 규칙을 따르는 것이 포함됩니다. CSS 사전 처리기를 사용하는 장점은 무엇입니까?
SASS와 같은 CSS 전 처리기를 사용하면 CSS의 변수, 중첩, 믹스 인 및 기능을 사용할 수 있으므로 코드를 쉽게 읽고 유지 관리 할 수 있습니다. 또한 더 간결하고 강력한 CSS를 쓸 수 있습니다.
내 CSS가 다른 브라우저와 호환되는지 확인하는 방법은 무엇입니까?
CSS가 다른 브라우저와 호환되도록하려면 사용할 수있는 도구를 사용할 수 있으며,이 도구는 다른 브라우저에서 CSS 속성의 호환성을 보여줍니다. 모든 브라우저에서 완전히 지원되지 않는 CSS 속성의 경우 공급 업체 접두사를 사용하는 것이 중요합니다.
웹 디자인에서 CSS의 중요성은 무엇입니까?
CSS는 웹 페이지에서 컨텐츠의 시각적 프레젠테이션을 제어하기 때문에 웹 디자인에 중요합니다. 일관된 설계 및 레이아웃으로 시각적으로 매력적인 웹 사이트를 만들 수 있습니다. 또한 데스크탑, 태블릿 및 휴대폰과 같은 다양한 유형의 장치를 기반으로 프레젠테이션을 조정할 수 있습니다.
CSS 방법에 대해 더 많이 배우는 방법은 무엇입니까?
온라인으로 CSS 방법을 배울 수있는 많은 리소스가 있습니다. Sitepoint, Smashing Magazine 및 Mozilla Developer Network는 심층적 인 기사 및 자습서를 제공합니다. Coursera 및 Udemy와 같은 플랫폼에서 온라인 과정을 찾을 수도 있습니다.

위 내용은 이 세 가지 CSS 방법론으로 무례한 스타일 시트를 길들이십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!