Bear CSS - Generates CSS based on your HTML markup

http://bearcss.com/

by dwynings • 14 years ago

51 27 14 years ago

bearcss.com

dclaysmith• 14 years ago

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

sturob• 14 years ago

https://gist.github.com/1710335

Run it in the browser console, much quicker than uploading...

zbowling• 14 years ago

LESS or other new CSS formats would be awesome.

franklindholm• 14 years ago

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.

snowcandy• 14 years ago

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?

ecubed• 14 years ago

Beautifully designed and illustrated. Great job.

mihaifm• 14 years ago

Any examples for which this might come in handy?

monsterix• 14 years ago

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.

andrewfelix• 14 years ago

>number of bits & bytes going into css (or any asset) is very important.

Not to mention a logical hierarchy and grouping based on the content of the site as opposed to what this tool supplies. Eg. LISTS, TYPOGRAPHY etc. (http://bearcss.com/outputCSS/60f6411ee02d14afff6dcc17b1be21d...)

Considering you're going to need to re-arrange the order of all these class/id names, you probably aren't going to save much time with this tool.

Having said that it is kind of neat.

est• 14 years ago

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?

itmag• 14 years ago

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.

bgarbiak• 14 years ago

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.

puppybeard2• 14 years ago

Sadly, I have to agree with you. It's not ready yet at all.

BerislavLopac• 14 years ago

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

chetan51• 14 years ago

Badly needs a demo.

puppybeard2• 14 years ago

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.

baby• 14 years ago

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?

antonyh2• 14 years ago

Not everything needs to be monitised. The guys are MA students in Northern Ireland - they are promoting themselves and their skills. They will earn money from this.

troels• 14 years ago

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

necolas• 14 years ago

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.

morturus• 14 years ago

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

bsmith• 14 years ago

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.

talmand• 14 years ago

I've done this.

The reason being I had to copy text from a Word doc into a long-form landing page. HTML from Word sucks and I never found a converter I liked because of my compelling need for decent formatting.

So I would copy entire chunks of copy from Word into Dreamweaver and then create my markup based on paragraph, headings and so on. I even made an extension for Dreamweaver that would convert special characters into their HTML entity equivalents.

Once I had the copy in HTML I would then start designing with CSS and any images required.

I did it this way because once I got past the drudgery of creating the markup for the copy the design part was interesting, challenging and fun. Plus it felt faster that way as opposed to inserting and designing in chunks.

But for websites my preference is the same, HTML and CSS in tandem.

antonyh2• 14 years ago

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.

viscanti• 14 years ago

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.

hyle• 14 years ago

I built (in less than a couple of hours) a proof of concept prototype that generates LESS files

http://zena.appspot.com/orso

obviously there is a huge amount of room for improvement.

ebr4him• 14 years ago

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

Bear CSS - Generates CSS based on your HTML markup

Related Stories