BEM 및 SMACSS : 그곳에 있었던 개발자의 조언

CSS 방법론은 혼란스럽고 결정하기가 어려울 수 있습니다. 가장 잘 알려진 두 가지 옵션 인 BEM과 SMACSS.

를 고려해 봅시다. 다음 프로젝트를 위해 이들 중 하나를 선택해야합니까? 그들이 가장 적합한 것은 무엇입니까? 무엇이 잘못 될 수 있습니까? 이미 하나와 함께 일하고 있다면 - 의도 한대로 사용하고 있습니까? 최대한의 잠재력에? 당신이 제대로하고 있는지 어떻게 알 수 있습니까? 나는 이미 자신의 프로젝트에서 그 질문을 겪은 사람들에게 자신의 경험을 통해 배우는 것이 좋을 것이라고 생각했습니다.

나는 BEM 및/또는 SMACSS와 함께 일한 개발자들에게 성공 사례, 공포 이야기, 조언 및주의의 말을 요청했습니다. 나는 일부 개발자에게 전체 질문 목록을 주었고 다른 개발자들은 나에게 그들의 생각을 자유롭게 만들었습니다. 나는 그들의 CSS 최적화를 고려하는 사람들에게 귀중한 독서가되기를 희망하는 것에 결과를 컴파일했다.

. CSS 아키텍처를 통해 사무실의 CSS 영웅이 되십시오. 구조화, 유지 관리 및 확장 가능한 CSS 공예

이 과정을보십시오 이 과정을보십시오 BEM 및 SMACSS를 처음 사용하는 사람들의 경우 BEM과 SMACSS가 무엇인지에 대한 매우 높은 수준의 개요를 제공하는 것으로 시작하겠습니다. 키 테이크 아웃

BEM은 모든 프로젝트 규모에 대해 다재다능합니다. BEM은 대규모 프로젝트를위한 것이 아닙니다. 소규모 및 대규모 프로젝트에서 깨끗하고 유지 관리 가능한 코드를 유지하는 데 유리합니다.

BEM으로 중첩을 피하십시오 : BEM은 SASS 코드베이스에서 흔한 셀렉터의 과도한 둥지를 피함으로써 CSS의 복잡성을 줄이는 데 도움이됩니다. BEM에 의한 캡슐화 및 모듈성 : BEM의 캡슐화 방법론은 종속성을 과도하지 않고 다른 프로젝트에서 구성 요소를 재사용 할 수 있습니다. SMACSS는 프로젝트 핸드 오버를 단순화합니다 : SMACSS 분류는 프로젝트를보다 쉽게 ​​설명하고 나눠 줄 수 있습니다. 특히 계약 또는 협업 설정에 유용합니다. 하이브리드 접근 방식은 효과적 일 수 있습니다. BEM과 SMACSS를 결합하면 두 방법론의 강점을 활용하여 CSS 아키텍처에서 유연성과 향상된 조직이 가능합니다. 읽기 및 실험 : BEM과 SMACS는 모두 장점이 있으며 함께 사용할 수 있습니다. 둘 다 읽고 프로젝트에서 실험하면 CSS 관리 및 워크 플로가 향상 될 수 있습니다.

BEM은 무엇입니까? BEM은

블록 요소 수정 자

를 나타냅니다. yandex에서 시작되었습니다. CSS 클래스를 독립 모듈로 정렬하는 다소 엄격한 방법을 제공합니다. 아이디어에는 몇 가지 변형이 있지만 가장 일반적인 것은 다음과 같이 보입니다.

블록은 웹 사이트의 객체를 나타냅니다. 예를 들면 :

• 사람
  로그인 양식 메뉴 검색 양식
