12 ms·
Show HN: Mimic – class-fied inline CSS
- jarco 11y agoThis is by far the most insane and stupid idea I have seen this year.
- peterchon 11y agoWell, the year isn't over yet :P
- oneeyedpigeon 11y agoYou have more up your sleeve?! ;)
- peterchon 11y agoIt does say: "more to come" maybe you'll get more laughs.
- elaus 11y agoCould you please elaborate a bit more on how a class "padding:10" is better than just adding an inline style "padding:10px"?
- zamalek 11y agoI'd presume because you can do browser-specific hacks/normalization with classes but not inline styles. I don't really see the point of all of this, either, though. Maybe it's satire?
- peterchon 11y agoHi, thanks for taking a look. I don't think it's a "better" way, I wanted to explore another way of adding quick styles without having to come up with a class name.
- bobwaycott 11y agoSo, basically this is just meant to feel better about using the `class` attr instead of using the `style` attr. Oh, and spaces instead of semicolons?
- dr_faustus 11y agoBrilliant!
- dr_faustus 11y agoDoesn't anyone get that this is a joke?!?
- kbody 11y agoI 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.
- cristianpascu 11y agoA brilliant joke. :)
- kapowaz 11y agoJudging from a lot of the serious analysis responses in the comments here, quite a few people.
- peterchon 11y agoThanks for taking a look. I appreciate everyone's feedback. I understand that it looks redundant and unorthodox, but this way of writing css does help me when I need to add a quick style fix here and there without having to change my main style sheet.
- inaccessible 11y agoSo now I don't have to use inline styles, just spam my css file with margin:0-100 and padding:0-100 classes, and I'm good to go?
- peterchon 11y agoHi, thanks for looking. You don't have to do anything that you don't want to do.
- joe5150 11y agoThis doesn't result in very readable markup or have any of the benefits of actual inline CSS, so I don't really see the need here.
- peterchon 11y agoI appreciate you taking a look, thanks!
- bbx 11y agoHow do you handle advanced selectors? Or hover states? Or priority? Or inheritance? There is a lot of reasons why separating content and styling is benefitial to both the designer and the developer. And why semantic classes, especially with tools like Sass where abstraction and reusability are key, allow to describe the content, not define its looks. That's why we went from color="red" to style="color:red;" to class="red-text" to class="alert alert-red" to class="alert-danger".
- oneeyedpigeon 11y agoAlthough bear in mind that bootstrap still does class="alert alert-danger" so they disagree slightly on that point.
- ryanSrich 11y agoIf you're using sass you just extend alert inside alert-danger. No need for two classes.
- talmand 11y agoBut then you'll create bloat. Multiple classes assigned to an element is far more efficient then repeating properties with the same values over multiple classes in the stylesheet.
- Raphmedia 11y agoYes, but "alert" simply means "this is an alert" (so, it may be a box or a popup, depending on where it is on the app/website). "alert alert-danger" means that this alert, whatever shape it is in, is also the alert for danger. It may be red, yellow, blink, have javascript attached to it, etc. However, it is not "alert alert-red"... What if your client wanted to never use the colour red again because his competition is branded red? You need to go through all the CSS (a few lines of :red needs to be changed to :yellow). You however also need to go through all your view, templates, possibly some hardcoded parts of the code, to change "alert-red" to "alert-yellow"... simply have it "alert-danger".
- rafaqueque 11y agoThis is getting crazy.
- peterchon 11y agoThanks for taking a look. Could you share why you feel that way?
- deleted 11y ago[deleted]
- nness 11y agoI 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.)
- aidos 11y agoI'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!" :-)
- peterchon 11y agoHey, thanks for taking a look. I'm sorry that it wasn't a parody. It's something that's helped me make quick small style changes without having to make more css classes.
- juhq 11y agoWhen doing things like this, you should take ie into consideration http://spaceninja.com/2015/03/31/ie-css-limits/ http://spaceninja.com/2015/03/31/ie-css-limits/ Using parker (https://github.com/katiefenn/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)
- peterchon 11y agoInteresting - I'll take a look.
- sdnguyen90 11y agoGoing 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.
- peterchon 11y agoPerhaps, which is why I appreciate everyone's feedback.
- adamrezich 11y agoIn these comments: WOOOOOOOOOOOOOOOOOOSH
- namuol 11y agowat.css ¯\_(ツ)_/¯
- Kiro 11y agoI don't think it's a joke. It contains some useful stuff like row and col which you can't do with inline CSS.
- oneeyedpigeon 11y agoSure, the row and col stuff makes sense ... which makes it all the more bizarre that the terrible inline-as-classname stuff is included. I fear it might be more a 'troll' than a joke; either that or this person has really got the wrong end of the stick.
- peterchon 11y agoThanks for taking a look, I appreciate everyone's opinion on things. Could you share why you think this way?
- oneeyedpigeon 11y agoBecause why wouldn't you just use inline styles if you really wanted to do this kind of thing?
- peterchon 11y agoThere's nothing stopping you from using inline-styles. It's another approach.
- arsalanb 11y agoHey, this is a very radical approach. I have great respect for people who ship something (anything!), because they have the vision to see things differently and actually execute this vision. This may take some getting used to, and a lot of debate if using this is really worth it, but it's something. Nice job! :)
- peterchon 11y agoI appreciate your kind words. It's always tough to put things out there for scrutiny.
- willthefirst 11y agoirony has reached the front end.
- Mahn 11y agoPerfect, now we just need an equally redundant pseudo syntax template system that produces html on top of this.
- Raphmedia 11y agoThat's the equivalent of a front-end developper going into back-end, saying "screw this!" and hardcoding everything. Urgh. Also, you cannot use numbers as classes. That's not allowed and may mess up some browsers / devices.
- peterchon 11y agoHi thanks for looking. Could you elaborate on your last statement?
- Raphmedia 11y agoSorry, I was wrong. It seem that they cannot start with a number but you can use a number in them so long as your class start with a valid character. I'm however worried at the use of the : character. The style definition might be ignored in some browsers. Some other might break when they see an invalid character and stop parsing your styles. That being said, most modern browser will be able to parse the CSS without you needing to escape any characters.
- oneeyedpigeon 11y agoI don't think there's anything invalid about the colon character in a classname. It's unusual sure, and probably not recommended (it has to be escaped in selectors, for one, which is a bit of a pain) but if it causes any tools to break, I think that's the fault of the tool.
- peterchon 11y agoof course, and I completely agree. I started off using a hyphen, but tried a colon just to make it look similar to inline-css.
- robotnoises 11y agoI don't think this is a joke. I think this is just something that probably isn't useful as a library/framework/whatever + maybe an incomplete understanding of how CSS best fits into the puzzle.
- peterchon 11y agoThanks for taking a look. As mentioned, it's not a framework - it's a way for me to add simple styling without having to find/add/replace existing class. It may not seem useful to you as a complete solution like bootstrap - but when writing custom directives, it really helped me.
- tjsix 11y agoI don't really want to be negative but I really can't see how this could be used for anything other than a quick prototype scenario. I'm never going to add 126kb of css to a project just for shortcuts like this, it just doesn't make sense given that the large majority of that added css weight will never be used.
- jsalinas 11y agoIt's sad that this reminds me to the worst CSS framework I've ever used (and was forced to use): https://github.com/EasyBoxModel/EBM https://github.com/EasyBoxModel/EBM Check https://github.com/EasyBoxModel/EBM/blob/master/app/assets/css/ebm.css https://github.com/EasyBoxModel/EBM/blob/master/app/assets/c... to get the idea.
- peterchon 11y agoHey sorry that you were stuck with a framework. It's not a framework, it's meant to be a quick way to add styles without having to make more css classes.
- KoulMomo 11y agoYahoo actually came up with something similar http://acss.io/ http://acss.io/ Benefits over just using inline styles: 1) support for pseudo-classes (:hover) 2) reduce markup bloat (shorter class declarations vs equivalent inline-style declarations)
- solveforall 11y agoAs someone who is perpetually terrified to do a Show HN, congrats for shipping something. I also don't think this idea is much better than inline style attributes, but it's something different at least. You seem to take constructive criticism well and that's a good sign. My advice (worth nothing since I haven't shipped) is to learn from the feedback and come back with something else. Also, I should mention I did have a use for something like this. On my site, I sanitize HTML generated by user plugins, and to ensure the HTML doesn't mess up other parts of the page, I would provide a set of allowed CSS classes, but disallow inline styles. The CSS classes would not include "position" properties, so "position: static" wouldn't be allowed. Later I was able to use phloc to parse the inline styles but prohibit "position", so I didn't need a huge set of CSS classes anymore.
- eduardo-costa 11y agoThere is something similar. https://github.com/eduardo-costa/shortcutcss https://github.com/eduardo-costa/shortcutcss