Code Style Guide

[sfrisk]

We need this specifically for HTML and CSS, although we already have a CSS style guide (http://contribute.jquery.org/style-guide/css/), and a limited HTML style guide (http://contribute.jquery.org/style-guide/html/) posted on the jQuery website. Are there additional/different style guide guide standards we'll want to enforce?

I'm particularly thinking we might want to flesh out the HTML style guide a bit more than what we currently have. Perhaps create a SCSS style guide, since that seems to be what we'll be using for CSS?

[arschmitz]

I think we will probably just add to the css style guide once we decide on rules for scss. I agree the html style guide could use some work.

[sfrisk]

I have the HTML style guide on my list of things to work on this week/weekend - so if there is anything people know they want to see in the html style guide that is not currently in there, let me know, and I'll create an issue for it in jquery/contribute.jquery.org

[sfrisk]

Related to: jquery/contribute.jquery.org#92

[cbracco]

How do you guys feel about using a linting tool and/or CSSComb to further enforce code styles?

[arschmitz]

@cbracco id say we are in favor on the jQuery side we have this style guide @sfrisk just finished first item is our css lint rules http://contribute.jquery.org/style-guide/css/ I have not looked at cssComb ill check it out.

[sfrisk]

Definitely! We already use CSSLint for other jQuery projects http://contribute.jquery.org/style-guide/css/#linting

[sfrisk]

... oh guess you got to it first, @arschmitz

[arschmitz]

:-p

[cbracco]

I whipped up a CSS code style guide not too long ago, just posting it here for reference in case there is anything we would like to use from it!

https://github.com/cbracco/css-conventions

[cbracco]

We can also include an .editorconfig file to set some sensible tab / spacing defaults for various file types.

http://editorconfig.org/

[jzaefferer]

I'm not sure how the CSSComb integration would look like, since it seems to output code, not just lint it. It also depends on #17. Anyway, here's a potential CSSComb config, created using their generator, which should reflect what's currently in the CSS style guide:

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "double",
    "space-before-colon": " ",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "unitless-zero": true
}

Regarding .editorconfig, we should be able to just copy one from another project, like the one from jQuery UI: https://github.com/jquery/jquery-ui/blob/master/.editorconfig

While at it, add .gitattributes, like this one: https://github.com/jquery/jquery-ui/blob/master/.gitattributes

[cbracco]

These all look good to me!

[arschmitz]

+1 for the .gitattributes and .editorconfig css comb looks good to but as @jzaefferer this would be dependent on a build process

[kborchers]

I just came across this and thought it was worth a read and might be useful http://cssguidelin.es/