요소는 특정 함수를 수행하는 블록 내의 구성 요소입니다. 블록의 맥락에서만 의미가 있어야합니다. 예를 들면 :
• 핸드 로그인 버튼 메뉴 항목 검색 입력 필드
수정자는 블록의 변형을 표현하는 방법입니다. 예를 들어:
• 키가 크고 짧은 사람 응축 된 로그인 양식 (예 : 하나의 버전으로 레이블을 숨기고 있습니다)
바닥 글 또는 siteemap에 대해 다르게 보이도록 수정 된 메뉴
특정 버튼 스타일의 검색 입력 필드
메뉴의 예에서 클래스 이름은 다음과 같이 보일 수 있습니다.
BEM.info 웹 사이트에는 BEM을위한 다른 건축 원리와 도구가 있지만 개발자가 BEM에 대해 논의 할 때 종종 위의 명명 컨벤션에 주로 초점을 맞추고 있으며 이는 아래의 대부분의 논의에 해당됩니다. <.> smacss 란 무엇입니까? SMACSS는 Jonathan Snook의 CSS 프레임 워크입니다. SMACSS 웹 사이트에서 그는 강력한 CSS 프레임 워크보다 "스타일 가이드"와 비슷하다고 말합니다. 규칙에 대한 5 가지 범주에 중점을 둡니다 베이스는 html, body, a, a : hover와 같은 기본값에 사용됩니다. 여기에는 CSS 재설정이 포함되며 종종 자체 기본 CSS 파일 또는 기본 CSS의 시작 부분에 있습니다. 레이아웃은 페이지를 헤더, 바닥 글 및 기사와 같은 요소와 섹션으로 나눕니다. 종종 개발자는 L-. 모듈은 설계에서 재사용 가능한 모듈 식 요소입니다. SMACSS 문서는 모듈을 대부분의 요소로보고 있으므로 연설을 할 필요가 없지만 선택하면 그렇게 할 수 있습니다.
• . 상태는 각 요소의 변형에 사용됩니다 (예 : 활성, 비활성, 확장, 숨겨진). 이들은 IS-와 접두사입니다. IS- 활성, IS- 비활성, IS-PPENDED, IS-HIDDEN 또는 : 호버 및 : 초점 또는 미디어 쿼리와 같은 의사 클래스를 통해 IS-HIDDEN. 테마는 상태와 비슷하지만 모듈과 레이아웃이 어떻게 보이는지 정의합니다. 전체적으로 다른 모습을 공유하는 더 큰 사이트에 더 적용 할 수 있습니다. 페이지 당 또는 섹션 기준으로 테마 변형을 추가합니다.
SMACSS의 자식 요소 (BEM의“요소”가“블록”에있는 것과 같은)에는 부모 항목이 대시로 접두사를 가지고 있습니다. 예를 들어 메뉴 및 메뉴-항목. SMACSS는 모든 것이 개발자 선호도에 달려 있으며 BEM만큼 규범이 아니라고 말합니다. SMACSS는 기본 지침 만 제공합니다. 각 카테고리에 대해 자신의 이름 지정 규칙을 사용하여 다른 개발자가 따라갈 수 있도록 접근 방식을 문서화하는 한 선호하는 방식으로 배열하십시오. BEM

를 사용한 사람들의 지침 크고 작은 모든 프로젝트에 적용 가능합니다 영국 카디프의 프론트 엔드 개발자 인 Hamish Taplin은 BEM이 크고 작은 프로젝트에 적합하며 많은 장점을 제공한다고 생각합니다. “BEM은 대규모 프로젝트에 선전되었지만 전혀 믿지 않습니다. 깨끗하고 유지 관리 가능하며 특이성 문제와 싸우지 않는 코드를 작성하는 것을 좋아한다면 BEM은 귀하를위한 것입니다. 어떤 사람들은 그것이 생산하는 HTML이 추악하거나 중복적이라고 말하지만 아름답다고 생각합니다. 나는 일부 HTML을 읽고 무슨 일이 일어나고 있는지, 요소가 서로 어떻게 관련되어 있는지 정확하게 볼 수 있습니다. 대단해.”<.> 중첩 를 피합니다 호주 시드니 출신의 프론트 엔드 개발자 인 Alec Raeside는 BEM이 선택기의 너무 많은 둥지를 피하는 좋은 방법을 발견했습니다. “BEM은 UI를 구축하는 좋은 방법입니다. 설명적이고 때로는 길고 클래스 이름은이 클래스/선택기가 UI 아키텍처 내에서 바로 이해하는 데 좋습니다. 또한 SASS 코드베이스의 일반적인 몰락 인 선택기 중첩을 거의 필요하지 않다는 것을 의미합니다. 일반적으로 BEM으로 둥지를 틀면 HTML 태그 이름을 통해 요소를 타겟팅하거나 구성 요소 스타일링이 겹칠 때 특이성 전투에서 승리 할 때입니다. 클래스의 힘을 재발견하는 데 도움이됩니다 Hamish Taplin은 BEM과 대상 지향 원칙의 칭찬을 불렀습니다. 그는“시맨틱”마크 업의 개념에 대한 흥미로운 생각을 제기합니다. “BEM의 장점은 즉시 분명했습니다. BEM과 OOCSS 원칙을 채택하기 전에 나는“의미 론적”마크 업으로 알려진 것을 옹호했습니다. 나는 많은 개발자들 (내가 포함 된)이 이것이 실제로 의미하는 바를 크게 오해했으며,“의미 적”이지 않아 계급의 힘을 무시하고 있다고 생각합니다. 검색 엔진 및 스크린 리더는 사용하는 클래스 또는 그리드에 사용되는 여분의 DIV에 신경 쓰지 않습니다. 트위터 엔지니어 인 니콜라스 갤러거 (Nicholas Gallagher)는 자신의 블로그 게시물“HTML 시맨틱과 프론트 엔드 아키텍처에 대해”다음과 같이 말합니다. 클래스 이름은 "무소 같은"일 수 없습니다. 이름이 사용되는 이름 : 의미가 있으며 목적이 있습니다. 클래스 이름 시맨틱은 HTML 요소와 다를 수 있습니다. '”

