

How To Write More Readable CSS Files - hoopitr
http://woorkup.com/2009/10/18/5-rules-to-write-more-readable-css-files/

======
alabut
I don't know about the rest of the rules - #2 would drive me nuts - but I read
#1 years ago and it's helped me keep my sanity ever since. Something as simple
as alphabetizing properties gave me a sort of muscle memory for where certain
things should be, so I know at a glance whether an element has a border or
width or what have you.

------
Semiapies
I'm actually not crazy about alphabetizing properties, though it doesn't
strike me as a _terrible_ idea. I generally prefer to group the properties by
function - i.e., the block properties together, text-formatting properties
together, etc.

~~~
nfnaaron
A good reason to alphabetize is that your text editor can alphabetize a group
of lines. So it's easy to get a group of properties back into order, as long
as "order" is what your tool does.

Similar to "our code formatting standards are whatever <local code beautifier>
does," and then move on.

If you can get your tools to order according to function, then great.

~~~
Semiapies
"A good reason to alphabetize is that your text editor can alphabetize a group
of lines."

That seems like putting the cart quite precisely in front of the horse. What
text editors can easily do is not nearly as important as what's useful.

I don't think it's clear that strict adherence to an ordering of several
properties per selector is _useful_ \- at least as much as bracket-handling
and such - and if one has enough properties per selector that it takes
noticeable time to find a particular property once you've located a selector,
that's very likely a problem with one's CSS.

Now admittedly, I use less, which makes CSS pretty concise, but if there are
tens of properties for any selector, something needs refactoring.

------
sync
or use SASS to accomplish... all of those tips... <http://sass-lang.com/>

~~~
RyanMcGreal
Or CleverCSS for Python users: <http://sandbox.pocoo.org/clevercss/>

------
makecheck
While I list most CSS properties together, I actually collect all box elements
like this:

    
    
      margin-top: ...
      border-top: ...
      padding-top: ...
      height: ...
      padding-bottom: ...
      border-bottom: ...
      margin-bottom: ...
      
      margin-left: ...
      border-left: ...
      padding-left: ...
      width: ...
      padding-right: ...
      border-right: ...
      margin-right: ...
    

The components are listed in outside-in order, with each axis separate. I find
this easy to visualize and tweak.

Most other properties, however, I do just list together alphabetically.

~~~
alabut
This is the opposite of readable, for me. Even assuming that you're using the
shorthand notation to compact the properties vertically and that you're
listing out each one here because they need to have different properties,
grouping the related ones together (all the margins, paddings, etc) would make
it much easier to scan. Plus I've gotten used to ordering properties in the
TRouBLe format (Top Right Bottom Left, just like the browser does in the
shortcut notation) and would list it that way, rather than top/bottom,
left/right.

