The CSS at…

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.