10 ms·

Universal.css

289 points by jchampem 10y ago

aplummer 10y ago
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
jstoja 10y ago
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 10y ago
  https://github.com/Idnan/furnish-js https://github.com/Idnan/furnish-js
ojii 10y ago
At under 5MB, it's quite lightweight compared to other modern tools too, nice!
- vini 10y ago
  I saw what you did here
babby 10y ago
I've done this before. The performance on IE, firefox, safari and mobile is complete shit yet suprisingly good in Chrome.
Kmaschta 10y ago
See https://news.ycombinator.com/item?id=11737510 https://news.ycombinator.com/item?id=11737510
usmanshaikh06 10y ago
Is this a joke? Of course it's a joke. Use semantic CSS class names.
fortytw2 10y ago
> 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 10y ago
  I think you may have missed this: > Is this a joke? Of course it's a joke.
  - fortytw2 10y ago
    Sure did. My mistake
megalodon 10y ago
Delightful, cringe-entailing humour; this definitely made my day.
ryannevius 10y ago
This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire. [1] http://tachyons.io/ http://tachyons.io/
- bshimmin 10y ago
  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 10y ago
    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 10y ago
      In all seriousness, what advantages do you see over writing inline styles?
      - ranyefet 10y ago
        Better caching, smaller HTML size and the ability to use inline styles if you do need to override something
        ryannevius 10y ago
        Are `class` attributes cached more efficiently than `style` attributes for some reason?
        Touche 10y ago
        I assume he/she means that CSS is cached as an http resource and can be reused in different pages, whereas style attributes are only cached as part of the page; ie using them adds page weight.
yAnonymous 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      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.
nachtigall 10y ago
You'd think this is a joke, but have a look at this comment at https://hacks.mozilla.org/2016/05/css-coding-techniques/comment-page-1/#comment-19925 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″
roddux 10y ago
>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?
- vittore 10y ago
  I think seriously reinventing styles attribute is much worse.
- Frenchgeek 10y ago
  When you do it as satire but everyone use your work seriously?
  - gravypod 10y ago
    That's the best way to say "All of the above" in this case.
chrismonsanto 10y ago
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 10y ago
  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 10y ago
    > 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."
syzygykr 10y ago
cornflowerblue was a nice touch.
Randgalt 10y ago
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 10y ago
  Blah blah blah doesn't like JavaScript
  - Randgalt 10y ago
    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.
mobiuscog 10y ago
These frameworks get everywhere.
blowski 10y ago
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.
smegel 10y ago
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.
fiatjaf 10y ago
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.
- imdsm 10y ago
  We all have 24 hours per day, we just choose to spend it differently.
  - fiatjaf 10y ago
    This is not news for me.
- aliandthieves 10y ago
  > 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 10y ago
    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/universalCssGenerator.js https://github.com/marmelab/universal.css/blob/master/univer...
  - fiatjaf 10y ago
    I'm ok with it, in this case.
sunnyshahmca 10y ago
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.
cfvergara 10y ago
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
kusanagiblade 10y ago
Lol. I thought it was something real until I realized it is a joke!
taivare 10y ago
I posted this the a day ago: The only CSS you will ever need / universal.css (github.com) 2 points by taivare 1 day ago | 1 comment
yuvalkarmi 10y ago
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 10y ago
  that might have been <font> tags
  - riskable 10y ago
    To be fair, 8-year-olds are exposed to a lot of closure. "And the HTML tag lived happily ever after."
hashkb 10y ago
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 10y ago
  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.
  - vkjv 10y ago
    I've had a very different experience with designers. I would say that ~95% of them something is a couple pixels off, a slightly different font size, or a shade off in color, it was a mistake. Usually a quick follow-up question will reveal the mistake and the designer is happy to make the correction. This has been my best weapon against CSS bloat.
  - notJim 10y ago
    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 10y ago
steego 10y ago
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.
return0 10y ago
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 10y ago
  You know you're supposed to press the shift key with the other hand right?
