Add cssComb configuration

[PierreBrisorgueil]

cssLint alphabetical order :

        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function"

Or css order by default, it's more like CSSComb, by kind of property, or Js beautify ... it's rarely like this. Alphabetical order is recent. If you want to keep this for cssLint, most of the plugin order property like this in alphabetical :

        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "animation-delay",
        "transition-timing-function"

They don't care about prefix, but cssLint do. This will make some warnings. So i suggest to add a cssComb file in order to facilitate the automation of sorting. After some research, it seems to me that cssComb is the most used, and directly included in beautify.

[mleanos]

This seems fine to me. If I'm following the intention here, then it seems like a good idea. And if Beautify is using this cssComb config file internally, then why not use it?

@meanjs/contributors Anyone have input?

[lirantal]

Is this like an .editorconfig but for CSS? it's just a css policy file so I don't see any harm in adding it in as long as it confirms with the current rule syntax we have on our CSS and not going to report a whole lot of issues due to our current CSS files not being in-line with them.

Also, which editor exactly uses this csscomb policy?

[PierreBrisorgueil]

Hum, all editors have beautify i think, so it's probably ok for all, we have three differents editor in my team and it's ok for everybody.

When we use new properties we must add them to the file .csscomb.json But the principal is there, it just lacks some annimations, or flex properties

But if you want to continue using this order of cssLint, this is making it much easier for us to have a file used by everyone :). You save, and it put the same indentation / order automaticly for every one :)

I definitely gave up asking the team to do it line by line when they edit 😄

example with atom :

[simison]

When we use new properties we must add them to the file .csscomb.json But the principal is there, it just lacks some annimations, or flex properties

What happens for missing properties, it just ignores their order or throws an error?

[PierreBrisorgueil]

.users .user-profile-picture {
  background: #dedede;
  height: 150px;
  width: 150px;

  myNewproperties: none;
}

it will fomat like this, with a line break at the end, and cssLint will show an error because you don't respect alphabetical order ... so you just have to go in .cssComb and add the new property in "sort-order" at the good place.

It's a good thing, because cssComb contain the base today. So it will show you if sometimes you use tricky properties ... which potentially would not be compatible with all explorers

[simison]

@PierreBrisorgueil Thanks for clarifying!

Sorry I'm just firing questions but I would like to understand this tool and implications. :-)

Would this work well together with less and sass files? I actually only now realised mean.js doesn't have less/sass files anymore out of the box, but I guess we should still assume that's what people work with when they actually start working on meanjs frontend.

E.g. what happens if I write in less file:

.avatar {
  .square(150px);
}

Also it's worth mentioning that this isn't CSS we should be writing:

.social-button {
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

But you'd write it like this:

.social-button {
  transition-duration: 0.4s;
}

...and autoprefixer should take care of the rest. But maybe that doesn't matter in this context?

Going to 2017, lack of flex properties is bothering me a little bit as well. That would've been fine year/two ago I guess but now I feel that it should be at least PR for this soon enough, if not in this PR.

[PierreBrisorgueil]

Hello @simison, sorry for the delay !

Yes no worries with the files less and sass, I use it today on our beginning of stack angular 2 with scss

This will rank the sub options, it is the work of cssComb, I just provide the order in this PR :)

No worries with autoprefixer i think, you trigger the sort when you wish :) so this can be after the generation.

I did not understand your point on flex :)!

[lirantal]

I'm not much into adding another tooling that might get deprecated and we need to exchange for something else. Moreover, it's a matter of opinion and people might have different opinions on CSS ruling.

I do see the value in this for the community but I think it probably belongs in a wiki documentation and not as part of the repo.

Regardless, appreciate your effort @PierreBrisorgueil and would love to see more PRs!

[PierreBrisorgueil]

Hum okok, maybe not important for mean, but for projects that use mean with different developers, so in the wiki.

@lirantal I saw this as the rules of csslint, as eslint :)

[lirantal]

Yep, but thanks and I totally appreciate your PR. Please don't be shy to open more in the future.
I'm not sure if you have access to the wiki or we need to explicitly provide it but let me know.