Comment

Comment by zefhous

Ideally, I use Sass with Compass (http://compass-style.org/). This alone is a great start to keeping things organized. One of the things I love about Sass is that it allows partials and variable declarations, which both help immensely with code organization.

Then, my code is usually organized as follows. Each section can be extracted to a partial if it gets long enough or if more separation is desired.

  Framework includes and resets
  Variable declarations — colors, possibly specific widths  
  Universal method declarations
  Standard global tags — headings, p, a, ul, li, etc... 
  Generic form styling, usually in a dedicated partial
  Layout — container, header, content, footer
  Then to specific section styling
Since Sass uses indentation, I indent everything in each section within a top level tag. This really helps visually distinguish each section and gives a much less uniform look to the stylesheet which makes it a lot more scannable. If a section uses methods exclusively I'll declare them just above the top-level section tag.

I'm pretty happy with this approach. It was formed fairly organically but become more defined as I use it for more projects. It also seems to work well for both large and small projects, since partials can be used when the code starts getting long.

parent zefhous 15 years ago

Discussion

Live from the official Hacker News API

A modern reader for Hacker News · SvelteKit + Skeleton