lanestp 10y ago
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!
dikiaap 10y ago
Cool
rudedogg 10y ago
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.
surunzi 10y ago
Obviously, it's just a joke.
chrispie 10y ago
go on and just waste more time on this by reading the comments
mrgreenfur 10y ago
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
- deleted 10y ago
  [deleted]
- eridius 10y ago
  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 10y ago
    Also, the 4.79 MB CSS should be a giveaway...
    - ketralnis 10y ago
      It should be. But... https://vimeo.com/147806338 https://vimeo.com/147806338
      - eridius 10y ago
        For anyone who doesn't want to watch a video: http://idlewords.com/talks/website_obesity.htm http://idlewords.com/talks/website_obesity.htm
smhenderson 10y ago
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.)
binthere 10y ago
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 10y ago
  I'm not familiar with this concept. What are the benefits?
  - binthere 10y ago
    http://acss.io/frequently-asked-questions.html http://acss.io/frequently-asked-questions.html
kalkin 10y ago
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?
- kowdermeister 10y ago
  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.
leray_J 10y ago
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 10y ago
  "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 10y ago
    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
jjar 10y ago
I was about to flip the table before reading the last faq. Good one.
thierryk 10y ago
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.
kevinyun 10y ago
If you don't read the docs fully, everything looks really official with 314 stars social credibility too
Loque 10y ago
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 10y ago
  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.
  - mieko 10y ago
    > If you add a .bold class to an element, why would you want it to sometimes not be bold? The problem is having a class called .bold, and then baking it into your HTML. I feel like many people arguing this have never undertaken a full-scale visual redesign on a large site. The designer comes in, and all the sudden everything marked .bold ends up meaning "lightweight italicized text". This presentational/semantic cycle repeats every 6 years or so, but I'm not sure where it's heading.
  - Loque 10y ago
    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.
foota 10y ago
(Sorry about that, but we can’t show files that are this big right now.) Uh oh
YngwieMalware 10y ago
I was almost offended until I realized it was too absurd to be real. Really happy this is a joke, holy crap.
cloudjacker 10y ago
> Of course it's a joke. whew, had me going there
mendelk 10y ago
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/
drivingmenuts 10y ago
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.
bingeboy 10y ago
Sign me up.
mat_jack1 10y ago
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.
mat_jack1 10y ago
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.
typedef_struct 10y ago
For about 15 seconds I was horrified. Time to go to bed.
nkjoep 10y ago
Does this compile with vanillajs?

289 points by jchampem 10y ago

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

jstoja 10y ago

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 10y ago
https://github.com/Idnan/furnish-js https://github.com/Idnan/furnish-js

ojii 10y ago

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

vini 10y ago
I saw what you did here

babby 10y ago

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

Kmaschta 10y ago

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

usmanshaikh06 10y ago

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

fortytw2 10y ago

> 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 10y ago
I think you may have missed this: > Is this a joke? Of course it's a joke.
- fortytw2 10y ago
  Sure did. My mistake

megalodon 10y ago

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

ryannevius 10y ago

This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire. [1] http://tachyons.io/ http://tachyons.io/

bshimmin 10y ago
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 10y ago
  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 10y ago
    In all seriousness, what advantages do you see over writing inline styles?
    - ranyefet 10y ago
      Better caching, smaller HTML size and the ability to use inline styles if you do need to override something
      - ryannevius 10y ago
        Are `class` attributes cached more efficiently than `style` attributes for some reason?
        Touche 10y ago
        I assume he/she means that CSS is cached as an http resource and can be reused in different pages, whereas style attributes are only cached as part of the page; ie using them adds page weight.

yAnonymous 10y ago

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 10y ago
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 10y ago
  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 10y ago
    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.

nachtigall 10y ago

You'd think this is a joke, but have a look at this comment at https://hacks.mozilla.org/2016/05/css-coding-techniques/comment-page-1/#comment-19925 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″

roddux 10y ago

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

