BEM과 규모로 작업합니다

이 기사는 경험이 풍부한 개발자의 통찰력을 바탕으로 BEM (블록, 요소, 수정 자) CSS 방법론 사용의 과제와 모범 사례를 탐구합니다. 해결 된 핵심 질문은 대규모 프로젝트에서 BEM의 복잡성을 효과적으로 관리하는 방법입니다.

이 기사는 일반적인 오해를 강조하여 시작됩니다 : 과도한 네 베스트. 기본 BEM 구조 (

)는 간단하지만 많은 개발자들이 이것을 실수로 과도한 수준으로 확장합니다 (예 : ). 인터뷰 한 개발자들 사이의 합의는 일반적으로 중첩을 하나 또는 두 수준으로 제한하는 것입니다. 깊은 중첩은 가독성과 유지 가능성을 줄이고 종종 더 나은 블록 범위 스코핑 또는 구조 조정이 필요함을 나타냅니다. 한 개발자는 추가 중첩 레벨을 추가하는 대신 더 길고 더 설명적인 요소 이름을 사용하도록 제안합니다. 다른 하나는 과도한 중첩을 CSS에서 DOM 구조를 엄격하게 정의하는 것과 비교하여보다 유연한 접근 방식을 옹호하는 강력한 비유를 제공합니다. 그러나 모든 개발자 가이 2 단계 한도를 엄격하게 준수하는 것은 아닙니다. 어떤 사람들은 더 깊은 둥지가 때때로 필요하다는 것을 알게됩니다.

적절한 블록 스코핑이 중요합니다. 이 기사는 가장 작고 가장 독립적 인 단위로 시작하여 관련없는 요소를 포함하는 지나치게 광범위한 블록 정의를 피합니다. 이 접근법은 더 나은 모듈성과 재사용 성을 보장합니다 CSS 파일 구성은 또 다른 핵심 측면입니다. 몇몇 개발자들은 한 파일당 블록 구조를 옹호하여 모듈성과 유지 보수 용이성을 촉진합니다. 다른 사람들은 이것을 SMACS의 요소와 결합하여 하이브리드 접근 방식을 만듭니다. 이 기사는 또한 대규모 CSS 프로젝트를 관리하기위한 구조화 된 레이어링 시스템을 제공하는 특이성, 명시성 및 도달 범위를 기반으로 CSS를 구조화하는 방법론 인 ITCSS (역 삼각형 CSS)에 대해 설명합니다. 코드 가독성과 유지 보수성을 향상시키기 위해 암호어 약어에 비해 길고 서술적인 클래스 이름의 사용이 권장됩니다. 이 기사는 BEM과 함께 Sass 's .block__element--modifier를 사용하지 말고 HTML에서 멀티 클래스 접근법을 선호하여 클래스 간의 명확한 관계를 유지하고 CSS가 팽만감을 피하십시오. 이 접근법은 유연성과 수정이 더 쉬워집니다. .block__element__subelement--modifier 마지막으로, CSS 라인의 중요성은 이름 지정 규칙을 시행하고 팀 간의 일관성을 보장하는 데 강조됩니다. 이 기사는 또한 JavaScript 및 템플릿을위한 도구를 포함하는 더 넓은 Yandex Bem Stack을 다루지 만 많은 개발자가 CSS 방법론에만 초점을 맞추고 있음을 인정합니다. 결론은 다양한 출처의 도구와 기술을 결합하여 팀과 프로젝트에 적합한 워크 플로우를 찾는 것의 중요성을 강조합니다. 잘 문서화 된 구조화 된 구성 요소의 이점은 더 나은 휴대 성을 위해 오버 오토 화를 피할 필요성과 함께 강조됩니다.이 기사는 BEM의 다양한 측면, 다른 방법론과의 비교 및 ​​구현 및 스케일링을위한 실질적인 팁을 다루는 자주 묻는 질문 섹션으로 마무리됩니다.

위 내용은 BEM과 규모로 작업합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!