는 더 큰 사이트에서 작업을 더 쉽게 만듭니다 많은 개발자들이 언급 한 BEM의 큰 강점 중 하나는 더 깨끗하고 모듈 식 프로젝트를 개발하고 구현하는 능력입니다. BEM은 큰 사이트를위한 것이 아니라이 공간에서 큰 이점이있는 것으로 보입니다. Hamish는 그의 경험을 논의했으며 심지어 그것에 대한 전체 블로그 게시물을 가지고 있습니다.“나는 몇 가지 작은 프로젝트에 덤벼 들었고 그것을 잡아 당겼습니다. 처음에는 몇 년 동안 일해 왔던 방식에 위배되었지만 혜택은 분명해 졌기 때문에 처음에는 매우 어려웠습니다. 그런 다음 우리는 본질적으로 매우 크고 모듈식이되는 프로젝트를 시작했습니다. 이것은 내가 다른 개발자 (BEM을 사용하고있는 Paul Goodfield)와 함께 일하는 곳에서 내가 일한 첫 번째 Bluegg 프로젝트였습니다. 저는 프론트 엔드와 백엔드를했습니다. 혜택은 즉시 명백했습니다. 바울은 내 마크 업이 무엇을하고 있는지 정확히 이해하고 그 주위에 그의 라벨 템플릿을 쓸 수있었습니다. 그가 약간의 간격을 메울 필요가 있다면 BEM의 예측 가능한 특성은 그가 가지고있는 것처럼 HTML을 쓸 수 있었고 전체 과정이 훨씬 더 매끄럽게 만들어졌습니다. 블로그 게시물“내 건강 기술 구축”에 이것에 대해 썼습니다.

Alec Raeside는 또한 BEM 명명의 모듈 식 특성을 통해 대규모 프로젝트에 대한 이점을 발견했습니다. 그는 말한다 :

“BEM은 대규모 프로젝트에 적합합니다. CSS는 복잡하고 불특정 선택기가 의도하지 않은 결과를 일으킬 수있는 대규모 프로젝트가 떨어질 수 있습니다. 예를 들어, .Container UL {}와 같은 선택기 아래에서 모든

을 타겟팅하면 해당 코드가 작성 될 때 작동 할 수 있지만 다른 구성 요소가 .Container 구성 요소에 중첩되면 UL 스타일이 적절하지 않을 수 있습니다. BEM 방법론의 핵심에 캡슐화 및 특이성을 사용하면 구성 요소와 비특이적 선택기 간의 명명 충돌을 실수로 일부 페이지 스타일링하는 것을 방지 할 수 있습니다.

BEM 방법론은 재사용 코드를 캡슐화합니다 BEM 및 Clean CSS 제작 분야의 아이디어에 막대한 금액을 기부 한 영국의 컨설턴트 프론트 엔드 건축가, 디자이너 및 개발자 인 Harry Roberts는 BEM 방법론이 구성 요소를 더 쉽게 재사용 할 수 있다고 지적했습니다. 캡슐화를 통해 웹 사이트를 통해 : “BEM 방법론은 구성 요소가 한 코드베이스에서 다른 코드베이스로 이동 해야하는 프로젝트에 이상적으로 적합합니다. HTML, CSS, JS를 다른 프로젝트로 이동할 수 있도록 완전히 캡슐화되어야하며, 귀하와 의존성을 취할 필요가 없습니다. 5 개의 다른 사이트가있는 회사에서 일하고 있으며 모두 홈페이지에 동일한 회전 목마가 필요하다고 가정 해 봅시다. BEM 방법론에 그 회전 목마를 써서 한 조각으로 집어 들고 움직일 수 있습니다.”

. 는 구성 요소 기반 포커스 가있는 프레임 워크와 잘 작동합니다 시드니의 프론트 엔드 개발자 인 조쉬 헌트 (Josh Hunt)는 비슷한 구성 요소 초점을 가진 다른 프레임 워크와 잘 어울립니다. “BEM은 웹 앱과 같이 자체 포함 된 위젯이나 구성 요소가 많은 사이트에서 실제로 잘 작동합니다. HTML 구성 요소 (Angular, React, Polymer/Web 구성 요소)를 홍보하는 프레임 워크도 BEM 방법론을 훨씬 쉽게 적용 할 수 있습니다. 프로토 타입을 전달하는 빠른 방법

네덜란드 로테르담의 프론트 엔드 개발자 인 Bob Donderwinkel은“BEM CSS의 이점”에 대한 훌륭한 프레젠테이션을 제공했습니다. 그는 BEM과 함께 일하면서 가장 큰 이점을 지적합니다. “저는 지금 반년 동안 BEM과 함께 덤벼 들었고 www.viewbook.com을위한 새로운 스크롤 갤러리 페이지와 이전 플래시 사이트를 HTML 버전으로 재 작업했습니다. 이 프로젝트의 디자인은 잘 정의되었으며 BEM을 사용한 가장 큰 승리는 프로토 타입을 빠르게 제공하는 것이라고 말할 것입니다. 그리고 주로 블록, 요소 및 수정 자로 디자인을 "해독"하기 때문에 CSS를 코딩하기 위해 좋은 헤드 스타트를 제공하기 때문입니다. " 는 두 번 생각하게합니다 Josh Hunt는 이름 지정 컨벤션이 너무 복잡해지기 전에 두 번 생각하는 데 도움이된다는 것을 알게됩니다. “나는 그것이 조금 추악하다는 사실 때문에 발견 되었기 때문에, 정말 긴 계급 이름을 쓸 때 두 번 생각하게합니다.”. 계획을 세우십시오! Hamish Taplin은 또한 새로운 프로젝트를 시작하는 사람들에게 이러한 조언을 제공했습니다. “프로젝트를 시작할 때 어느 정도 계획을 세우십시오. 나는 모형을 거치고 BEM 모듈로 추상화 할 수있는 패턴을 찾는 경향이 있습니다. 이것은 처음에는 어려울 수 있지만 오래된 패턴을 재사용하기 시작하는 시점까지 더 나아질 수 있습니다. 코드 재사용 코드는 개발의 너바나이며, 더 효율적이기 때문에 생산 비용이 내릴 때 상사가 감사 할 것입니다!” 너무 엄격 해지지 마십시오

