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, 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.

Company Preprocessor Prefixing # Source Files # Selectors Style enforcement Notes Company:

Github



Preprocessor:

SCSS



Prefixing:

Custom @mixins



# Source files:

100+



# Selectors:

7,000



Style enforcement:

SCSS-lint, styleguide



Notes:

2 final stylesheets, because of IE selector limit



Company:

Buffer



Preprocessor:

LESS



Prefixing:

Autoprefixer



# Source files:

93



# Selectors:

5328



Style enforcement:

LESS lint



Notes:

2 final stylesheets



Company:

CodePen



Preprocessor:

SCSS



Prefixing:

Autoprefixer



# Source files:

171



# Selectors:

1186



Style enforcement:

.editorconfig



Notes:

Asset pipeline



Company:

Ghost



Preprocessor:

SCSS (libsass)



Prefixing:

Autoprefixer



# Source files:

36



# Selectors:

1609



Style enforcement:

General guidelines



Notes:

Open source



Company:

Groupon



Preprocessor:

Sass (syntax unclear)



Prefixing:

Compass



# Source files:

?



# Selectors:

?



Style enforcement:

SMACSS



Notes:

Toolstrap



Company:

Lonely Planet



Preprocessor:

Sass



Prefixing:

Autoprefixer



# Source files:

150+



# Selectors:

1527



Style enforcement:

Rizzo, no linting



Notes:

BEM / OOCSS, Normalize.css, SVG icons



Company:

Medium



Preprocessor:

LESS



Prefixing:

Custom @mixins



# Source files:

50-100



# Selectors:

?



Style enforcement:

Guidelines



Notes:

No nesting, custom methodology for naming



Company:

Trello



Preprocessor:

LESS



Prefixing:

Custom @mixins



# Source files:

44



# Selectors:

2,426



Style enforcement:

Preprocessor



Notes:

1 final stylesheet, namespacing





Another really common theme: .js- class prefixes for not mixing JavaScript hooks and styling hooks.

Also I tried to make that table responsive…

I wanted it to:

Be a normal-looking table when there is room.

Collapse down to blocks on small screens.

Still work with no CSS whatsoever (emails, rss)

Here’s the results:

The root of the concept was the start with “normal” HTML elements (section, div, p, span) and force them to be a table. I named things a bit differently, but you could just use helper classes:

.table { display: table } .tr { display: table-row } .thead { display: table-header-group } .tbody { display: table-row-group } .tfoot { display: table-footer-group } .col { display: table-column } .colgroup { display: table-column-group } .td, .th { display: table-cell } .caption { display: table-caption }

Then at a certain media query, you force them back to their normal state:

@media (max-width: 700px) { .table { display: block } .tr { display: block } .thead { display: block } .tbody { display: block } .tfoot { display: block } .col { display: none } .colgroup { display: none } .td, .th { display: inline-block } .caption { display: block } }

But all that gets you is really weird looking sentences, so I mixed in a bunch of <br> tags to space things out as needed, that are hidden with CSS. I also used a <span> to title each cell, also hidden with CSS, so that if there is no CSS, you see that title for each bit of data.

It’s redundant and messy. Made worse by needing to put it into WordPress, where the auto-p behavior adds extra paragraphs you have to be careful about. I just did the whole thing in a Pen, then compressed the HTML here.