Monday, April 15, 2013

Sassy Structure

Let's face it, everyone structures their css slightly differently.  Or worse yet, they don't structure it all and it's just a mess of files all over the place
causing a sort of treasure hunt to try and find the freakin styling that's causing your div to float right (of course what I really mean is to use an inspector like the one in Chrome and see what style is causing the behavior).  That's why I really liked this article:

I liked how he layed out his sass files in a neat organized way.  So a little backgroud, if you don't know what sass is, it stands for Syntactically Awesome St
yleSheets.  It, along with some other competitors (namely LESS) provide a language that is a supserset of regular CSS.  So you get all the stuff you're used to
 in CSS, along with powerful constructs like variables, nesting, mixins, and inheritance, just to name a few things.

What I really like about John Long's project setup recommendation is the clarity and organization of how he lays out his files.  If you need to change somethin
g, you pretty much know exactly which file to look in; no more hunting.  And while developing, if you need to add a new style, you have a pretty good idea wher
 you should add it.

Same goes for his really large project structure as well.  He basically just copied what he did for the single project and divided it up into smaller 'sub-proj
ects' that all duplicate his basic directory structure.  The only thing I'd add here is perhaps a 'common' directory that has shared styles that can be used ac
ross all sites.

So take a gander and see if it looks like you're project.  The key here is organization and clarity.  My personal belief and motto is that "coding is communica
tion".  On one hand, you are communicating to the computer what you want done, and on the other you are communicating to other developers and future maintainer
s what your intent was.  Your goal as a developer is to maximize this clarity so that there is no ambiguity and your intent can be immediately understood.

No comments: