13 ms·

CSS Comb

23 points by sriharis 13y ago

sriharis 13y ago
It's pretty cool that they have plugins for editors and IDEs.
warpech 13y ago
Another great tool: http://css-tricks.com/autoprefixer/ http://css-tricks.com/autoprefixer/ That is a postprocessor not preprocessor, meaning that it works on the actual file (just like CSS Comb)
- hexasquid 13y ago
  It seems to work okay on SCSS files, although I can't say if they are officially supported or not.
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...)
justif 13y ago
Shame it doesn't support minimal syntax preprocessors like Stylus still.
iambateman 13y ago
Does this make a difference at all? I've never heard arguments for CSS ordering as a performance issue. It seems like removing CSS that doesn't do anything would be time better spent.
- talmand 13y ago
  There's no performance issue that I'm aware of. This is simply about coding style and an easy way to maintain it. The home page has a link to a Smashing Magazine article discussing this. In short, easy way to maintain coding style in a team environment.

23 points by sriharis 13y ago

It's pretty cool that they have plugins for editors and IDEs.

Another great tool: http://css-tricks.com/autoprefixer/ http://css-tricks.com/autoprefixer/ That is a postprocessor not preprocessor, meaning that it works on the actual file (just like CSS Comb)

hexasquid 13y ago
It seems to work okay on SCSS files, although I can't say if they are officially supported or not.

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...)

justif 13y ago

Shame it doesn't support minimal syntax preprocessors like Stylus still.

iambateman 13y ago

Does this make a difference at all? I've never heard arguments for CSS ordering as a performance issue. It seems like removing CSS that doesn't do anything would be time better spent.

talmand 13y ago
There's no performance issue that I'm aware of. This is simply about coding style and an easy way to maintain it. The home page has a link to a Smashing Magazine article discussing this. In short, easy way to maintain coding style in a team environment.