Ordering declarations in rulesets about sass-guidelines HOT 29 CLOSED

I myself do something quite similar to #64 however I do not like that there is no standard rule for this. Alphabetizing at least makes it clear what should be done. I'll consider it.

from sass-guidelines.

I am bit apprehensive about Alphabetic ordering since in some cases the similar properties might get placed far away. Eg: 'top' & 'bottom" which are both used for positioning might come at the end & start of the rulesets.
Hence I group them based on functional similarity :)

from sass-guidelines.

Valid point.

from sass-guidelines.

By group type is still the most common use: http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/.

from sass-guidelines.

Oh, I commented: http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/#comment-185024. Didn't remember that, haha.

from sass-guidelines.

I agree with @jigarjain. Alphabetically might look nice and tidy, but in practice it's not the best way to order properties to me personally.

from sass-guidelines.

I would rather group them by type if there was a standard typing and ordering convetion (that is, which properties belongs to which type, and in which order).

from sass-guidelines.

Nicolas Gallager's Idiomatic CSS rules makes a lot of sense to me.
One think I'd highlight is the position order, which should follow the shorthands one imho - ie. clockwise starting from [-]top
eg.

top: 0;
right: 0;
bottom: 0;
left: 0;

// or

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Finally I'd suggest to put transition, animation and other CSS3 stuff at the bottom of the ruleset.

from sass-guidelines.

+1. Even I put transitions, animations, z-index etc at the bottom of the ruleset :)

from sass-guidelines.

I do it alphabetically because it seems (to me) faster to look for properties, because I know exactly where to look for. And also the code it's "cleaner" as well.

Also, most code editors can sort properties alphabetically with just one click (e.g. Sublime Text - F9) so you can write them randomly as you type them and then just sort them.

from sass-guidelines.

I stick with box model with a little modification.

• Position
• Box
• Inside of box
• Animated Behaviours of box

from sass-guidelines.

If prefer alphabetically for a few reasons:

1. It is not ambiguous; there is no argument that B comes before C.
2. It can be checked and ordered by tools with little effort.
3. It saves me from thinking. ("Hm, what type is font-size again?", "Where does "white-space go?")
4. Lookups are simpler.
5. The risk of accidentally adding the same rule twice is reduced drastically, as they'd be placed right next to each other by definition.

Aesthetically I prefer grouping by type, but in every day use alphabetically just makes my life simpler.

from sass-guidelines.

👍 +1 @koppen
I couldn't have done it better ;)

from sass-guidelines.

@koppen I agree with points 1-3 there. But I think both alphabetical & type ordering solves the problem of lookups & accidental repetitions of properties. No?

from sass-guidelines.

Might want to read into Concentric CSS and use Scss-Lint to check the applied rules. That last one is useful for any order you choose.

from sass-guidelines.

Using CSS Combs sort order actually reduces file size due to gzipping. Because common properties are more often found together, it allows gzip to more easily minify them.

I tested several different sort orders and found CSS Combs is the best:
http://peteschuster.com/2014/12/reduce-file-size-css-sorting/

CSS Combs Sort Order is documented here:
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

from sass-guidelines.

I agree with points 1-3 there. But I think both alphabetical & type ordering solves the problem of lookups & accidental repetitions of properties. No?

@jigarjain Looking up in an alphabetical list means I only have to look at the property to see how it's spelled to know where it should be placed. Type-ordering means I have to memorize what type/group/block does the property belong to, and what is the individual ordering of the available types. And then there's the question of what order does the properties go in in their respective groups.

from sass-guidelines.

Thank you all for your contributions. :)

from sass-guidelines.

I don't know.

from sass-guidelines.

I prefer alphabetically as it leaves little opportunity for duplication and allows for easier error checking as you're looking for the declaration from A-Z rather than what 'section' it is in. Pure and simple.
Personally I do this for all CSS now, I used to put CSS3 at the bottom but as it's best (imho) to use autoprefixer there's no need to write all those vendor prefixes.
I do however write my directions as per example from Idiomatic CSS above: top, right, bottom, left.

You'd get something like this:

.element {
  background: red;
  color: green;
  height: 45px;
  height: 47px;
  margin-top: 20px;
  margin-left: 5px;
  transition: color 1s linear;
}

from sass-guidelines.

I've not found an issue in working alphabetically since deciding to do so in 2012 and documenting it

https://github.com/sturobson/a-slightly-bizarre-starting-point#write-all-css-rules-alphabetically

from sass-guidelines.

It's recomforting seeing lots of you guys using the alphabetical order. I thought I was alone in this one :)

from sass-guidelines.

I strictly use alphabetical order but I admit in some cases it could be better :

.ordering {
  background: black;
  color: white;
  position: absolute;
    bottom: 0;
    left: 12;
    right: 0;
    top: 100%;
  text-align: right;
}

In this case for exemple, the indented properties are related to the previous one, defacto. It's not a relation specific to a design, a trick,… these are related by nature.

In fact it's the only case I see where alphabetical order could be a pain in the ass.

from sass-guidelines.

Hmmm.. Never thought of it @cahnory and I must say, it looks interesting. I might give it a try...

from sass-guidelines.

I usually don't do that but it came to me while reading the question :)

from sass-guidelines.

@cahnory That looks quite interesting. It's similar to grouping related properties, but even a bit more clear. Nice.

from sass-guidelines.

To me, sorting alphabetically is akin to sorting this sentence alphabetically; it doesn't make sense.

, ; . akin alphabetically doesn't is it make me sense sentence sorting this to

To me, you should be able to read through your CSS and build the DOM object in your head.

Edit: I really like the idea of indenting related properties that @cahnory uses.

from sass-guidelines.

Its not an issue of it making semantic sense as an order, its about the
most predictable way for others working on the same codebase to locate
declarations with as little explanation as possible. Most sensible, most
time saving? Yes.
On Jan 8, 2015 9:47 AM, "Ryan Canfield" [email protected] wrote:

To me, sorting alphabetically is akin to sorting this sentence
alphabetically; it doesn't make sense.

, ; . akin alphabetically doesn't is it make me sense sentence sorting
this to

To me, you should be able to read through your CSS and build the DOM
object in your head.

—
Reply to this email directly or view it on GitHub
#62 (comment)
.

from sass-guidelines.

Apologies. That should read most sensible, no, which a semantic ordering
would achieve (as you point out). But it IS a time saver when multiple
people are editing the file.
On Jan 8, 2015 9:49 AM, "Jake Ford" [email protected] wrote:

Its not an issue of it making semantic sense as an order, its about the
most predictable way for others working on the same codebase to locate
declarations with as little explanation as possible. Most sensible, most
time saving? Yes.
On Jan 8, 2015 9:47 AM, "Ryan Canfield" [email protected] wrote:

To me, sorting alphabetically is akin to sorting this sentence
alphabetically; it doesn't make sense.

, ; . akin alphabetically doesn't is it make me sense sentence sorting
this to

To me, you should be able to read through your CSS and build the DOM
object in your head.

—
Reply to this email directly or view it on GitHub
#62 (comment)
.

from sass-guidelines.