Josh는 BEM을 사용하려고 할 때 프로젝트에 너무 제한적인 것에 대해 경고합니다 : “BEM에 의해 제한되지 않거나 이상한 패턴을 따라야한다고 느끼지 마십시오. 해리 로버츠 (Harry Roberts) 의이 두 트윗에 끌 렸습니다 :

모듈성, 건조, SRP 등은 큰 아이디어가 아니라는 말이 아닙니다. 그렇습니다! - 그러나 그들이 접근하고 업적이 아니라는 것을 이해합니다.

- Harry Roberts (@CSSwizardry) 12 월 2014 년 2 월 Josh는 다음과 같이 설명합니다.“BEM은 프로젝트의 목표가되어서는 안됩니다. 개발 중이며 유용한 곳을 적용 할 때 염두에 두어야합니다. 이론적 인 '표준'을 고수하려고 노력하지 마십시오. 헬퍼 클래스 (.pull-right 또는 .text-center와 같은)는 BEM과 공존하기에 완전히 시원합니다. 당신이 가질 수있는 곳, 아마도 (아마도 더 좋을 것입니다).

주저했다면, 그냥 뛰어 들어 가서

하미 쉬는 바로 BEM으로 도약하지 않았다. 약간의 시간, 영향력있는 프레젠테이션, 그리고 변화하는 직업을 변화시키는 데 시간이 걸렸고 BEM이 수업을 다시 생각할 수 있도록했습니다. 그러나 그는 기뻐합니다.

“나는 BEM이 몇 번 언급되었고 그것이 흥미로워 보이지만 여전히 계속 진행하고 있다고 생각했지만, 내가 쓰고있는 마크 업과 수업의 양을 최소화하려고 시도하고, sass @extend를 사용하여 문제를 일으키는 문제를 해결합니다. . 어느 날 나는 Harry Roberts의 비디오“Breaking Good Habits”를 보았고 날아갔습니다. 이 사람은 자리를 잡았습니다 - 우리는 실제로이 작업을 수행함으로써 실제로 어떤 문제를 해결하고 있었습니까?”

Hamish는 계속해서 이렇게 말합니다.“당시 Bluegg에서 현재 직장에서 시작하여 BEM을 시험해보기위한 깨끗한 휴식으로 보았습니다.”. 나는 Harry에게 Hamish를“좋은 습관”에 대한 이야기로 불어 넣은 같은 개발자와 Josh에게 트윗으로 영감을주었습니다. 그의 말은“Give it a Go”정신을 반향했다 “내가 작업 한 모든 프로젝트는 BEM Naming Convention의 혜택을 받았습니다. 그것은 즉시 인생을 바꾸는 것이 아니기 때문에 성공 사례 자체를 인용하는 것은 어렵습니다. 일반적으로 훨씬 더 나은 전체를 만들기 위해 함께 모이는 많은 부분 중 하나 일뿐입니다. 스티어링 휠 자체는 그다지 심오하지는 않지만 자동차의 중요한 부분입니다. Bem Naming은 전체 프로젝트를 훨씬 더 좋게 만드는 한 가지입니다.

“아마도 내가 성공한 이야기에 가장 가까운 것은 아마도 BEM 이름을 내 고객에게 소개 한 시간입니다. 그는 종종 사용 된 사람들을 인용하면서 오랫동안 BEM 이름 지정을 피했습니다. 나는 그에게 최소한 반나절 동안 프로젝트를 시도하고 그가 생각한 것을 보도록 설득했다. 그는 그것을 좋아했습니다. 몇 시간 만에 그는 여기에 밑줄을 밟고 여기에 더블 하이핀이있었습니다. 사람들이 전구 모멘트를 가지고있는 것을 보는 것은 항상 좋습니다.”

해리는 또한 불확실한 사람들을 위해 다음 질문을했습니다. “BEM에 대해 확신이 없다면이 질문에 대답하십시오. 엄격하고 투명하며 의미있는 사물을 나타내는 방법에 대해 좋아하지 않는 것은 무엇입니까? 솔직히, BEM 명명을 사용하는 데는 단점이 없습니다.”

