Issue 4155 - Created global csscomb config

.csscomb.json

Index: .csscomb.json
===================================================================
new file mode 100755
--- /dev/null
+++ b/.csscomb.json
@@ -0,0 +1,327 @@
+{

[Thomas Greiner, 2016/09/16 12:47:03]

I'd suggest adding "lines-between-rulesets".

[juliandoucette, 2016/09/16 16:32:27]

This property was added after this config was created.

I agree.

+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "double",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": "\n",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": "\n",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": 2,
+  "sort-order-fallback": "abc",
+  "sort-order": [

[Thomas Greiner, 2016/09/16 12:47:02]

Our coding style only cares about the order of groups of properties, not of each
individual property (see
https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/...).
We agreed on that to keep the ordering of properties simple but still somewhat
organized.

Therefore let's use CSScomb's other accepted value instead: "{Array} of arrays
of rules for groups separation" (see
https://github.com/csscomb/csscomb.js/blob/dev/doc/options.md#sort-order).

[juliandoucette, 2016/09/16 16:32:27]

I think you or I may be misinterpreting what {Array} of array does here. The
**only** thing that {Array} of arrays seems to do is automatically add newlines
between the properties that are separated by array. (That is why I changed the
value from Array:array to Array:string in my last changeset.)

[Thomas Greiner, 2016/09/16 17:39:29]

Ah, I see, my bad.

Regarding using a linter or a beautifier, I'd prefer educating the developer on
how code should look like with the help of a linter to avoid dependence on
specific tools. This might especially be useful if you want to contribute to
other projects where you don't have such tools in place.

Anyway, if you still think that a beautifier provides enough value, maybe best
to open a separate discussion since such a decision might affect other
developers as well in the future.

+    "display",
+    "position",
+    "z-index",
+    "top",
+    "right",
+    "bottom",
+    "left"
+    "visibility",
+    "float",
+    "clear",
+    "overflow",
+    "overflow-x",
+    "overflow-y",
+    "-ms-overflow-x",

[Thomas Greiner, 2016/09/16 12:47:02]

Vendor-prefixed properties should be overridden by their standardized versions,
not the other way around. This is consistent with how we've been doing it so far
and allows us to remove them later on without breaking anything.

Note that I'm not even sure whether we should include vendor-prefixed properties
in here. There might be situtations where changing the order could be necessary
due to differing behaviors. But I'll leave that up to you.

[juliandoucette, 2016/09/16 16:32:27]

I agree. 

PS: Like I said, this is the default "yandex" config. I chose this config
because it was the closest to ours. I did not change it until my last changeset
where I removed the Array:arrays and display order. 

[juliandoucette, 2016/09/16 16:43:01]

To clarify: 

I'm talking about the sort-order value. Not the whole config.

See: https://github.com/csscomb/csscomb.js/tree/dev/config

[Thomas Greiner, 2016/09/16 17:39:29]

Yes, but I don't think we should enforce something yet that doesn't match our
coding style. That could easily lead to confusion and inconsistencies.

So thanks for making the changes.

Generally, if you want to tackle it quickly and iterate on it over time, I guess
starting from nothing and building it up piece by piece appears more reliable
than doing it the other way around.

+    "-ms-overflow-y",
+    "-webkit-overflow-scrolling",
+    "clip",
+    "zoom",
+    "flex-direction",
+    "flex-order",
+    "flex-pack",
+    "flex-align"
+    "-webkit-box-sizing",
+    "-moz-box-sizing",
+    "box-sizing",
+    "width",
+    "min-width",
+    "max-width",
+    "height",
+    "min-height",
+    "max-height",
+    "margin",
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+    "padding",
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left"
+    "table-layout",
+    "empty-cells",
+    "caption-side",
+    "border-spacing",
+    "border-collapse",
+    "list-style",
+    "list-style-position",
+    "list-style-type",
+    "list-style-image"
+    "content",
+    "quotes",
+    "counter-reset",
+    "counter-increment",
+    "resize",
+    "cursor",
+    "-webkit-user-select",
+    "-moz-user-select",
+    "-ms-user-select",
+    "user-select",
+    "nav-index",
+    "nav-up",
+    "nav-right",
+    "nav-down",
+    "nav-left",
+    "-webkit-transition",
+    "-moz-transition",
+    "-ms-transition",
+    "-o-transition",
+    "transition",
+    "-webkit-transition-delay",
+    "-moz-transition-delay",
+    "-ms-transition-delay",
+    "-o-transition-delay",
+    "transition-delay",
+    "-webkit-transition-timing-function",
+    "-moz-transition-timing-function",
+    "-ms-transition-timing-function",
+    "-o-transition-timing-function",
+    "transition-timing-function",
+    "-webkit-transition-duration",
+    "-moz-transition-duration",
+    "-ms-transition-duration",
+    "-o-transition-duration",
+    "transition-duration",
+    "-webkit-transition-property",
+    "-moz-transition-property",
+    "-ms-transition-property",
+    "-o-transition-property",
+    "transition-property",
+    "-webkit-transform",
+    "-moz-transform",
+    "-ms-transform",
+    "-o-transform",
+    "transform",
+    "-webkit-transform-origin",
+    "-moz-transform-origin",
+    "-ms-transform-origin",
+    "-o-transform-origin",
+    "transform-origin",
+    "-webkit-animation",
+    "-moz-animation",
+    "-ms-animation",
+    "-o-animation",
+    "animation",
+    "-webkit-animation-name",
+    "-moz-animation-name",
+    "-ms-animation-name",
+    "-o-animation-name",
+    "animation-name",
+    "-webkit-animation-duration",
+    "-moz-animation-duration",
+    "-ms-animation-duration",
+    "-o-animation-duration",
+    "animation-duration",
+    "-webkit-animation-play-state",
+    "-moz-animation-play-state",
+    "-ms-animation-play-state",
+    "-o-animation-play-state",
+    "animation-play-state",
+    "-webkit-animation-timing-function",
+    "-moz-animation-timing-function",
+    "-ms-animation-timing-function",
+    "-o-animation-timing-function",
+    "animation-timing-function",
+    "-webkit-animation-delay",
+    "-moz-animation-delay",
+    "-ms-animation-delay",
+    "-o-animation-delay",
+    "animation-delay",
+    "-webkit-animation-iteration-count",
+    "-moz-animation-iteration-count",
+    "-ms-animation-iteration-count",
+    "-o-animation-iteration-count",
+    "animation-iteration-count",
+    "-webkit-animation-iteration-count",
+    "-moz-animation-iteration-count",
+    "-ms-animation-iteration-count",
+    "-o-animation-iteration-count",
+    "animation-iteration-count",
+    "-webkit-animation-direction",
+    "-moz-animation-direction",
+    "-ms-animation-direction",
+    "-o-animation-direction",
+    "animation-direction",
+    "text-align",
+    "-webkit-text-align-last",
+    "-moz-text-align-last",
+    "-ms-text-align-last",
+    "text-align-last",
+    "vertical-align",
+    "white-space",
+    "text-decoration",
+    "text-emphasis",
+    "text-emphasis-color",
+    "text-emphasis-style",
+    "text-emphasis-position",
+    "text-indent",
+    "-ms-text-justify",
+    "text-justify",
+    "text-transform",
+    "letter-spacing",
+    "word-spacing",
+    "-ms-writing-mode",
+    "text-outline",
+    "text-transform",
+    "text-wrap",
+    "text-overflow",
+    "-ms-text-overflow",
+    "text-overflow-ellipsis",
+    "text-overflow-mode",
+    "-ms-word-wrap",
+    "word-wrap",
+    "word-break",
+    "-ms-word-break",
+    "-moz-tab-size",
+    "-o-tab-size",
+    "tab-size",
+    "-webkit-hyphens",
+    "-moz-hyphens",
+    "hyphens",
+    "pointer-events"
+    "opacity",
+    "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",

[Thomas Greiner, 2016/09/16 12:47:02]

I noticed that those IE-specific properties are spread all over while I didn't
find the to-be-standardized "filter" property anywhere (see
https://developer.mozilla.org/en-US/docs/Web/CSS/filter) with which we could
group them together.

[Thomas Greiner, 2016/09/16 12:47:03]

Isn't the property name just "filter"?

[juliandoucette, 2016/09/16 16:32:27]

See the "PS:" from my comment above.

I think that we should probably remove all proprietary properties from this list
- Since we generally discourage their use
- In favour of graceful degradation, by design

[juliandoucette, 2016/09/16 16:43:01]

In favour of progressive enhancement, by design*

[Thomas Greiner, 2016/09/16 17:39:30]

Agreed.

+    "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+    "-ms-interpolation-mode",
+    "color",
+    "border",
+    "border-collapse",
+    "border-width",
+    "border-style",
+    "border-color",
+    "border-top",
+    "border-top-width",
+    "border-top-style",
+    "border-top-color",
+    "border-right",
+    "border-right-width",
+    "border-right-style",
+    "border-right-color",
+    "border-bottom",
+    "border-bottom-width",
+    "border-bottom-style",
+    "border-bottom-color",
+    "border-left",
+    "border-left-width",
+    "border-left-style",
+    "border-left-color",
+    "-webkit-border-radius",
+    "-moz-border-radius",
+    "border-radius",
+    "-webkit-border-top-left-radius",
+    "-moz-border-radius-topleft",
+    "border-top-left-radius",
+    "-webkit-border-top-right-radius",
+    "-moz-border-radius-topright",
+    "border-top-right-radius",
+    "-webkit-border-bottom-right-radius",
+    "-moz-border-radius-bottomright",
+    "border-bottom-right-radius",
+    "-webkit-border-bottom-left-radius",
+    "-moz-border-radius-bottomleft",
+    "border-bottom-left-radius",
+    "-webkit-border-image",
+    "-moz-border-image",
+    "-o-border-image",
+    "border-image",
+    "-webkit-border-image-source",
+    "-moz-border-image-source",
+    "-o-border-image-source",
+    "border-image-source",
+    "-webkit-border-image-slice",
+    "-moz-border-image-slice",
+    "-o-border-image-slice",
+    "border-image-slice",
+    "-webkit-border-image-width",
+    "-moz-border-image-width",
+    "-o-border-image-width",
+    "border-image-width",
+    "-webkit-border-image-outset",
+    "-moz-border-image-outset",
+    "-o-border-image-outset",
+    "border-image-outset",
+    "-webkit-border-image-repeat",
+    "-moz-border-image-repeat",
+    "-o-border-image-repeat",
+    "border-image-repeat",
+    "outline",
+    "outline-width",
+    "outline-style",
+    "outline-color",
+    "outline-offset",
+    "background",
+    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+    "background-color",
+    "background-image",
+    "background-repeat",
+    "background-attachment",
+    "background-position",
+    "background-position-x",
+    "-ms-background-position-x",
+    "background-position-y",
+    "-ms-background-position-y",
+    "-webkit-background-clip",
+    "-moz-background-clip",
+    "background-clip",
+    "background-origin",
+    "-webkit-background-size",
+    "-moz-background-size",
+    "-o-background-size",
+    "background-size",
+    "box-decoration-break",
+    "-webkit-box-shadow",
+    "-moz-box-shadow",
+    "box-shadow",
+    "-webkit-box-shadow",
+    "-moz-box-shadow",
+    "box-shadow",
+    "-webkit-box-shadow",
+    "-moz-box-shadow",
+    "box-shadow",
+    "-webkit-box-shadow",
+    "-moz-box-shadow",
+    "box-shadow",
+    "filter:progid:DXImageTransform.Microsoft.gradient",
+    "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+    "text-shadow"
+    "font",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "font-style",
+    "font-variant",
+    "font-size-adjust",
+    "font-stretch",
+    "font-effect",
+    "font-emphasize",
+    "font-emphasize-position",
+    "font-emphasize-style",
+    "font-smooth",
+    "line-height"
+  ]
+}