BEM 및 SMACSS : 그곳에 있었던 개발자의 조언
- Jennifer Aniston원래의
- 2025-02-25 19:32:10534검색
이 과정을보십시오
이 과정을보십시오
블록 요소 수정 자
를 나타냅니다. yandex에서 시작되었습니다. CSS 클래스를 독립 모듈로 정렬하는 다소 엄격한 방법을 제공합니다. 아이디어에는 몇 가지 변형이 있지만 가장 일반적인 것은 다음과 같이 보입니다.- .
상태는 각 요소의 변형에 사용됩니다 (예 : 활성, 비활성, 확장, 숨겨진). 이들은 IS-와 접두사입니다. IS- 활성, IS- 비활성, IS-PPENDED, IS-HIDDEN 또는 : 호버 및 : 초점 또는 미디어 쿼리와 같은 의사 클래스를 통해 IS-HIDDEN. 테마는 상태와 비슷하지만 모듈과 레이아웃이 어떻게 보이는지 정의합니다. 전체적으로 다른 모습을 공유하는 더 큰 사이트에 더 적용 할 수 있습니다. 페이지 당 또는 섹션 기준으로 테마 변형을 추가합니다.
를 사용한 사람들의 지침
크고 작은 모든 프로젝트에 적용 가능합니다
영국 카디프의 프론트 엔드 개발자 인 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 개념을 사용하여 하이브리드 접근 방식을 취합니다. 나는 꽤 많은 개발자들이 둘 사이에 달콤한 지점을 발견했다는 것을 알았으므로 다른 하나를 선택하는 것은 문제가되지 않을 수 있습니다.
예, 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의 큰 강점 중 하나는 더 깨끗하고 모듈 식 프로젝트를 개발하고 구현하는 능력입니다. 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 개념을 사용하여 하이브리드 접근 방식을 취합니다. 나는 꽤 많은 개발자들이 둘 사이에 달콤한 지점을 발견했다는 것을 알았으므로 다른 하나를 선택하는 것은 문제가되지 않을 수 있습니다.
예, 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는 구성 요소 기반 설계 접근법을 사용하는 사이트에 적합한 선택입니다.
- 을 타겟팅하면 해당 코드가 작성 될 때 작동 할 수 있지만 다른 구성 요소가 .Container 구성 요소에 중첩되면 UL 스타일이 적절하지 않을 수 있습니다. 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 개념을 사용하여 하이브리드 접근 방식을 취합니다. 나는 꽤 많은 개발자들이 둘 사이에 달콤한 지점을 발견했다는 것을 알았으므로 다른 하나를 선택하는 것은 문제가되지 않을 수 있습니다.
- Harry Roberts (@CSSwizardry) 12 월 2014 년 2 월 Josh는 다음과 같이 설명합니다.“BEM은 프로젝트의 목표가되어서는 안됩니다. 개발 중이며 유용한 곳을 적용 할 때 염두에 두어야합니다. 이론적 인 '표준'을 고수하려고 노력하지 마십시오. 헬퍼 클래스 (.pull-right 또는 .text-center와 같은)는 BEM과 공존하기에 완전히 시원합니다. 당신이 가질 수있는 곳, 아마도 (아마도 더 좋을 것입니다).
하미 쉬는 바로 BEM으로 도약하지 않았다. 약간의 시간, 영향력있는 프레젠테이션, 그리고 변화하는 직업을 변화시키는 데 시간이 걸렸고 BEM이 수업을 다시 생각할 수 있도록했습니다. 그러나 그는 기뻐합니다.
“나는 BEM이 몇 번 언급되었고 그것이 흥미로워 보이지만 여전히 계속 진행하고 있다고 생각했지만, 내가 쓰고있는 마크 업과 수업의 양을 최소화하려고 시도하고, sass @extend를 사용하여 문제를 일으키는 문제를 해결합니다. . 어느 날 나는 Harry Roberts의 비디오“Breaking Good Habits”를 보았고 날아갔습니다. 이 사람은 자리를 잡았습니다 - 우리는 실제로이 작업을 수행함으로써 실제로 어떤 문제를 해결하고 있었습니까?”
.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!