나는 이것에 대한 마지막 단어를 Hamish Taplin에게 다음과 같이 남겨 드리겠습니다. “그냥 시도해보십시오. BEM은 문제를 해결하는 것에 관한 것이므로 문제가 있는지 확인하십시오. 나는 그것을 시도한 적이없고 그들의 마크 업을“의미 론적”으로 유지하고자하는 사람들의 많은 포럼이나 토론에서 그것이 기각되는 것을 보았습니다. 나는 뛰어들 때까지 동일했고 HTML과 CSS를 작성 해야하는 방법에 대한 전체 전망을 완전히 바꿨습니다. 훌륭한 제품을 만들려면 틀렸을 때 적응하고 인정할 준비가되어 있어야합니다.”

. SMACSS를 사용한 사람들의지도 데모 및 핸드 오버의 용이성 시드니에 기반을 둔 개발자 인 Chris Wright는 SMACSS의 열렬한 팬이며 그의 조언을 제공했습니다. SMACSS에 대한 Chris의 주요 칭찬은 분류 기능을 사용하기 쉽다는 것입니다.“SMACSS가 너무 강력한 이유를 활용하기 시작하면 분류 기능이 다른 인기있는 CSS 방법론에 비해 실제로 읽을 수 있고 가르 칠 수있는 방법론이라는 것을 알았습니다.” “사람들에게 시연하기가 훨씬 쉽기 때문에 계약자로 사용해 왔습니다. 여기에 내 스타일 시트가 있습니다. 앞에있는 레이아웃 앞에있는 클래스, 앞에 M-가있는 것들이 모듈, 모듈입니다. 등. 여전히 핸드 오버와 설명을해야하지만 설명하고 문서화해야 할 금액이 줄어들어 작업 이외의 시간이 더 많이 절약되었습니다. 작년 현재 모든 프로젝트에서 사용할 수있는 모든 프로젝트에서 사용하기 시작했습니다.”

. CSS 방법론에 신입생에게 적합합니다 Chris는 특히 다른 사람들이 초기 버전의 BEM 및 OOCS와 함께 일하게하는 데 어려움을 겪었지만 SMACSS는 설명하기가 더 쉬웠습니다. “이전에 CSS 방법론에 직면하지 않은 개발자에게 설명하는 것이 훨씬 쉽다는 것을 알았습니다. 그 방법론의 가치와 사용 방법.

. “나는 BEM과 함께 한동안 노력했지만 항상 사람들이 혼란 스러울 것임을 알았습니다. OOCSS와 함께 나는 사람들의 이름 지정 규칙이 종종 모든 곳에 있었지만 일반적으로 그것을 얻었습니다. SMACSS는 분류를 제공하여 수업의 목적이 무엇인지 곧바로 볼 수 있도록 도와줍니다.”. 읽기의 용이성

Chris는 또한 초기 버전의 BEM이 약간 장점이라는 것을 알았지 만 시간이 지남에 따라 발전하는 것을 보았습니다. 그는 여기에서 smacss를 선호합니다. “또한 독서 관점에서 볼 때, BEM의 모든 밑줄과 대시 및 미친 긴 수업은 저를 멀리하는 경향이있었습니다. 저는 Harry Roberts가 꽤 큰 개선으로 한 것과 같은 더 많은 적응 된 버전을 보았습니다. 방법론에 대해서도 여전히 나에게는 느낌이 들지 않습니다.

모든 프로젝트에 대한 확장 가능 Chris는 또한 SMACSS가 작은 사이트와 비교하여 큰 사이트에서 같은 방식으로 동일한 방식으로 완전히 추적 할 필요는 없으므로 모든 프로젝트에서 유연성과 적용 가능성을 허용합니다. “다양한 형태의 SMACSS가 모든 프로젝트에 적합 할 수 있다고 말하는 것이 안전하다고 생각합니다. Snook이 그의 책에서 말하면서-작은 프로젝트에서 당신은 아마도 테마와 같은 것들을 카테고리 (t-)로 사용하지 않을 것이지만, 모듈 클래스와 모듈 클래스와 레이아웃 클래스를 차별화 할 수있는 것은 매우 가치가 있습니다. > 당신은 smacss와 bem

를 사용할 수 있습니다 Hamish Taplin은 실제로 BEM 내에서 일부 SMACSS 개념을 사용하여 하이브리드 접근 방식을 취합니다. 나는 꽤 많은 개발자들이 둘 사이에 달콤한 지점을 발견했다는 것을 알았으므로 다른 하나를 선택하는 것은 문제가되지 않을 수 있습니다.“일부 SMACSS 개념을 사용하고 상호 배타적 인 것으로 보지 않습니다. SASS를“기본”,“레이아웃”및“모듈”으로 구성하여 광범위하게 SMACSS 컨벤션입니다. 또한 JavaScript에서 'State'기반 클래스를 사용하는 열렬한 팬입니다. 예를 들어, 보이거나 숨겨 질 수있는 모듈에는 JavaScript에 의해 제어되는 IS- 가시 정보 또는 숨겨진 클래스가있을 수 있습니다. 이것이 BEM 스타일 수정자를 사용하지 않고 JavaScript로 제어되는 것을 구별하는 데 도움이됩니다. 그래도 반대하지 않을 것입니다.”

Bob Donderwinkel은 대부분의 상황에서 BEM과 SMACSS의 혼합이 가능하다는 데 동의했습니다. “SMACSS의 모듈과 상태 규칙을 고려하면 BEM과 약간의 중복이 있지만 하나를 사용하는 것은 다른 하나를 배제하지는 않습니다. 그러나 이것들 외에, 당신은 필요에 따라 둘 다 혼합하고 일치시킬 수 있습니다.”

