bem과 oocss를 혼합 사용한 airbnb의 css

아는 개발자 지인한테 들었던 airbnb css....

BEM방법론은 알고 있어서 오호라~ 해가지고 요번에 만드는 포폴에 적용하려고 기획, 디자인까지 완성 해놓고 bem에 대해서 열심히 서치하고 있던 와중에 OOCSS이라는 방법론을 발견했다. 

OOCSS !? 는 또 무엇이란 말인가..

airbnb 에서는 BEM 과 OOCSS를 적절히 섞어 사용하여 각자의 단점을 최소화했다고 한다. 

개인 깃허브에 fork를 해서 쭉읽어봤는데 역시 한글로 된게 편하다...ㅋㅋㅋㅋㅋㅋㅋ

구글링 해서 보니 BEM에 이어서 OOCSS에 대해 자세하게 한글로 친절히 풀어놓은 블로그가 있었다. 

https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-2-oocss-object-oriented-css-4064e1119354

바로 요기...

잠깐 살펴보니 OOCSS는 예를 들어 버튼이 있으면 노란버튼 파란버튼에 똑같은 버튼 클래스를 적용하고 다른것만 각각 또 클래스를 만들어 스타일을 주는 뭐 대충 이런 식의 방법론 같다. 

bem은 앞서 포스팅에서 말한 것처럼 마치 html5의 시멘틱 요소와 같이, 의미를 부여하고, 직속관계를 뚜렷하게 클래스에 적용하여 유지보수에 쉽게 해놓은 것이다. 

이 두 방법론은 sass를 만나야 의미가 생겨지는 것 같은 개인적인 생각이 들었다. 

그러므로 sass를 배워야한다는것! 예전에 봤을때 변수를 사용하여 그 변수하나만 변경하면 html 스타일이 확 달라지던데 오오오 이래놓고 그냥 넘어갔었다.ㅎㅎㅎㅎ

더 자세히 읽어보고 새롭게 만드는 내 2018년 포폴에 적용해봐야겠다.

하지만 쉽지만은 않을꺼 같아서 살짝 걱정이 된다ㅎㅎㅎㅎㅎㅎ 홧팅 !!!