Hacker News new | ask | show | jobs
by akavi 3681 days ago
These are valid issues, but one that has a better, actually scalable solution: CSS preprocessors.

You can name your magic numbers/RGB values. You can move your shared behaviour into mixins. You can stop using float for god's sake - it's 2016, we have flexbox now (OK, so that's not related to preprocessors, but it's still true).

Sure, if it's a quick hack or something you're throwing together for personal reasons, use whatever mixture of inline-styles, "visually semantic" classes, and table layout goes fastest for you. But if the point is "scalability" (In the sense of size of team working together), then this halfway point between semantic classes and inline styles is definitely not the right way to achieve it.

2 comments

If you want a website that works on enterprise desktops, you aren't using flexbox - you're using floats.
Is that still true? I recently joined a company whose primary audience is education, and our numbers say that less than 1% of our customers use browsers that don't support flexbox.

Are public middle schools farther along the tech curve than "enterprise"?

(Legitimately curious. It'd be pretty funny if so.)

The sticking point for enterprise-y things remains IE, since it only supports flexbox (buggily) as of IE11.

Though there's polyfills like flexibility out there, of course.

According to this[0], IE10.

0. http://caniuse.com/#feat=flexbox

Sort of? I mean, note that table skips IE10 entirely.

As I understand it, IE10 implements a different, somewhat incompatible version of the flexbox spec. You can see all the changes they made for 11 here: https://msdn.microsoft.com/library/dn265027(v=vs.85).aspx

Didn't MS announce to only keep supporting the latest IE/Edge version? This should help in that class.
For what it’s worth my project is about 2.5% no flexbox, which is too high to move over really.
Yes, schools use chromebooks
I used css-preprocessors (LESS, SASS and various postcss-configurations), but now I'm glad to not have another layer of imports and logic in CSS. Especially in react-driven pages.

I wonder, though, if there could be some workflow where you write and edit with tachyons, (babel-) analyze the code, find commonly used combination and prompt to name them.

EDIT: I also usually work with only two or three people, I guess it's different if there are 20 working on the css.

But especially in teams: don't you consider it extremely valuable that one can change the style of exactly one part somewhere in the page without affecting anything else?