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]
"
<a href="https://en.wikipedia.org/wiki/Poe%27s_law" rel="nofollow">https://en.wikipedia.org/wiki/Poe%27s_law</a>
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.
><i>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.</i><p>Which is worse; when it's done as satire, or seriously?
Absolutely brilliant! Because of its <i>universal</i> 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 <a href="https://hacks.mozilla.org/2016/05/css-coding-techniques/comment-page-1/#comment-19925" rel="nofollow">https://hacks.mozilla.org/2016/05/css-coding-techniques/comm...</a><p>> 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:<p><a href="https://news.ycombinator.com/item?id=11001820" rel="nofollow">https://news.ycombinator.com/item?id=11001820</a>
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.
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.<p>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.
This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire.<p>[1] <a href="http://tachyons.io/" rel="nofollow">http://tachyons.io/</a>
Funny, but before we all get on our high horses:<p>1. Bootstrap is partly for prototypes and quick interfaces where front end best practices don't matter.<p>2. If you're using a preprocessor, you can include Bootstrap's classes and rename/combine them to something semantic.<p>3. Something can be a good idea when done in small quantities, and a terrible idea when taken to extremes.
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.
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 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.<p>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.<p>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.<p>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: <a href="http://csswizardry.com/2016/05/the-importance-of-important/" rel="nofollow">http://csswizardry.com/2016/05/the-importance-of-important/</a><p>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.<p>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)<p>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 <i>do</i>, 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.<p>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"?<p>Let's take the examples from the "maintainable CSS" book that's linked:<p><pre><code> <!-- 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">
</code></pre>
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?<p>Here's the backend equivalent:<p><pre><code> # "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
</code></pre>
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?<p>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!<p>...<p>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 <a href="https://news.ycombinator.com/item?id=11737510" rel="nofollow">https://news.ycombinator.com/item?id=11737510</a>
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.<p>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.<p>To each their own, I guess.<p>[0] <a href="http://www.basscss.com/" rel="nofollow">http://www.basscss.com/</a>
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.
> Where is the documentation?
> You don't need documentation.<p>What constitutes self-describing code is wildly different depending on the person. I mean, really?<p>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.<p>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?<p>No thanks.<p>Honestly I thought bootstrap was the only css I would ever need, and this hasn't changed my mind.