Harry Roberts는 모든 곳에서 최고의 비트를 선택할 것을 권장하고 BEM, SMACSS 및 OOCSS와 함께“ITCSS”라고 부르는 자신의 방법론을 사용합니다. “저는 실제로 UOCSS, BEM 및 SMACSS의 Smatterings와 함께 ITCSS 방법론을 실제로 사용합니다. 한 가지 방법론을 맹목적으로 따르지 않고 사방에서 비트를 선택하는 것이 매우 중요합니다. 나는 항상 BEM Naming을 사용하며 여러 코드베이스에서 공유가 필요한 완전히 캡슐화 된 구성 요소가 필요한 프로젝트에서 BEM 방법론을 사용합니다. 나는 OOCSS를 사용하여 이러한 구성 요소를 작성한 다음이 구성 요소를 ITCSS 아키텍처로 포장 할 것입니다.

. “BEM과 SMACSS로 시작하고 멈추지 않습니다. ITCSS는 전체 프로젝트를 포함하도록 설계되었습니다. OOCSS는 모든 호환되는 훌륭한 방법론입니다. 탄탄한 원칙은 더 나은 품질의 CSS를 작성하는 데 사용될 수 있습니다.”

ITCSS에 대해 조금 더 알고 싶어한다면 Harry는 볼 수있는 비디오를 가지고 있습니다. 견고한 CSS 원칙에 대한 자세한 내용을 보려면 Harry는 다음 두 기사를 제공했습니다.

단일 책임 원칙은 css 에 적용됩니다 css 에 적용되는 오픈/폐쇄 원리

그렇게하지 않은 경우 SMACSS 가이드 를 읽으십시오 Harry Roberts는 SMACSS 가이드를 읽는 것이 좋습니다 “그냥 읽으십시오. SMACSS는 지난 몇 년 동안 나온 최고의 프론트 엔드 독서 중 하나이며, 앞으로의 논리에 동의하지 않는 것은 매우 어렵습니다.”. BEM과 SMACSS에 대한 공포 이야기 나는 개발자들로부터 공포 이야기와 경고의 말을 얻으려고 노력했습니다. 학습 과정에있는 동안 그들의 실수로부터 배울 수있는 교훈. 그들의 생각은 다음과 같습니다. alec raeside on bem

“그것은 학습 곡선이며, 개념적으로 이해하기가 어렵지는 않지만 정상적인 CSS/SASS를 작성하는 습관을 바꾸는 데 시간이 걸립니다. 순전히 구성 요소 기반 방식으로 생각하지 않는 것은 매우 쉽습니다. 나는 일년 내내 BEM을 쓰고 있었지만 여전히 내가 쓰는 방식을 배우고 업그레이드하는 것처럼 느낍니다. 때로는 BEM이 아닌 CSS에 비해 BEM으로 조금 더 CSS를 써야하는데 성가신 일을 달성하는 것이 가장 좋습니다.

. “BEM 자체는 UI를 가능한 가장 좋은 방법으로 구축하기에 충분하지 않습니다. BEM, 모바일 첫 CSS, SASS의 적절한 사용 및 엄격한 코딩 표준을 결합합니다. 우리는 완벽하지는 않지만 좋아지고 있습니다. 우리는 또한 최근 SCSS-Lint를 사용하여 코딩 표준을 시행하고 BEM 사용량을 줄였습니다. Smacss의 Chris Wright “대부분의 공포 이야기는 실제로 공포 이야기가 아니라 고통의 장소입니다. 나는 더 많은 OOCS 접근 방식을 계속하고 싶어하는 실제로 부트 스트랩 프레임 워크 인 대행사를 만나고 있습니다. 프레임 워크를 사용하지 않는 프로젝트에 대한 방법론을 조정하는 것은 상당히 무의미한 주장입니다. 그래서 나는 그런 경우에 그것을 남겨 두어야했다. SMACSS의 가장 큰 약점은 실제로 BEM이나 OOCS보다 널리 채택된다는 것입니다. “그것을 구현하는 내 자신의 개인적인 이야기는 실제로 방법론의 요점을 준수하지 않았습니다. “모든 것들을 모듈로 모듈”의 함정에 빠지기가 매우 쉽고 제안 된 범주가 정확히 그 제안이라는 것을 잊어 버립니다. 가장 어려운 부분은 각 카테고리에서 자격이 무엇인지 이해하는 것입니다. 전 세계적으로 사용되는 기본 버튼은 .m-btn-primary라는 모듈입니까? 아니면 모듈에 사는 것이 있습니까? 방법론을 처음 사용하기 시작할 때와 레이아웃, 모듈 및 테마와 같은 것을 명확하게 정의하는 SMACS의 경우 혼란 스러울 수 있습니다. 나는 무언가를 멈추고 무언가가 속한 곳을 생각해야했던 몇 가지 상황에 빠졌지 만, 그것은 나에게도 긍정적이었고, 요점은 사람들이 쉽게 읽고 이해할 수있는 더 조직화 된 수업을 원한다는 것입니다.”

