
Bear CSS - Generates CSS based on your HTML markup - dwynings
http://bearcss.com/
======
baby
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?

~~~
antonyh
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.

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

[http://bearcss.com/outputCSS/21f0b55b80e7773d3199e87f4d8e328...](http://bearcss.com/outputCSS/21f0b55b80e7773d3199e87f4d8e3281/)

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

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

------
monsterix
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
_> 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...](http://bearcss.com/outputCSS/60f6411ee02d14afff6dcc17b1be21db/about.css))

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.

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

~~~
sturob
<https://gist.github.com/1710335>

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

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

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

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

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

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

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

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

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

------
snowcandy
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?

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

------
mihaifm
Any examples for which this might come in handy?

------
zbowling
LESS or other new CSS formats would be awesome.

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

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

------
chetan51
Badly needs a demo.

------
ecubed
Beautifully designed and illustrated. Great job.

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

