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

71–74 of 74 posts

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

#71

Post by solveforall »

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

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

#73

Post by oneeyedpigeon »

Raphmedia wrote: post #62
oneeyedpigeon wrote: post #45

Earlier quoted context omitted.

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; } // Dang…

What does

.menu + .alert-danger { margin-top: -16px; }

do that

.menu + .alert.danger { margin-top: -16px; }

doesn't? Isn't "alert-danger" redundant? It means that, in practice, you need to do something like:

.alert-danger, .list-danger, .heading-danger, .foo-danger, .bar-danger, .hum-danger { color: red; }

instead of just

.danger { color: red; }

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

#74

Post by Raphmedia »

oneeyedpigeon wrote: post #73
Raphmedia wrote: post #62

Earlier quoted context omitted.

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; } // Dang…

What does .menu + .alert-danger { margin-top: -16px; } do that .menu + .alert.danger { margin-top: -16px; } doesn't? Isn't "alert-danger" redundant? It means that, in practice, you need to do something like: .alert-danger, .list-danger, .heading-danger, .foo-danger, .bar-danger, .hum-danger { color: red; } instead of just .danger { color: red; }

In my opinion, you are mostly right that "alert danger" and "alert alert-danger" would be the same. The exception would be that you could easily apply global styles to "alert danger" via the ".danger" class. However, I find that in big websites, I don't want to rely on the global scope (for lack of better words) too much.

All my alerts and message styling would be in a separate myApp-messages.scss that would ultimately be merged into myApp.min.css

In this myApp-messages.scss, I would create all my own classes that then extend global style definitions if needed but avoid using them.

.alert{

  color: $text-color;

  background: $light-background-color;

  &.alert-danger {

   @extend .danger; // if needed at all

   color: $danger-color;

  }
}

As for "alert alert-danger" vs. "alert-danger". It is true that you could do something like :

.alert {

  color: $text-color;

  background: $light-background-color;
}

.alert-danger{

  @extend .alert;

  color: $danger-color;
}

In the "alert alert-danger" case, you can easily target all and then use advanced selectors to filter out or target more specifically its other states. You can also easily append/toggle the modifier classes with jQuery. With It's all a matter of philosophy, really. I like to have as many tools to do a job as possible, so I try to have as much classes on my elements as I can without going overboard (I'm looking at you, Drupal).

Post reply on HN