CSS 성능을 높일 수 있는 CSS BEM 방법론

 

하단의 참고 사이트를 읽고 이해한 것을 정리 하였으며, 천천히 차근 차근히 정독 하셔야 이해가 될 것이라 예상 됩니다, 

그리고 혹시 잘못 이해한 것이 있으면 댓글로 알려주시면 정말 감사 하겠습니다.

 

bem 스타일에 대해서 소개하기 앞서

오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다.

각 프레임에는 16ms 가량의 시간만 할당 되는데(1초/60 = 16.66ms) 실제로 브라우저는 실행준비를 해야하므로 10ms 내에 모든 작업을 완료해야 합니다. 

제한 시간을 충족 하지 못하면 버벅거림 현상이 발생하며 사용자에게 거부감을 줍니다.

 

완전 간단하게 이야기를 하자면 브라우저가 렌더링을 하는데 여러가지의 과정들을 거쳐서 렌더링이 되는데 그 과정중에서 스타일을 재계산 하고 페이지 또는 페이지 일부를 리플로우 하게 만드는 과정중에 브라우저는 selector들의 모든 스타일 규칙을 가져와서 마지막 스타일을 계산을 합니다.

 

BEM 스타일 CSS 는

slector의 복잡성을 줄이고 스타일을 계산해야하는 요소 수를 줄일 수 있는 방법 중에 

하나 입니다. (다른방법들은 모가있는지 좀 더 공부 해보겠습니다.--;;)

 

bem 스타일의 큰 장점은 클래스명의 고유화로 인하여 상속 단계를 줄일 수 있는것 입니다

그리고  css 및 UI 가 구조화 된 장점을 누릴 수 있습니다..

 

bem의 

b는 Block, 

e는 Element, 

m은 Modifier 를 의미 하는데 이것이 무엇 이냐면  css 로 클래스명을 만들때 Block, Element, Modifier 이렇게 3가지로 분류 하여 클래스명을 만드는 것 입니다.

그러면 무엇이 Block 에 해당 되고, Element 에 해당되고, Modifier 에 해당이 되는지에 설명하겠습니다. 

 

Block은 웹 페이지의 구성요소에서 독립 해서  사용 할 수 있는 웹 페이지의 큰 일부 입니다.

 

그리고 Block 안에서 특정 기능을 담당하는 Block의 일부가 Element 이고,  Element 상황에 따라서 다를 수 있지만 자신이 속한 Block 의 맥락에서만 의미가 있습니다.

클래스명을 작명 할 때 에는 Block__Element로 작명 합니다.

 

Block 및 Block 요소(Element)의 모양, 상태 및 동작을 설정 하는 것이 Modifier 입니다.

클래스명을 작명 할 때 에는 Block__Element--Modifier 로 작명합니다.

 

 

아주 간단한 예제를 보겠습니다.

https://news.rambler.ru/community/  의 팝업 소스를 보겠습니다.

 

위의 이미지의 html 을 보시면 알겠지만 구조화된 클래스명 덕분의 한번에 컨텐츠를 파악 할 수 있을 것입니다.

그러면 소스를 다시 살펴보겠습니다.

 

위의 이미지를 보시면 

노란 박스는 Block, 

녹색 박스는 __Element, 

빨간박스와 보라색 박스는 --Modifier 를 나타 내는데 보라색 박스의 .popup_button--yes 의  클래스명을 갖고 잇는 버튼의 스타일은 파란 배경 의 스타일을 갖고 있고, 빨간 박스의 .popup_button--no의 클래스명을  갖고 있는 버튼에다가는 회색 보더의 스타일 있습니다.

 

bem 스타일을 학습하지 않은 내가 코딩을 했다면 파랑색 버튼의 클래스명을 .btn_blue 이런식으로 작명을 했을 것입니다.

하지만 .btn_blue 의 버튼의 색이 빨강으로 바뀔 수가 있습니다. 그렇게 때문에 스타일을 기준으로 하는 작명법은 좋지 않다고 이야기 하고 있습니다.

 

 

bem 방법론에 대해서는 css의 일부분만 포스팅 하였는데, 좀 더 많이 사용해 보고 css 작명법의 주의사항 등과 javascript 부분은 좀 더 공부를 하여 포스팅을 하도록 하겠습니다.

 

 

 

 

<참고사이트>

https://en.bem.info/methodology/quick-start/#mix,

https://www.smashingmagazine.com/2014/07/bem-methodology-for-small-projects/,

https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations?hl=ko