조은입니다.
요전번에 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 스타일 가이드라인 사이트인데 사이트가 상당히 이쁘네요.
감사합니다.