vittore 10y ago
I think seriously reinventing styles attribute is much worse.
Frenchgeek 10y ago
When you do it as satire but everyone use your work seriously?
- gravypod 10y ago
  That's the best way to say "All of the above" in this case.

chrismonsanto 10y ago

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 10y ago
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 10y ago
  > 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."

syzygykr 10y ago

cornflowerblue was a nice touch.

Randgalt 10y ago

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 10y ago
Blah blah blah doesn't like JavaScript
- Randgalt 10y ago
  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.

mobiuscog 10y ago

These frameworks get everywhere.

blowski 10y ago

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.

smegel 10y ago

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.

fiatjaf 10y ago

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.

imdsm 10y ago
We all have 24 hours per day, we just choose to spend it differently.
- fiatjaf 10y ago
  This is not news for me.
aliandthieves 10y ago
> 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 10y ago
  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/universalCssGenerator.js https://github.com/marmelab/universal.css/blob/master/univer...
- fiatjaf 10y ago
  I'm ok with it, in this case.

sunnyshahmca 10y ago

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.

cfvergara 10y ago

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

kusanagiblade 10y ago

Lol. I thought it was something real until I realized it is a joke!

taivare 10y ago

I posted this the a day ago: The only CSS you will ever need / universal.css (github.com) 2 points by taivare 1 day ago | 1 comment

yuvalkarmi 10y ago

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 10y ago
that might have been <font> tags
- riskable 10y ago
  To be fair, 8-year-olds are exposed to a lot of closure. "And the HTML tag lived happily ever after."

hashkb 10y ago

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 10y ago
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.
- vkjv 10y ago
  I've had a very different experience with designers. I would say that ~95% of them something is a couple pixels off, a slightly different font size, or a shade off in color, it was a mistake. Usually a quick follow-up question will reveal the mistake and the designer is happy to make the correction. This has been my best weapon against CSS bloat.
- notJim 10y ago
  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 10y ago

steego 10y ago

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.

return0 10y ago

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 10y ago
You know you're supposed to press the shift key with the other hand right?

lanestp 10y ago

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!

dikiaap 10y ago

Cool

rudedogg 10y ago

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.

surunzi 10y ago

Obviously, it's just a joke.

chrispie 10y ago

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

mrgreenfur 10y ago

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

deleted 10y ago
[deleted]
eridius 10y ago
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 10y ago
  Also, the 4.79 MB CSS should be a giveaway...
  - ketralnis 10y ago
    It should be. But... https://vimeo.com/147806338 https://vimeo.com/147806338
    - eridius 10y ago
      For anyone who doesn't want to watch a video: http://idlewords.com/talks/website_obesity.htm http://idlewords.com/talks/website_obesity.htm

smhenderson 10y ago

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

binthere 10y ago

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 10y ago
I'm not familiar with this concept. What are the benefits?
- binthere 10y ago
  http://acss.io/frequently-asked-questions.html http://acss.io/frequently-asked-questions.html

kalkin 10y ago

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?

kowdermeister 10y ago
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.

leray_J 10y ago

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 10y ago
"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 10y ago
  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

jjar 10y ago

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

thierryk 10y ago

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.

kevinyun 10y ago

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

Loque 10y ago

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 10y ago
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.
- mieko 10y ago
  > If you add a .bold class to an element, why would you want it to sometimes not be bold? The problem is having a class called .bold, and then baking it into your HTML. I feel like many people arguing this have never undertaken a full-scale visual redesign on a large site. The designer comes in, and all the sudden everything marked .bold ends up meaning "lightweight italicized text". This presentational/semantic cycle repeats every 6 years or so, but I'm not sure where it's heading.
- Loque 10y ago
  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.

foota 10y ago

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

YngwieMalware 10y ago

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

cloudjacker 10y ago

> Of course it's a joke. whew, had me going there

mendelk 10y ago

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/

drivingmenuts 10y ago

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.

bingeboy 10y ago

Sign me up.

mat_jack1 10y ago

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.

mat_jack1 10y ago

typedef_struct 10y ago

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

nkjoep 10y ago

Does this compile with vanillajs?