Universal.css (opens in new tab)

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

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.

>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?

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.

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″

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

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

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.

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.)

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.

Is this a joke?

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

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

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

[1] http://tachyons.io/

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.

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.

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.

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

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

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!

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.

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.

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.

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

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.

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

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.

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?

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.

See https://news.ycombinator.com/item?id=11737510

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

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.

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/

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

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.

Does this compile with vanillajs?

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

cornflowerblue was a nice touch.

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

Uh oh

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

> Of course it's a joke.

whew, had me going there

Obviously, it's just a joke.

Sign me up.

These frameworks get everywhere.

Cool

> 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 :'(

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...

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.

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.