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

61–70 of 74 posts

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

#61

Post by oneeyedpigeon »

Raphmedia wrote: post #60
peterchon wrote: post #42

Earlier quoted context omitted.

Hi thanks for looking. Could you elaborate on your last statement?

Sorry, 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…

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

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

#62

Post by Raphmedia »

oneeyedpigeon wrote: post #45
Raphmedia wrote: post #30

Earlier quoted context omitted.

Yes, 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 i…

Yes, I fully understand why "alert-danger" is better than "alert-red". What I don't quite get is why "alert alert-danger" is better than "alert-danger". Isn't it possible - using a preprocessor - to maintain alert-danger, alert-warning etc? If multiple classes must be used, why not just "danger" which then allows the red coloration to be shared amongst different object types without being repeated.

In my opinion it is better since having the two classes allow you, amongst other things, to use advanced selectors.

Here is an horrible example from the top of my mind:

...

">...

.alert { border: 1px solid #ccc; } // Basic alert style

.alert-success { border-color: green; } // Success alert are green

.alert-warning { border-color: yellow; } // Warning alert are yellow

.alert-danger { border: 3px dashed red; } // Danger alert are red !!and have a bigger border!!

.menu { margin-bottom: 14px; } // The menu has a margin of 14px under it so nothing can get close

.menu + .alert { margin-top: -14px; } // Alert following the menu need to ignore the menu's margin

.menu + .alert-danger { margin-top: -16px; } // However, the borders of alert-danger are bigger than the regular alerts

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

#63

Post by aidos »

peterchon wrote: post #55
aidos wrote: post #19

Earlier quoted context omitted.

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!" :-)

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

Ahhhhh... I'm sorry for suggesting it was a parody.

Is there some specific reason you're trying to solve this with css classes? In this case you're better off just using style="margin:0", or am I missing something?

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

#64

Post by talmand »

ryanSrich wrote: post #39
talmand wrote: post #33

Earlier quoted context omitted.

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

Extending is not a mixin. Extend creates a bookmark (not repeating styles).

Ah yes, you are correct. I remembered that incorrectly.

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

#65

Post by talmand »

peterchon wrote: post #34
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…

Hi, thanks for taking a look. Could you tell me why this won't work without JS? My motivation to write this is because I always have to go back and make quick margin/padding/etc changes and I hated trying to come up with more class names. As mentioned, this isn't a framework. It was a way for me to add styles when writing styles to custom directives.

I too don't understand the JS comment.

But, if this isn't a framework then it seems rather large. If it were to do only what you describe, simple classes for simple changes, then you are loading in lots of stuff in your inc imports that isn't required.

I don't necessarily have a problem with it, it's not a bad idea. Personally I wouldn't be against using something like this that's tailored to a design so that only the necessary classes are required. That way it isn't necessary to have stepping of 1 to 100 on each property.

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

#67

Post by peterchon »

aidos wrote: post #63
peterchon wrote: post #55

Earlier quoted context omitted.

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

Ahhhhh... I'm sorry for suggesting it was a parody. Is there some specific reason you're trying to solve this with css classes? In this case you're better off just using style="margin:0", or am I missing something?

I wouldn't necessarily say that I'm trying to solve a problem. It's more of why not have modular css-classes that I can use to build things when using custom directives.

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

#68

Post by peterchon »

talmand wrote: post #65
peterchon wrote: post #34

Earlier quoted context omitted.

Hi, thanks for taking a look. Could you tell me why this won't work without JS? My motivation to write this is because I always have to go back and make quick margin/padding/etc changes and I hated trying to come up with more class names. As mentioned, this isn't a framework. It was a way for me to add styles when writing styles to custom directives.

I too don't understand the JS comment. But, if this isn't a framework then it seems rather large. If it were to do only what you describe, simple classes for simple changes, then you are loading in lots of stuff in your inc imports that isn't required. I don't necessarily have a problem with it, it's not a bad idea. Personally I wouldn't be against using something like this that's tailored to a design so that only th…

Thanks, yes I agree it's a lot - but I'm hoping to make something that people can customize so that you don't have 0-100px of choices (but for now, it's an attempt at something new)

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

#69

Post by peterchon »

oneeyedpigeon wrote: post #61
Raphmedia wrote: post #60

Earlier quoted context omitted.

Sorry, 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…

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

of course, and I completely agree. I started off using a hyphen, but tried a colon just to make it look similar to inline-css.

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

#70

Post by nness »

peterchon wrote: post #34
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…

Hi, thanks for taking a look. Could you tell me why this won't work without JS? My motivation to write this is because I always have to go back and make quick margin/padding/etc changes and I hated trying to come up with more class names. As mentioned, this isn't a framework. It was a way for me to add styles when writing styles to custom directives.

My apologies, I noticed a JS folder and comments on the page and assume it was part of the solution. (Seems the timeframe to edit my original comment has expired).
Post reply on HN