. Josh Hunt on bem “처음으로 BEM을 사용하는 것은 종종 악몽이 아닌 것보다 더 자주 아닙니다. 처음으로 나는 .classes__about__five__levels__deep을 만들었습니다. BEM은 DOM 구조를 클래스 이름으로 일대일 매핑하는 것이되어서는 안됩니다.“BEM을 적용하기 어려운 것은 .wrapper 또는 .inner와 같은 스타일링을 위해 순수한 요소가 필요할 때입니다. .Article__inner (내부는 기사의 요소가 아님)를 갖는 것이 실제로 옳지 않습니다. 때때로 당신은 당신이 선택한 단어 (div.article__media img.article__img)로 창의력을 발휘할 수 있지만 다른 경우에는 Bem을 "파괴"하고 .article-wrapper 또는 .article-inner. BEM

의 Hamish Taplin “BEM의 가장 큰 도전은 추상화에 내재되어 있다고 생각합니다. 때때로 머리를 잡기가 어려울 수 있습니다. 추상화 할 수있는 패턴을 발견하려면 어느 정도의 계획이 필요하며 때로는 처음으로 물건을 발견하지 못할 때 리팩터를 리팩터링해야합니다. 이것은 개발에서 일반적이며 계획과 경험은 많은 도움이 될 수 있습니다.

"또 다른 고집 지점은 마크 업을 완전히 제어해야한다는 것입니다. 항상 불가능한 환경 (예 : .NET)에서 일하는 경우 어려울 수 있습니다." 해리 로버츠에 Bem “BEM Naming은 GoodIdea ™이기 때문에 공포 이야기를 듣는 것은 매우 드 rare니다. 내가 생각할 수있는 가장 가까운 것은 연초에 정말 위대한 고객과 함께 일어났습니다. 그들은 더 나은 CSS 건축에 대한 많은 연구를하고 독서를 한 정말 부지런한 팀이었으며, 일주일의 훈련을 위해 거친 지점을 시도하고 다림질하기 위해 저를 데려갔습니다. 가장 거친 지점 중 하나는 BEM Naming을 구현하는 것이 었습니다. 불행히도, 그들은 BEM 명명에 대한 정말로 나쁜 조언을 주었던 기사 (영구적이지 않기 때문에 여기에 연결되지 않을 것입니다)를 읽었습니다. 근본적으로 잘못된 정보. 고객은이 조언을 편지에 따랐으며 실제로 몇 가지 문제를 일으켰습니다. Bem Naming이 해결해야 할 일은 그 어느 때보 다 더 엉키고 상호 연결되었습니다! 그러나 그것이 내가 알고있는 유일한 사건입니다.”

BEM의 BOB DONDERWINKEL “글쎄, 나는 그것을 공포 이야기라고 부르지 않을 것입니다.) 그러나 나는 Kabem이라는 약간의 BEM 스캐 폴딩 도구를 만들었습니다. 내가 저지른 실수는 BEM CSS 클래스 이름을 여러 요소 (예 : Block__Element__ Element)로 사용하는 것이 었습니다. 주로 CSS 클래스 이름을 기반으로 멋지게 중첩 된 폴더 구조를 생성하는 데 도움이 되었기 때문입니다. 본질적으로 나는 CSS 클래스 이름으로 HTML 구조를 캡처하고 있었지만 실제로는 BEM이 조금 더 단단해져 필요하지 않습니다.

. “또 다른 작은 Gotcha는 SASS로 할 수있는 것처럼 BEM CSS 셀렉터 중첩이 실제로 필요하지 않은 경우 CSS 특이성을 추가한다는 것입니다. BEM은 단일 클래스 이름으로 가장 잘 작동하므로 명심해야 할 것입니다.”

결론 모든 사람의 반응과 아이디어를 겪은 후, 가장 좋은 접근 방식은 하이브리드 인 것 같습니다. 모든 것에 대해 읽고, BEM과 SMACSS를 열린 마음으로 제공하고 CSS와 워크 플로우가 개선되는지 확인하십시오. 하나의 방법론을 선택할 필요는 없습니다. 몇 가지 방법론의 개념을 귀하와 귀하의 팀에 적합한 개념으로 결합하십시오. 도움이 필요하면 몇 가지 생각과 조언을 기꺼이 공유 할 개발자가 많이 있습니다.

크레딧 내 질문에 대답하고 생각과 경험을 공유 할 시간을 포기할만큼 친절한 다음 개발자들에게 매우 큰 감사를드립니다.

Alec Raeside - 웹 사이트, Twitter

Bob Donderwinkel - 웹 사이트, Twitter

