from Hacker News

Universal.css

by jchampem on 5/23/16, 9:26 AM with 112 comments

by mrgreenfur on 5/23/16, 2:47 PM
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
by hashkb on 5/23/16, 1:47 PM
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.
by roddux on 5/23/16, 11:43 AM
>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?
by steego on 5/23/16, 2:03 PM
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.
by nachtigall on 5/23/16, 11:31 AM
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...
> 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″
by aplummer on 5/23/16, 10:18 AM
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
by ojii on 5/23/16, 10:22 AM
At under 5MB, it's quite lightweight compared to other modern tools too, nice!
by yAnonymous on 5/23/16, 11:06 AM
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.
by smhenderson on 5/23/16, 2:53 PM
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.)
by chrismonsanto on 5/23/16, 11:45 AM
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.
by usmanshaikh06 on 5/23/16, 10:40 AM
Is this a joke?
Of course it's a joke. Use semantic CSS class names.
by YngwieMalware on 5/23/16, 5:06 PM
I was almost offended until I realized it was too absurd to be real. Really happy this is a joke, holy crap.
by ryannevius on 5/23/16, 10:54 AM
This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire.
[1] http://tachyons.io/
by blowski on 5/23/16, 12:10 PM
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.
by sunnyshahmca on 5/23/16, 12:49 PM
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.
by binthere on 5/23/16, 3:14 PM
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.
by megalodon on 5/23/16, 10:50 AM
Delightful, cringe-entailing humour; this definitely made my day.
by kevinyun on 5/23/16, 4:28 PM
If you don't read the docs fully, everything looks really official with 314 stars social credibility too
by lanestp on 5/23/16, 2:14 PM
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!
by Randgalt on 5/23/16, 11:59 AM
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.
by leray_J on 5/23/16, 3:46 PM
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.
by return0 on 5/23/16, 2:11 PM
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.
by jjar on 5/23/16, 4:02 PM
I was about to flip the table before reading the last faq. Good one.
by thierryk on 5/23/16, 4:04 PM
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.
by Loque on 5/23/16, 4:31 PM
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/
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
by yuvalkarmi on 5/23/16, 1:43 PM
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.
by kalkin on 5/23/16, 3:14 PM
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:
```
  
  <div class="red pull-left">
  <div class="grid row">
  <div class="col-xs-4">

  
  <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?
by rudedogg on 5/23/16, 2:22 PM
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.
by Kmaschta on 5/23/16, 10:39 AM
See https://news.ycombinator.com/item?id=11737510
by cfvergara on 5/23/16, 1:13 PM
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
by mat_jack1 on 5/23/16, 8:04 PM
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.
by mendelk on 5/23/16, 6:10 PM
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/
by chrispie on 5/23/16, 2:42 PM
go on and just waste more time on this by reading the comments
by drivingmenuts on 5/23/16, 6:42 PM
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.
by nkjoep on 5/27/16, 12:43 PM
Does this compile with vanillajs?
by babby on 5/23/16, 10:32 AM
I've done this before. The performance on IE, firefox, safari and mobile is complete shit yet suprisingly good in Chrome.
by syzygykr on 5/23/16, 11:47 AM
cornflowerblue was a nice touch.
by foota on 5/23/16, 4:51 PM
(Sorry about that, but we can’t show files that are this big right now.)
Uh oh
by typedef_struct on 5/24/16, 2:10 AM
For about 15 seconds I was horrified. Time to go to bed.
by cloudjacker on 5/23/16, 5:13 PM
> Of course it's a joke.
whew, had me going there
by surunzi on 5/23/16, 2:23 PM
Obviously, it's just a joke.
by bingeboy on 5/23/16, 6:43 PM
Sign me up.
by mobiuscog on 5/23/16, 12:02 PM
These frameworks get everywhere.
by dikiaap on 5/23/16, 2:16 PM
Cool
by fortytw2 on 5/23/16, 10:50 AM
> 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 :'(
by jstoja on 5/23/16, 10:21 AM
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...
by fiatjaf on 5/23/16, 12:40 PM
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.
by smegel on 5/23/16, 12:24 PM
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.