
Yahoo reinvented inline styles through classes - troels
http://imgur.com/a/68Anz
======
ninjaranter
To be more specific, they're using the [https://acss.io](https://acss.io)
framework which they came up with 2015.

~~~
scrollaway
That site is a bit light on the "Why?".

~~~
ninjaranter
Yeah, they showcase how much better it is than using inline styles (which it
is, of course) but I don't see "the headache of managing stylesheets" problem
this supposedly solves. Not sure who the target audience is for this one.

It's funny how they say "The lower specificity of classes also allows for
easier overrides" \-- that's true, but what on earth would I want to override
a class called "P(20px)" to do instead? :)

~~~
lylepstein
Size. Using styles like this lead to a small decrease in page size, which over
time on a very high traffic site leads to a notable bandwidth savings.

... or at least, that was the argument. In practice, most teams didn't adopt
it unless mandated from above; because it sucks to use, has an infinitesimal
decrease in individual page load time, and the bandwidth savings certainly
don't outweigh the lost developer time.

But hey, all you gotta do is convince some VP that your niche approach is the
right one, and you'll get some adoption in a large company like Yahoo.

~~~
troels
Where have you heard that argument? That is absolutely bonkers. Why didn't
they just use css as intended and collect all these inline styles into generic
classes? Or turn on gzip-compression?

~~~
lylepstein
I worked in an org at Yahoo that required all development to use Atomic, and
that was essentially the reasoning as presented. The Atomic authors put a lot
of effort [1] put into proving the size point, enough that it was pretty
difficult to argue with. The stylistic issues were sort of swept aside; less
size == faster page loads == more revenue.

If you believe the size argument, and care more about short term revenue over
developer productivity or happiness, it makes sense, I guess.

[1] [https://acss.io/frequently-asked-questions.html#what-are-
the...](https://acss.io/frequently-asked-questions.html#what-are-the-benefits-
of-atomic-css-)

------
lightblade
We use a combination of Atomics and BEM in our project.

Atomics offers single level specificity thus providing a strategy to combat
the specificity problem that plagues many projects.

They are single purpose and infinitely composable, which complements very well
with component oriented architecture that's popular today.

They are localized to single DOM node. When combined with its single purpose
nature offers fewer surprises when making changes to your style sheet. For
example, when you add a margin 15 Atomics to a DOM node, it is very hard to
accidentally add another margin 15 somewhere else. Versus if you add a label
class, it is much easier to accidentally add another label class and cause
unintended consequences.

~~~
colbyh
this, pretty much. it's as declarative and surprise-free as you can get in CSS
and it works super well when abstracted into components.

I know it isn't the easiest to read and it seems counterintuitive at first,
but in practice you can easily encapsulate long chains of inline classes into
helper classes thus giving most projects a sort of sane middle ground.

------
0xcde4c3db
I don't know if this quite counts as the inner-platform effect [1], but it
seems similar at least.

[1] [http://thedailywtf.com/articles/The_Inner-
Platform_Effect](http://thedailywtf.com/articles/The_Inner-Platform_Effect)

~~~
troels
Yeah, that seems accurate to me.

------
maxxxxx
Stuff like this makes me wonder about the sanity of web development. They
always seem to be looking for ways to abuse features for other purposes.

~~~
valarauca1
Most of it is learned from the environment. A lot of browsers which all
implement standards in their own _fun_ ways across dozens of display types.

All of this is using a system that was effectively designed to share and
display research papers 20 years ago.

Then you add the competition to _up_ everyone else. Sure you don't have to be
the best, but you need to have flare.

------
Keanu1114
The, code is much more readable then the same written with inline styles.

Citing their website:

Most approaches to styling inside components rely on inline styles, which are
limiting. Atomic CSS, like inline styles, offers single-purpose units of
style, but applied via classes. This allows for the use of handy things such
as media queries, contextual styling and pseudo-classes. The lower specificity
of classes also allows for easier overrides. And the short, predictable
classnames are highly reusable and compress well.

------
gazoakley
Well that's one way to avoid using Content-Security-Policy with "unsafe-
inline" (assuming someone cares about CSP?)

------
nates
It's open source: [https://acss.io](https://acss.io)

------
firloop
Tachyons ([http://tachyons.io](http://tachyons.io)) is another CSS framework
that works the same way, more or less.

------
omegote
What a trainwreck.

------
agumonkey
It's so easy to end up doing this u_u;

------
mr_alien
All I can say is tht front-end is going crazy these days. Might give up soon.

~~~
rvanmil
Just the web, don't give up, switch platform ;)

~~~
talmand
Or, I don't know, don't use frameworks one doesn't like?

------
ryanmarsh
Thats what happens when you have a Turing complete styling DSL