Chris Wright - 웹 사이트, 트위터 Hamish Taplin - 웹 사이트, 트위터 Harry Roberts - 웹 사이트, 트위터 Josh Hunt - 웹 사이트, 트위터 BEM 및 SMACSS
• 에 대한 질문이 자주 묻습니다 BEM과 SMACSS의 주요 차이점은 무엇입니까?
BEM (블록, 요소, 수정 자) 및 SMACSS (CSS를위한 확장 가능 및 모듈 형 아키텍처)는 CSS를 구성하는 방법론입니다. BEM은 CSS를 쉽게 읽고 이해할 수있는 이름 지정 컨벤션이며 SMACSS는 CSS 조직에 규칙을 제공하는 스타일 가이드입니다. BEM은 사이트의 시각적 표현에 중점을두고 SMACSS는 구조와 레이아웃에 중점을 둡니다. BEM은 클래스에 특정 명명 컨벤션을 사용하는 반면 SMACSS는 스타일을 기본, 레이아웃, 모듈, 상태 및 테마의 5 가지 유형으로 분류합니다.
BEM은 CSS 확장 성을 어떻게 향상 시키는가?
BEM은 CSS를 향상시킵니다. CS에 명확하고 이해할 수있는 구조를 제공하여 확장 성. 특정 명명 규칙을 사용하여 다른 요소와 부모 블록 간의 관계를 쉽게 식별 할 수 있습니다. 이로 인해 큰 CSS 코드베이스를 쉽게 관리하고 확장 할 수 있습니다. 이는 충돌의 명명 가능성을 줄이고 코드를 읽고 이해하기 쉽게 만들 수 있습니다.
• SMACSS를 사용하는 장점은 무엇입니까?
• >. SMACSS는 CSS 구성을위한 일련의 지침을 제공하여 코드가보다 효율적이고 유지 관리하기 쉽게 만들 수 있습니다. 그것은 당신의 스타일을 분류하여 CSS를보다 모듈화하고 재사용 할 수있게 할 수 있습니다. SMACSS는 또한 CSS에서 동적 스타일을보다 쉽게 ​​관리 할 수있는 상태 규칙의 사용을 촉진합니다.
BEM과 SMACSS를 함께 사용할 수 있습니까?

예, BEM과 SMACS를 사용할 수 있습니다. 함께. BEM은 SMACSS 프레임 워크 내에서 명명 컨벤션으로 사용될 수 있습니다. 이것은 BEM이 CSS를 읽고 이해하기 쉽게 만들고 SMACS는 CSS를 구성하는 체계적인 접근 방식을 제공함으로써 두 방법론의 이점을 제공 할 수 있습니다. BEM은 CSS 특이성을 어떻게 처리합니까?

BEM은 스타일링을위한 ID 대신 클래스 사용을 장려함으로써 CSS 특이성을 처리합니다. 이렇게하면 선택기의 특이성이 줄어들어 CSS를보다 쉽게 ​​관리하고 재정의 할 수 있습니다. BEM은 또한 중첩 셀렉터의 사용을 권장하지 않습니다. 이는 특이성을 높이고 CSS를 유지하기가 더 어려워 질 수있는 중첩 셀렉터의 사용을 권장하지 않습니다.

SMACSS는 CSS 특이성을 어떻게 처리합니까?

SMACSS는 방법에 대한 지침을 제공하여 CSS 특이성을 처리합니다. CSS를 구조화하십시오. ID에 대한 클래스 사용을 장려하고 중첩 선택기의 사용을 권장하지 않습니다. 이것은 특이성을 낮게 유지하여 CSS를 더 쉽게 관리하고 재정의 할 수 있도록 도와줍니다.

BEM 구현의 과제는 무엇입니까?

BEM 구현의 주요 과제 중 하나는 그것이 이어질 수 있다는 것입니다. 길고 복잡한 클래스 이름. 이로 인해 HTML 및 CSS를 읽고 이해하기가 더 어려워 질 수 있습니다. 그러나 이것은 SASS 이하의 사전 처리기를 사용하여 완화 할 수 있습니다. 이는 BEM 클래스를 관리하고 단순화하는 데 도움이 될 수 있습니다.

SMACSS를 구현하는 데있어 어떤 과제는 무엇입니까?

메인 중 하나입니다. SMACS를 구현 해야하는 과제는 CSS와 모범 사례를 잘 이해해야한다는 것입니다. 또한 CSS를 작성하고 조직하는 데 징계 된 접근 방식이 필요합니다. 그러나 일단 당신이 그것을 매달린 후에는 SMACSS는 CSS를보다 효율적이고 유지 관리하기 쉽게 만들 수 있습니다.

BEM은 구성 요소 기반 설계를 어떻게 처리합니까?

BEM은 구성 요소에 적합합니다. -기반 설계는 개별 구성 요소로 생각할 수있는 블록의 사용을 장려하므로. 각 블록은 독립적이며 사이트 전체에서 재사용 할 수 있습니다. 이로 인해 BEM은 구성 요소 기반 설계 접근법을 사용하는 사이트에 적합한 선택이됩니다.

SMACSS는 구성 요소 기반 설계를 어떻게 처리합니까?

SMACSS는 모듈 개념을 통해 구성 요소 기반 설계를 처리합니다. 모듈은 사이트 전체에서 재사용 할 수있는 독립형 구성 요소입니다. 이로 인해 SMACSS는 구성 요소 기반 설계 접근법을 사용하는 사이트에 적합한 선택입니다.

위 내용은 BEM 및 SMACSS : 그곳에 있었던 개발자의 조언의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!