Bear CSS - Generates CSS based on your HTML markup

Didn't get what it did until I saw "est" comment here on HN. There are no examples on the firstpage. I didn't have a nice .html near by so I couldn't test it.

Now that I know what it does, I don't see the point of it. Why would put every div, every html element in the CSS? I never do that.

Also the comments and the way of separating different CSS are not the way one would do at all on a project. I'm sorry but I really don't see the point of it at all, and I also don't see how you could monetize that.

PS: Also is it that revolutionary that it hits 5# on HN's frontpage?

So I downloaded bearcss.com html, uploaded it, and got this

http://bearcss.com/outputCSS/21f0b55b80e7773d3199e87f4d8e328...

Is it supposed to merge all inline CSS properties to a .css file?

I don't know what I expected really, but something more than an empty CSS file, maybe my expectations were totally off or maybe this wasn't very impressing. Although I could see that it would be convenient to generate this for large html pages with many elements.

Looking at how web is shaping up in the post-PC era, it seems that the number of bits & bytes going into css (or any asset) is very important. In such a scenario, I find it more compelling to write those assets with own hands rather than pick up and bulldoze with css resets or frameworks or even normalization.

In that sense Bear CSS seems quite a good approach because then probably we're playing just with 'relevant css' of only elements/markup we're actually using in the app. Will definitely give it a try.

Pretty cool. I'd love to see a version that output a LESS file with nested classes.

After a first glimpse: multiple classes per node (or things like class=" ") are handled incorrectly and DOM hierarchy is ignored altogether (ul li ul anyone?). I wouldn't recommend this tool to anyone, sorry.

This could be handy for something like starting a template from scratch for a CMS.

However it needs more work. Multiple classes are broken.

.post-5 post type-post status-publish format-standard hentry category-products post {

}

Also, it misses a trick by not using heierarchy for definitions the way anybody who writes css as part of their job would.

I'd like to see it as a tool that gives you every definition you need, and then you can strip out what you don't want afterwards.

I can't see myself using it on a bespoke project, as I tend to write html and css simultaneously.

I've got nothing against the ever expanding array of web frameworks and such. However, I find it harder and harder to get a good overview and make a decision, and as such I tend to just default to using whatever framework I already know. I sometimes feel that I'm missing out on great things.

Someone should create a repository which lists all web development frameworks/utilities/tools/libraries/doodads/etc and has some kind of popularity mechanism. Right now, my only way of knowing what's used (and works) in the trenches is going by comments on HN.

This is a neat idea for creating themes or CSS skins.

Imagine if it only included HTML elements with an ID or a class. It's produce something that could then be edited to ADD to the current CSS, instead of replace it.

If we wanted to export all the styles in play for a HTML page, i.e. all the computed styles, I'm sure there's a way of hacking Firebug to export what it thinks is the CSS.

Incidentally, I didn't get it to work with a HTML page saved from the internet - it uploads it then tells me it's a HTTP error.

There are two significant problems with this:

1. The output CSS contains invalid or unnecessary code. Multiple classes on an elements are incorrectly handled, some form inputs (checkout and radio) are incorrectly referenced, and reference-only IDs are included.

2. The idea is flawed. Writing CSS and creating reusable components is not the same as filling in values for every element, class, and id found in your HTML.

This is a fantastic project, but I can't help but feel that it's a bit late to the party. Five years ago this would have been especially helpful. The trend now is towards css compilers like LESS or SASS, or using bootstrap css frameworks where you name your html elements based on the framework conventions.

I still think there's a place for this. I think they've got a ways to go before it's ready though.

Interesting idea, but even if it worked properly, I don't think I'd ever use it—I always write HTML and CSS in tandem when coding up pages.

Is there anyone who prefers to write _all_ of the HTML before starting the CSS? If so, I'd be interested in hearing about your workflow.

Some hierarchy for like div > h1 or ul > li etc would be nice. I just used the source of the page in and copied it to an html file but it basically just generated blocks under the correct labeling (ex: Typography has h1, h2, h3). It was more or less empty?

I was a bit disappointed that this balloon didn't pop when getting to the bear's paw... ;-)

Any examples for which this might come in handy?

LESS or other new CSS formats would be awesome.

Doesn't primercss.com do the same? Its available since more than year now.

I don't understand the use case. Care to educate me?

Badly needs a demo.

Beautifully designed and illustrated. Great job.

is it just me or it is not working? i keep getting an "IO Error" after upload.