

Ask YC: How to avoid front-end clutter? - robertgaal

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.<p>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?<p>Any thoughts?<p>(I hope I didn't explain this too vague, I'm trying hard not to)
======
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...](http://github.com/jlindley/accessible_form_builder/tree/master)
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).

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

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

------
mattjung
May design patterns may help you somehow: <http://cssdesignpatterns.com>

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

