3 ms·

Can anyone explain to me what this does? I gather that it reorders the CSS statements somehow, but I'm not clear about exactly how it reorders them or why this

by Pitarou 13y ago

Can anyone explain to me what this does? I gather that it reorders the CSS statements somehow, but I'm not clear about exactly how it reorders them or why this is important.

phorese 13y ago
There's a variable $default_sort_order = '[ "position", "top", "right", "bottom", "left", "z-index", "display", "visibility", "-webkit-flex-direction", "-moz-flex-direction", "-ms-flex-direction", "-o-flex-direction" [...] defined in https://github.com/csscomb/csscomb-for-vim/blob/master/plugin/lib/csscomb.php https://github.com/csscomb/csscomb-for-vim/blob/master/plugi..., so I guess that's what CSSComb uses, although it says one can define custom orderings. I guess it's useful if you write lots of CSS and don't want to bother with thinking about the ordering at code-time?
sriharis 13y ago
See http://csscomb.com/about/ http://csscomb.com/about/. I think the order is configurable. Sorting helps readability and it helps you find the properties easily as your eyes get tuned to where they are usually found.
- oneeyedpigeon 13y ago
  I've also read (somewhere) that consistent property order provides a performance gain for minification, although the benefits are presumably tiny.
  - iclelland 13y ago
    It's likely to provide some help for compression (rather than minification), if you're gzipping your assets for transfer. This is probably most effective if you tend to specify the same values for the properties as well, so that a run can extend from one property name through its value and to the next property name. Clustering properties with identical prefixes will provide some improvement by itself, as it can keep the 'backward distance' values used in a small consistent range, but I expect that's going to be a much smaller effect.
Samuel_Michon 13y ago
Right. I thought I understood what it did, but then I watched the video and now I have no idea.
Shish2k 13y ago
According to the "about" page, it re-orders blocks of colour in rainbow order. I'm starting to think of something that might be good advice in general - 10 lines of actual working example code is worth 1000 lines of abstract documentation. (I've also been working with Twisted recently, getting frustrated with documentation that's full of recursive jargon...)

by Pitarou 13y ago

Can anyone explain to me what this does? I gather that it reorders the CSS statements somehow, but I'm not clear about exactly how it reorders them or why this is important.

phorese 13y ago

There's a variable $default_sort_order = '[ "position", "top", "right", "bottom", "left", "z-index", "display", "visibility", "-webkit-flex-direction", "-moz-flex-direction", "-ms-flex-direction", "-o-flex-direction" [...] defined in https://github.com/csscomb/csscomb-for-vim/blob/master/plugin/lib/csscomb.php https://github.com/csscomb/csscomb-for-vim/blob/master/plugi..., so I guess that's what CSSComb uses, although it says one can define custom orderings. I guess it's useful if you write lots of CSS and don't want to bother with thinking about the ordering at code-time?

sriharis 13y ago

See http://csscomb.com/about/ http://csscomb.com/about/. I think the order is configurable. Sorting helps readability and it helps you find the properties easily as your eyes get tuned to where they are usually found.

oneeyedpigeon 13y ago
I've also read (somewhere) that consistent property order provides a performance gain for minification, although the benefits are presumably tiny.
- iclelland 13y ago
  It's likely to provide some help for compression (rather than minification), if you're gzipping your assets for transfer. This is probably most effective if you tend to specify the same values for the properties as well, so that a run can extend from one property name through its value and to the next property name. Clustering properties with identical prefixes will provide some improvement by itself, as it can keep the 'backward distance' values used in a small consistent range, but I expect that's going to be a much smaller effect.

Samuel_Michon 13y ago

Right. I thought I understood what it did, but then I watched the video and now I have no idea.

Shish2k 13y ago

According to the "about" page, it re-orders blocks of colour in rainbow order. I'm starting to think of something that might be good advice in general - 10 lines of actual working example code is worth 1000 lines of abstract documentation. (I've also been working with Twisted recently, getting frustrated with documentation that's full of recursive jargon...)