Bear CSS - Generates CSS based on your HTML markup(bearcss.com)
bearcss.com
Bear CSS - Generates CSS based on your HTML markup
http://bearcss.com/
21 comments
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?
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.
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.
>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.
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.
Pretty cool. I'd love to see a version that output a LESS file with nested classes.
https://gist.github.com/1710335
Run it in the browser console, much quicker than uploading...
Run it in the browser console, much quicker than uploading...
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.
Sadly, I have to agree with you. It's not ready yet at all.
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.
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.
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.
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.
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.
I still think there's a place for this. I think they've got a ways to go before it's ready though.
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.
http://zena.appspot.com/orso
obviously there is a huge amount of room for improvement.
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.
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.
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.
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.
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.
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?