Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Mimic – class-fied inline CSS

peterchon.github.io

Post reply on HN
Print view View original

11–20 of 74 posts

Re: Show HN: Mimic – class-fied inline CSS

#11

Post by nness »

I feel like this is akin to "killing the patient to cure the disease." In the uses I can see for this, the way this framework solves the problem, to me, seems to be worse than any problem itself. Namely, I would like to know how this is any better than !important on your CSS properties.

Firstly, you're messing up your separation of concerns, you're also messing up an attribute with values that other developers will probably see as a bug — "why isn't this in a style tag?" It also won't work with JavaScript disabled (a few people will complain about that, they always do).

Why use classes at all? If the idea is to not rely on CSS, we could use a data attribute, like data-mimic or data-mimic-width="1", to apply to additional styles (although some CMS' will struggle with this).

(I realise its so easy to be negative, and HN submissions usually have their unfair share of criticism from people who think they know better. Although it obviously solves a problem for the author, at the crux of it, I'd refactor this if I found it in any projects I look after.)

Re: Show HN: Mimic – class-fied inline CSS

#12

Post by juhq »

When doing things like this, you should take ie into consideration http://spaceninja.com/2015/03/31/ie-css-limits/

Using parker (https://github.com/katiefenn/parker) tool to analyze the css:

  curl http://peterchon.github.io/mimic/css/mimic.css -s | parker -s

  PARKER-JS
  Total Stylesheets: 1
  Total Stylesheet Size: 126045
  Total Rules: 2551
  Total Selectors: 2611
  Total Identifiers: 5292
  Total Declarations: 3849
  Selectors Per Rule: 1.0235201881615053
  Identifiers Per Selector: 2.026809651474531
  Specificity Per Selector: 19.89199540405975
  Top Selector Specificity: 40
  Top Selector Specificity Selector: .row\:12 .col\:1
  Total Id Selectors: 0
  Total Unique Colors: 6
  Unique Colors: #3F3F3F,#3E49FF,#45497F,#1336CC,#CFCFCF,#CCCCCC
  Total Important Keywords: 0
  Total Media Queries: 1
  Media Queries: screen and (max-width: 736px)

Re: Show HN: Mimic – class-fied inline CSS

#13

Post by sdnguyen90 »

Going to be honest.. this doesn't look too well thought out. Something like z-index you have a class for values of 0 up to 100. Not necessary IMO.

I'd recommend taking a look at Basscss for some inspiration. From my perspective, you're trying to create something similar to Basscss.

Re: Show HN: Mimic – class-fied inline CSS

#16

Post by kbody »

dr_faustus wrote: post #15
dr_faustus wrote: post #4

Brilliant!

Doesn't anyone get that this is a joke?!?

I thought so as well, then I read some comments and doubt it a bit.

But this speaks for the current state of frontend. We are willing to be open/accept a lot of crazy ideas about organizing the frontend, but thankfully there is a limit.

Re: Show HN: Mimic – class-fied inline CSS

#19

Post by aidos »

nness wrote: post #11

I feel like this is akin to "killing the patient to cure the disease." In the uses I can see for this, the way this framework solves the problem, to me, seems to be worse than any problem itself. Namely, I would like to know how this is any better than !important on your CSS properties. Firstly, you're messing up your separation of concerns, you're also messing up an attribute with values that other developers will p…

I'm assuming the whole thing is a (pretty non-obvious) parody. If so, kudos to the creator – they had me for a moment there.

EDIT just actually read the post properly "More to come, including jQuery-less js components. Please stay tuned!" :-)

Post reply on HN