{"id":192815,"date":"2015-01-15T12:55:36","date_gmt":"2015-01-15T19:55:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=192815"},"modified":"2015-01-16T13:31:08","modified_gmt":"2015-01-16T20:31:08","slug":"css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css\/","title":{"rendered":"The CSS at…"},"content":{"rendered":"

There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off<\/a>, best I can tell. I mostly just wanted to post a list of them here, since that’s perfect fodder for CSS-Tricks. I ended up slapping it into a table with a few bits of data that are easy to compare, just for fun.<\/p>\n

<\/p>\n

\n
\n

Company<\/span> Preprocessor<\/span> Prefixing<\/span> # Source Files<\/span> # Selectors<\/span> Style enforcement<\/span> Notes<\/span><\/p>\n<\/header>\n

\n

Company:
<\/span> Github<\/a> <\/span>

Preprocessor:
<\/span> SCSS <\/span>

Prefixing:
<\/span> Custom @mixins <\/span>

# Source files:
<\/span> 100+ <\/span>

# Selectors:
<\/span> 7,000 <\/span>

Style enforcement:
<\/span> SCSS-lint, styleguide<\/a> <\/span>

Notes:
<\/span> 2 final stylesheets, because of IE selector limit <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Buffer<\/a> <\/span>

Preprocessor:
<\/span> LESS <\/span>

Prefixing:
<\/span> Autoprefixer <\/span>

# Source files:
<\/span> 93 <\/span>

# Selectors:
<\/span> 5328 <\/span>

Style enforcement:
<\/span> LESS lint <\/span>

Notes:
<\/span> 2 final stylesheets <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> CodePen<\/a> <\/span>

Preprocessor:
<\/span> SCSS <\/span>

Prefixing:
<\/span> Autoprefixer <\/span>

# Source files:
<\/span> 171 <\/span>

# Selectors:
<\/span> 1186 <\/span>

Style enforcement:
<\/span> .editorconfig <\/span>

Notes:
<\/span> Asset pipeline <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Ghost<\/a> <\/span>

Preprocessor:
<\/span> SCSS (libsass) <\/span>

Prefixing:
<\/span> Autoprefixer <\/span>

# Source files:
<\/span> 36 <\/span>

# Selectors:
<\/span> 1609 <\/span>

Style enforcement:
<\/span> General guidelines<\/a> <\/span>

Notes:
<\/span> Open source<\/a> <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Groupon<\/a> <\/span>

Preprocessor:
<\/span> Sass (syntax unclear) <\/span>

Prefixing:
<\/span> Compass <\/span>

# Source files:
<\/span> ? <\/span>

# Selectors:
<\/span> ? <\/span>

Style enforcement:
<\/span> SMACSS <\/span>

Notes:
<\/span> Toolstrap<\/a> <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Lonely Planet<\/a> <\/span>

Preprocessor:
<\/span> Sass <\/span>

Prefixing:
<\/span> Autoprefixer <\/span>

# Source files:
<\/span> 150+ <\/span>

# Selectors:
<\/span> 1527 <\/span>

Style enforcement:
<\/span> Rizzo<\/a>, no linting <\/span>

Notes:
<\/span> BEM \/ OOCSS, Normalize.css, SVG icons <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Medium<\/a> <\/span>

Preprocessor:
<\/span> LESS <\/span>

Prefixing:
<\/span> Custom @mixins <\/span>

# Source files:
<\/span> 50-100 <\/span>

# Selectors:
<\/span> ? <\/span>

Style enforcement:
<\/span> Guidelines<\/a> <\/span>

Notes:
<\/span> No nesting, custom methodology for naming <\/span>

<\/p>\n

 <\/p>\n

Company:
<\/span> Trello<\/a> <\/span>

Preprocessor:
<\/span> LESS <\/span>

Prefixing:
<\/span> Custom @mixins <\/span>

# Source files:
<\/span> 44 <\/span>

# Selectors:
<\/span> 2,426 <\/span>

Style enforcement:
<\/span> Preprocessor <\/span>

Notes:
<\/span> 1 final stylesheet, namespacing <\/span>

<\/p>\n<\/div>\n<\/section>\n

Another really common theme: .js-<\/code> class prefixes for not mixing JavaScript hooks and styling hooks.<\/p>\n

Also I tried to make that table responsive…<\/h3>\n

I wanted it to:<\/p>\n