
Universal.css - jchampem
https://github.com/marmelab/universal.css
======
mrgreenfur
Poes law meets css: "Poe's law is an Internet adage which states that, without
a clear indicator of the author's intent, parodies of extreme views will be
mistaken by some readers or viewers for sincere expressions of the parodied
views.[1][2][3] "
[https://en.wikipedia.org/wiki/Poe%27s_law](https://en.wikipedia.org/wiki/Poe%27s_law)

~~~
eridius
I'd agree, except for the fact that the very end of the FAQ says

> _Is this a joke?_

> _Of course it 's a joke. Use semantic CSS class names._

~~~
fuzzywalrus
Also, the 4.79 MB CSS should be a giveaway...

~~~
ketralnis
It should be. But...
[https://vimeo.com/147806338](https://vimeo.com/147806338)

~~~
eridius
For anyone who doesn't want to watch a video:
[http://idlewords.com/talks/website_obesity.htm](http://idlewords.com/talks/website_obesity.htm)

------
hashkb
This is amazing. I quit a job at a company that did many stupid things, one of
which was insist that their home rolled CSS framework did not suck. Said
framework was, in all seriousness, exactly this but with shortened, cryptic
names. Nightmare.

~~~
dclowd9901
Ideally, in SMACSS, you could classify all components into their composable
parts: a grid width, a title style, a button with a primary style, a button
with a secondary style, standard body text, emphasized body text, etc.

But most of the time, designers don't know how to stick with a standardized
padding and margin, so I find that without exception, an org requires me to
develop "cryptic" representations of margin and padding, such as mr1 (margin
right to 1 degree, or 5 px) or pl2 (padding left to 2 degrees, or 10px).

I've also rolled entirely new features without writing a single line of CSS.
This is a way to mitigate CSS bloat. I take it you've never actually tried to
deal with the problem of CSS bloat, or you'd find either 1) you'd have to hold
a gun to designers' heads or 2) do exactly what I just showed you.

~~~
notJim
This is weird, because designers I've worked with hate CSS bloat even more
than I do, and love things like consistent spacing and typography. The
movement towards styleguides has been one of the biggest things happening in
design in the last year or so, which is exactly what you're talking about with
not writing CSS.

~~~
blwsk
To add to this, the addition of a style guide is helpful on two fronts.

* Components and patterns are standardized, allowing for less process in design reviews and quicker iteration

* Engineers can create component libraries that mirror style guide elements and turn frontend work into something a little closer to 'lego' building

------
roddux
> _Bootstrap V4 recently introduced spacing utility classes like m-t-1 (which
> translates to margin-top: 1rem!important), and we thought we 'd expand this
> idea to more classes._

Which is worse; when it's done as satire, or seriously?

~~~
Frenchgeek
When you do it as satire but everyone use your work seriously?

~~~
gravypod
That's the best way to say "All of the above" in this case.

------
steego
Absolutely brilliant! Because of its _universal_ nature and compositional
design, one only has to download this CSS page once from the primary CDN and
it can be used for everything everywhere. One could even argue this should be
a standard browser component.

------
nachtigall
You'd think this is a joke, but have a look at this comment at
[https://hacks.mozilla.org/2016/05/css-coding-
techniques/comm...](https://hacks.mozilla.org/2016/05/css-coding-
techniques/comment-page-1/#comment-19925)

> Now that we’re writing almost all of our html in modular fashion, I have
> found mix-n-matching pre-defined css classes works the best. i.e.
> class=”inline-block bg-bbb text-333 padding-5-15″

------
aplummer
This is great. Something similar was on hacker news without the "of course
this is a joke" qualifier:

[https://news.ycombinator.com/item?id=11001820](https://news.ycombinator.com/item?id=11001820)

------
ojii
At under 5MB, it's quite lightweight compared to other modern tools too, nice!

~~~
vini
I saw what you did here

------
yAnonymous
They're making fun of Bootstrap, but having classes that allow you to define
margins and padding quickly by adding a class is actually really helpful. Of
course that shouldn't be expanded to every possible property.

~~~
djsumdog
You can use Foundation + sass processor and not need any of that garbage. My
website just has nav, main, sidebar, etc. I define what I want into foundation
to be mapped to them and the preprocessor creates my minified CSS.

[http://penguindreams.org/blog/jekyll-3-and-
foundation-6/](http://penguindreams.org/blog/jekyll-3-and-foundation-6/)

Adding "row-xx" or whatever to your HTML elements is basically going back to
the garbage that was in table based html layouts.

~~~
silverbax88
I really don't know how to take your comment...are you suggesting that
precompiling and overriding the functionality native to CSS is easier than
just using a handful of classnames?

~~~
mieko
They're suggesting that Bootstrap-like classes that name and reference a
specific visual rendering (e.g., col-md-hidden) are no better than the old
ROWSPAN/COLSPAN mess. They've just moved from HTML attributes to being packed
into the class attribute.

Then again, semantic markup was a huge pain in the ass before tools like SASS.
Now you can actually name and categorize elements semantically in the markup,
then decide what that actually means in the pre-processed CSS.

Edit: And it's true: Having recently gone through even a simple bootstrap-to-
bootstrap redesign, we pretty much had to comb through every view and
remove/replace non-semantic CSS classes. With SASS mixins and semantic markup,
it'd have been a CSS-only change.

------
smhenderson
Here's my favorite part of the presentation:

 _View Raw

(Sorry about that, but we can’t show files that are this big right now.)_

------
chrismonsanto
The effect of the joke is lessened when it is labeled as a joke, doubly so
when every comment here copypastes the line saying it's a joke.

See also the latest reprinting of "A Modest Proposal," which kindly has
"SATIRE -- DO NOT BELIEVE" in large caps on the front and back covers.

~~~
HCIdivision17
To be fair, the top comment here calls out Poe's Law. You can see this best by
how "A Modest Proposal" was recieved: the anonymous author was _villified_ and
many powerful people were _outraged_. People were repulsed and offended and
everything'd else by it.

One of my favorite Asimov quotes is "It pays to be obvious, especially if you
have a reputation for subtlety." It's a damn shame that it's helpful to put
blaring giant signs that say _SATIRE_ on it and ruin the joke a bit, but
there's just a ton of people out there who just never really got up to speed
on detecting it. Many - possibly most! - people really don't look that deeply
into things and tend to take stuff at face value (or don't know that there
_is_ a deeper meaning to spot), no matter how outlandish.

All that as a mea culpa, as I read the OP's README and thought, "man, that
seems like a bit of a mess... under what circumstances would you need to do
that?" The answer is _NO DO NOT DO THIS_ but I, lacking experience, kinda
didn't get that right off the bat.

~~~
chrismonsanto
> To be fair, the top comment here calls out Poe's Law.

The top comment when I posted was a copypaste of the joke disclaimer. And the
top reply to the top comment at the time of _this_ posting is a copypaste of
the joke disclaimer.

> Many - possibly most! - people really don't look that deeply into things and
> tend to take stuff at face value (or don't know that there is a deeper
> meaning to spot), no matter how outlandish.

If someone can't figure out why generating a CSS class for every (property,
value) combination is funny, then I don't think an explanation will help.
Maybe it will give those readers an A-ha! moment and a valuable life lesson,
but it won't be _funny_ for them.

> All that as a mea culpa, as I read the OP's README and thought, "man, that
> seems like a bit of a mess... under what circumstances would you need to do
> that?"

If you got rused then that's great. The joke did what it was supposed to do.
What sucks is that people who instinctively click the comments first won't get
that experience, because some killjoy had to post "IT'S A JOKE DON'T FALL FOR
THIS."

------
usmanshaikh06
Is this a joke?

Of course it's a joke. Use semantic CSS class names.

------
YngwieMalware
I was almost offended until I realized it was too absurd to be real. Really
happy this is a joke, holy crap.

------
ryannevius
This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire.

[1] [http://tachyons.io/](http://tachyons.io/)

~~~
bshimmin
I think I'd have to assume anyone using that on a project I was paying them
for really was trying to be funny. I mean, really, take a look at this:
[https://github.com/tachyons-css/tachyons-
visibility](https://github.com/tachyons-css/tachyons-visibility)

~~~
cel1ne
I used and am using this in production. So are others. It works really really
well.

Here's the rational: [http://mrmrs.io/writing/2016/03/24/scalable-
css/](http://mrmrs.io/writing/2016/03/24/scalable-css/)

~~~
ryannevius
In all seriousness, what advantages do you see over writing inline styles?

~~~
cel1ne
Tachyons is based on mathematical scales:
[http://tachyons.io/docs/layout/spacing/](http://tachyons.io/docs/layout/spacing/)

Practical example: I have a form with a header. I look at it and think "there
needs to be more space below the header". So I change

    
    
      className="mt0"

to

    
    
      className="mt1"
    

It hot-reloads etc. It took me exactly two keystrokes to change this and I
know that the spacing is consistent with all the other spacing in my app.

~~~
ryannevius
But how is that any more efficient than changing:

    
    
        style="margin-top: 1rem;"
    

to

    
    
        style="margin-top: 2rem;"
    

It's also two keystrokes, and is mathematically determined...

~~~
cel1ne
1\. way less clutter and repeating, my whole style is in one line per tag.

2\. the scale also has fractional rem values.

I'd rather change "f5" to "f6" for a smaller font than: "fontSize: 1rem" to
"fontSize: 0.875rem".

3\. the author of tachyons clearly understand design. If he improves his
stylesheet, I benefit.

4\. Apparently inline-styles are slower [0], but I don't count that since
everything could be extracted.

[0] [http://ctheu.com/2015/08/17/react-inline-styles-vs-css-
stupi...](http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupid-
benchmark/)

5\. I thoroughly enjoy using it. :)

------
blowski
Funny, but before we all get on our high horses:

1\. Bootstrap is partly for prototypes and quick interfaces where front end
best practices don't matter.

2\. If you're using a preprocessor, you can include Bootstrap's classes and
rename/combine them to something semantic.

3\. Something can be a good idea when done in small quantities, and a terrible
idea when taken to extremes.

------
sunnyshahmca
I know it is a joke. I have been a contributor to the Webkit project and these
kind of jokes really scares me to death.

------
binthere
People who don't understand the concept of atomic CSS usually joke about it,
but has no idea about the benefits. The new Twitter mobile site is fast as
hell and use this concept. Semantic class names makes no sense when you think
about it.

~~~
marchelzo
I'm not familiar with this concept. What _are_ the benefits?

~~~
binthere
[http://acss.io/frequently-asked-questions.html](http://acss.io/frequently-
asked-questions.html)

------
megalodon
Delightful, cringe-entailing humour; this definitely made my day.

------
kevinyun
If you don't read the docs fully, everything looks really official with 314
stars social credibility too

------
lanestp
It's sad that my first reaction was "Looks like bootstrap." I would like a few
more colors. Maybe you could add pantone support, that would make this super
useful esp. for mobile!

------
Randgalt
The real joke is how screwed up client side programming is. Here's a library
that's an insider/hipster joke but it's only obviously a joke to
hipster/insiders.

~~~
hawleyal
Blah blah blah doesn't like JavaScript

~~~
Randgalt
Javascript is fine. It's the fact that the ecosystem changes every few months
and devs post things like "look how ridiculous this old way of doing things
is" when the old way was just last year (or 6 months ago) when _it_ was the
new hotness.

------
leray_J
I'm getting scared to see that on front page, I'm the kind of guy which could
have enough luck to randomly fall into a project where someone used it for
real.

~~~
at-fates-hands
"Dude, I just found the coolest CSS framework, take a look. This is going to
solve ALL of our problems!"

I've had this happen a few times with other developers I thought were pretty
sharp. The best example is when someone found Dogescript
([https://dogescript.com/](https://dogescript.com/)) and was convinced it was
the next big thing. The best part was I didn't have the heart to tell him the
truth.

~~~
leray_J
Are you kidding me?!

How can someone take Dogescript seriously?! That is so retarded, even a guy
witch is not into programmation and hang out on 9gag sometimes can tell it's a
troll!:O

------
return0
This is awesome. I no longer need to type the dreaded ":" , which requires the
most awkward finger combination . My ulnar nerve will be so happy.

~~~
jahewson
You know you're supposed to press the shift key with the _other_ hand right?

------
jjar
I was about to flip the table before reading the last faq. Good one.

------
thierryk
I think we should judge a technique in regard to the problems it solves and
the ones it creates, not in regard to our understanding of the said technique.

No, it is not the same as using "inline styles" (just think about it). Yes, it
reduces CSS scope and bloat in styles sheets. Yes, it breaks the Separation of
Concern principle. No, it does not create bloat in the markup. Yes, it forces
you to style via markup rather than via a style sheet, etc.

Like with any other technique, choosing to use "Atomic CSS" in a project
should be considered in relation to the problems authors have to solve. CSS is
a complex matter, there is no one size-fit-all solution and there are not that
many solutions either so I think we should think twice before disregarding a
tool, any tool.

PS: Yes, I know universal.css is a joke but it is mocking a real/serious
approach to big CSS problems.

------
Loque
I am really glad someone has put this together - I was enjoying Harry Roberts
talk at RenderConf until he dropped this in our faces:
[http://csswizardry.com/2016/05/the-importance-of-
important/](http://csswizardry.com/2016/05/the-importance-of-important/)

Utility classes I dislike (mixins plx) and the idea of using important with
them is not a design decision I would want to pick up.

I guess my bigger problem is that Harry sells himself as an expert, stands up
on stage telling people this is how they should be doing things... and here I
am, no book, no stage and my specificity level gets trumped by Harry amongst
certain members of my team (despite my years of qualified awesomeness across
large scale, popular, public domain sites)

Thought I'd just share that with you :`P

~~~
SquareWheel
I read that post earlier and it seemed fine. If you add a .bold class to an
element, why would you want it to sometimes not be bold?

Utility classes don't belong everywhere but I think it's going a bit far to
discredit the man for proposing this. His work on ITCSS in particular shows
he's well versed in the language. I find this system far more sane than other
proposals.

~~~
Loque
Why bother with class 'bold' when you could use inline styles? (I jest)

I come from an older thinking that your HTML should not have any classes that
imply visual style, and that classes/id's should be semantic to the content
and structure of the HTML.

CSSZen garden is a good example of this.

Nowadays I personally love semantic markup, stylistic mixins, and a CSS file
linking the two together following BEM patterns.

I think legitimate times when this falls apart, is when I watch the designers
I work with now, work in HTML & CSS - they need to quickly move things around,
so doing this all from markup gives them a big speed increase, up until a
point that is. We get involved now early after initial client direction sign-
off to make their markup and CSS more robust before they carry on like a pig
in poo.

------
yuvalkarmi
this is wonderful! finally, a clear, succinct way of writing CSS. This is what
I've been waiting for since I wrote my first <font /> tags when I was eight.

~~~
return0
that might have been <font> tags

~~~
riskable
To be fair, 8-year-olds are exposed to a lot of closure.

"And the HTML tag lived happily ever after."

------
kalkin
I pretty much completely disagree with the implicit critique here. The
codebase I work on now has largely transitioned from "semantic" CSS
(classnames based on feature) to CSS with classnames that describe what they
_do_ , visually, and the latter has made writing frontend code dramatically
more straightforward - it's gone from something I dread and try to pass off to
a specialist to something I can do easily. A night-and-day improvement.

I mean, nobody actually advocates translating every single possible style
attribute into its own CSS class. But what's wrong with padding and margin
utility classes that use a consistent set of widths? Is doing calculations on
"1x" and "2x" when you want elements to line up really worse than doing
calculations on pixel or em values in your CSS just because it's "unsemantic"?

Let's take the examples from the "maintainable CSS" book that's linked:

    
    
      <!-- bad [sic] -->
      <div class="red pull-left">
      <div class="grid row">
      <div class="col-xs-4">
    
      <!-- good [sic] -->
      <div class="header">
      <div class="basket">
      <div class="product">
      <div class="searchResults">
    

Ask yourself, in which case can you read the code and tell roughly how it's
going to render? In which case do you think you'll be able to re-use the
classes on other pages? If you wanted to make another, visually consistent
page that shows, say, seller search results instead of product ones, in which
case do you think you'll be able to figure out which styles need to change
more quickly?

Here's the backend equivalent:

    
    
      # "bad"
      def cheapest_products_with_min_rating(rating)
        products.
          select { |p| p.rating >= rating }.
          sort_by { |p| p.price }.
          first(10)
      end
    
      # "good"
      def products_for_category_landing_page(rating)
        allowed = []
        for p in products
          if p.rating >= rating
            allowed << p
          end
        end
    
        # pretend I've implemented quicksort here
      
        result = []
        for p in sorted
          break if result.length >= 10
          result << p
        end
    
        result
      end
    

Ugh, that first example - using all these "unsemantic" components like "sort"
and "select"! How do I know when I look at the implementation of any of them,
or the function itself, what the intent is? What business problem is being
solved?

The second example - so nice and "semantic". If we want to change what
products show up on the category landing page, it will be easy!

...

In real life, nobody writes backend code like that. Why should we tolerate it
in the frontend?

~~~
kowdermeister
I'm with you. I'm not sure why semantic purists need to spread the idea that
utility classes are bad. 1 class name for every property is stupid of course,
but layout classes (yes, used with semantic HTML elements) are a great help if
used with discipline.

After all, who are we writing code for? \- The end user? He can't care less
about the class names. \- Search engines? They can surely identify relevant
content. Semantic classes help, but they don't rule out utilities. \-
Ourselves? I can read utility/semantic classes well especially that I've
written. Also not a case against utilities.

------
rudedogg
I've been working on an app that relies on parsing CSS styles for like 6
months - full time. This almost gave me a heart attack until I realized it was
a joke.

------
Kmaschta
See
[https://news.ycombinator.com/item?id=11737510](https://news.ycombinator.com/item?id=11737510)

------
cfvergara
Seriously though. What's bad about using, say, tachyons and composing several
of its pieces inside more meaningful labels like "sidebar" or "header" or
whatever? It's simpler to grasp, and it WILL wind up as one dictionary per
node anyway

------
mat_jack1
It's really funny because I'm working on a real project which uses a CSS which
is really like universal.css, and we are thinking of going responsive. Luckily
at least this is a joke.

I sympathize with the other commenters with my same problem.

------
mendelk
I know this is meant as a joke, but having used BassCSS[0] in a production
webapp, I believe it really is a valid approach to CSS.

To each their own, I guess.

[0] [http://www.basscss.com/](http://www.basscss.com/)

------
chrispie
go on and just waste more time on this by reading the comments

------
drivingmenuts
Can someone kindly explain how I'm supposed to feel about this? I'm on mobile
ATM and my feelings are somewhat restrained by available processing power.

------
nkjoep
Does this compile with vanillajs?

------
babby
I've done this before. The performance on IE, firefox, safari and mobile is
complete shit yet suprisingly good in Chrome.

------
syzygykr
cornflowerblue was a nice touch.

------
foota
(Sorry about that, but we can’t show files that are this big right now.)

Uh oh

------
typedef_struct
For about 15 seconds I was horrified. Time to go to bed.

------
cloudjacker
> Of course it's a joke.

whew, had me going there

------
surunzi
Obviously, it's just a joke.

------
bingeboy
Sign me up.

------
mobiuscog
These frameworks get everywhere.

------
dikiaap
Cool

------
fortytw2
> Where is the documentation? > You don't need documentation.

What constitutes self-describing code is wildly different depending on the
person. I mean, really?

EDIT: I definitely missed that this is a joke :'(

~~~
jacobevelyn
I think you may have missed this:

> Is this a joke? Of course it's a joke.

~~~
fortytw2
Sure did. My mistake

------
jstoja
In the end, why not directly have the JS reading the class and generating only
what's needed? That would be very cool! I'm still having some doubts about the
maintainability (duplication, isolation...) of such styling btw...

~~~
oevi
[https://github.com/Idnan/furnish-js](https://github.com/Idnan/furnish-js)

------
fiatjaf
People really waste their time on these jokes.

I have a lot of ideas for small side projects that could be good (or probably
not, but at least I wanna try them seriously) and can't get time to implement
them, and people who have this time waste it writing universal.css.

~~~
aliandthieves
> People really waste their time on these jokes.

Oh, come on. It probably takes two hours, at most, to create a text generator
that prints this whole universal.css file...

~~~
amatera
I doubt that it will take two hours. The source code (running in node or
browser) is here:
[https://github.com/marmelab/universal.css/blob/master/univer...](https://github.com/marmelab/universal.css/blob/master/universalCssGenerator.js)

------
smegel
So I have to choose between a several Meg download vs using JavaScript to
render styles?

No thanks.

Honestly I thought bootstrap was the only css I would ever need, and this
hasn't changed my mind.

