Best Tools to Make Easy CSS3 Development | Hacker News Reader

Best Tools to Make Easy CSS3 Development

webinsightlab.com

51 pointsmintusingh12 comments

CSS or cascading style sheet is basically a style sheet language that is used to describe the presentation semantics or the looks and formatting of a document.

Open articleView on HN

Might I also suggest nib, and excellent set of Stylus extensions for working with CSS3. One of the most useful features is image inlining, especially for gradients. While they end up being a fixed size, they also work crossbrowser (at least with any browser that supports data URIs).

http://visionmedia.github.com/nib/ http://learnboost.github.com/stylus/

All the examples show how to integrate it within your Node project, but you can just as easily use it from the command like with the `u` flag.

  stylus -u nib <file>

yes, three times yes. nib is the most powerful css gradient shim for a css preprocessing language (in this case Stylus) that I found so far.

what's amazing about stylus/nib is that a "mixin" is just like a standard css call. So as soon as I include nib, my `border-radius` attributes automatically get vendored.

Surprised there's not more people using it. It does have major speed issues however with large projects. I have a few dozen stylesheets and it takes over 2minutes to compile the project for deployment.

Stylus' very liberal syntax feels nice at first, but when you start using more complex selectors, @media queries, etc, you come across bugs and ambiguities. Sometimes bugs where the fix is not obvious at all due to the syntax being so relaxed and ambiguous.

I would love a mix between Sass' reliability and Stylus' flexibility...

For some reason I've had a preference against using CSS frameworks like this because they often take you away from the pure CSS code. My reasoning being if you end up in an environment where do not have access to the framework can you complete the task at hand?

I guess I would say it's like learning Javascript before using jQuery (which I did) so that you have the basics down.

I suppose I'll have to try a few of them out to see how I feel about it.

Also, I'm quite partial to ColorZilla's Gradient Editor. http://www.colorzilla.com/gradient-editor/

I don't think so. It's not like it really does things for you or abstracts away the weirdness of CSS like jQuery does for JS. You can't write a functioning website without knowing all the quirks of CSS rendering. The only thing it's done for me is change my muscle memory. I write stylus code without the braces, colons, and semicolons so I often write syntactically wrong CSS on the first pass whenever I'm in an environment without Stylus.

Checkout Bourbon–a library of SASS mixins and variables. It aims to be very vanilla, so you'll write the mixins similar to plain CSS. http://thoughtbot.com/bourbon/

Thanks for the heads up on this. I'm really tired of using compass just for the css3 mixins.

If you're a Sass user (and even if you're not), you should check out Compass:

http://compass-style.org/

Compass has CSS3 helpers, automated sprite generation, semantic grid system support and lots more. It's a killer power tool for front-end devs and designers.

I'll just drop a little tool I put together here some time ago: http://ippa.se/base64-image-encoder/

Less CSS is a great tool regardless of how you initially craft the CSS because it allows you to express the CSS in a more readable and maintainable way. You can abstract away the various cross-browser complexities and concentrate on what you are doing.

Good list, though I prefer colorzilla for Gradients: http://www.colorzilla.com/gradient-editor/

Reply on news.ycombinator.com