HN Explorer

Ask YC: How to avoid front-end clutter?

7 points by robertgaal ↗ HN
I suppose most front-end developers/designers heard of this problem before: too much CSS and Javascript files and too much declarations in 'em. After a while it gets hard to find your way around all the classes in there and add or fix things. Next to that you might scratch certain server-side code and forget to update the client-side bits. We tried to fix this by creating a lot of different CSS/JS files but sometimes certain declarations span across different site sections and you end up looking for them in the wrong place anyway.

How do you guys combat the mess you automatically make in the front-end? Do you use frameworks like Blueprint or perhaps SASS? I still haven't found any structure or convention that kind of forces me to do it DRY and neat, like for instance RoR has done for me. Maybe it's time to create a standard for this, or just to create some naming pattern to map front-end code to server-side? Or maybe that already exists?

Any thoughts?

(I hope I didn't explain this too vague, I'm trying hard not to)

7 comments

[ 3.6 ms ] story [ 35.9 ms ] thread
Xichekolas
I have found that Sass makes managing large amounts of CSS really easy. It's honestly probably more useful to me than Haml itself. But both of those were the 'killer app' of rails for me personally. I can write html and css, but haml and sass are just so much more succinct and DRY.
ndaiger
Ditto for me. I've never enjoyed implementing a design (I much prefer programming), but it's usually cheaper/easier to have someone mock something up in photoshop for me to implement than have have the designer implement a template as well.

Haml & Sass make the process so much less painful.

ivank
Python and Haskell have CleverCSS to do the same.
STHayden
As a designer at <a href="http://www.flugpo.com">Flugpo</a> I deal with this problem all the time.

With CSS I really think the best answer is one monolithic CSS file. Add a index at the top and keep it organized by global, section and page: http://www.flugpo.com/FlugPo/styles/style.css

With JS I find breaking it down by section files alone with one global file to be the best way to approach it.

bjclark
First, if you're having the problem of way to many styles, it's probably because of 2 reasons. You're not using the Cascading part of Cascading Style Sheets, and you don't have a good style guide (which is useful no matter how small the site).

As for organization of files, I use something called "alltemplates" that I have no idea where I found. It's basically just an organized file similar to what STHayden describes. Email me at bjclark =at= inigral dotter com and I'll send a zip with the blank templates I start with.

Third, I use BlueprintCSS.

Forth, I use a form framework, for RoR I'm using http://github.com/jlindley/accessible_form_builder/tree/mast... which has blueprint support and for static pages/sites I use Khoi Vihn's "GoodForm" which is old, stagnant, and all I've ever needed (with my own modifications).

Dylanfm
I've used Blueprint for a few projects and I don't have anything bad to say about it. Although, I'm not going to be using it anymore because I tend to make use of about 50% of what it offers.