외국 몇개 기업의 CSS

Posted by in Research

조은입니다.
요전번에 Github’s CSS라는 아티클에 삘받았는지, Lonely Planet, CodePen, Groupon 같은 많은 외국 기업에서 CSS Coding Style을 릴레이로 공개했는데요.
해당 내용 간단히 공유드립니다.

– 바쁘신 분들을 위한 세줄요약

  • SASS를 (직접 공개한 사람들 기준으로는) 전 기업에서 활용하고 있습니다.
  • 모듈단위로 CSS파일을 쪼개는 게 대세인 거 같습니다.
  • Lonely Planet에서 OOCSS, Groupon에서는 SMACSS를 채택했다고 하니 그 부분도 중요해보입니다.

Lonely Planet의 CSS

간략한 요약

  • 우리는 SASS를 사용합니다.
  • 우리는 150개 이상의 파일을 가지고 있다.
  • 컴파일된 CSS는 앱에서 강한 캐싱을 허용하는 두개의 스타일 시트로 분할됩니다.
  • 페이지당 평균 CSS 파일 크기는 35kb 정도입니다. (gizp으로 압축)
  • Rem과 Pixel을 주로 사용하고, em을 종종 볼 수 있습니다.

재미있는 것들

  • BEM이라는 것을 사용한다고 합니다.
  • OOCSS 사용
  • CSS 프레임워크 사용하지 않음
  • CSS Lint 하지 않음.

CodePen의 CSS

간략한 요약

  • 우리는 SCSS를 사용합니다.
  • Auto Prefixer를 사용합니다.
  • Rails Asset Pipeline을 사용합니다.
  • 스타일을 가지고 있으나, 일관하여 멋지게 보이는건 아님.
  • “클래스를 묶음으로 사용하라”를 제외하곤 어떤 아키텍쳐도 사용하지 않음.
  • 페이지당 2~3개의 CSS 파일 유지.
  • @mixin을 미디어 쿼리에 사용
  • 주석을 남기는 걸 긍정적이게 바라봄.

통계

  • 160개의 .scss 파일이 있다.
  • 13,345라인의 SCSS 코드가 있다.
  • global.css는 11.8kb
  • page.css는 5.5kb
  • editor.css는 6.2kb

Groupon의 CSS

간략한 요약

  • SMACSS를 채택했습니다.
  • Bootstrap을 개조한 Toolstrap을 사용합니다
  • SASS를 사용합니다.
  • icon font를 사용합니다.

개인적으로 인상 깊었던 사이트도 공유드립니다. http://cssguidelin.es/

CSS 스타일 가이드라인 사이트인데 사이트가 상당히 이쁘네요.
감사합니다.