Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

shared `stylelint-config-airbnb` #56

Open
wants to merge 21 commits into
base: master
from
Open
Changes from all commits
Commits
File filter...
Filter file types
Jump to鈥
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -0,0 +1,11 @@
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null
@@ -0,0 +1,7 @@
# gitignore

node_modules

# Only apps should have lockfiles
yarn.lock
package-lock.json
1 .npmrc
@@ -0,0 +1 @@
package-lock=false
@@ -0,0 +1,31 @@
language: node_js
node_js:
- "9"
- "8"
- "7"
- "6"
- "5"
- "4"
before_install:
- 'nvm install-latest-npm'
install:
- 'if [ -n "${PACKAGE-}" ]; then cd "packages/${PACKAGE}"; fi'
- 'if [ "${TRAVIS_NODE_VERSION}" = "0.6" ] || [ "${TRAVIS_NODE_VERSION}" = "0.9" ]; then nvm install --latest-npm 0.8 && npm install && nvm use "${TRAVIS_NODE_VERSION}"; else npm install; fi;'
script:
- 'if [ -n "${LINT-}" ]; then npm run lint; else npm run travis; fi'
sudo: false
env:
matrix:
- 'TEST=true PACKAGE=stylelint-config-airbnb'
matrix:
fast_finish: true
include:
- node_js: "lts/*"
env: PACKAGE=stylelint-config-airbnb
- node_js: "lts/*"
env: LINT=true
allow_failures:
- node_js: "9"
- node_js: "7"
- node_js: "5"
- env: PACKAGE=stylelint-config-airbnb
@@ -69,15 +69,15 @@ Finally, properties are what give the selected elements of a rule declaration th

### Formatting

* Use soft tabs (2 spaces) for indentation
* Prefer dashes over camelCasing in class names.
- Use soft tabs (2 spaces) for indentation
- Prefer dashes over camelCasing in class names.
- Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below).
* Do not use ID selectors
* When using multiple selectors in a rule declaration, give each selector its own line.
* Put a space before the opening brace `{` in rule declarations
* In properties, put a space after, but not before, the `:` character.
* Put closing braces `}` of rule declarations on a new line
* Put blank lines between rule declarations
- Do not use ID selectors
- When using multiple selectors in a rule declaration, give each selector its own line.
- Put a space before the opening brace `{` in rule declarations
- In properties, put a space after, but not before, the `:` character.
- Put closing braces `}` of rule declarations on a new line
- Put blank lines between rule declarations

**Bad**

@@ -110,30 +110,30 @@ Finally, properties are what give the selected elements of a rule declaration th

### Comments

* Prefer line comments (`//` in Sass-land) to block comments.
* Prefer comments on their own line. Avoid end-of-line comments.
* Write detailed comments for code that isn't self-documenting:
- Prefer line comments (`//` in Sass-land) to block comments.
- Prefer comments on their own line. Avoid end-of-line comments.
- Write detailed comments for code that isn't self-documenting:
- Uses of z-index
- Compatibility or browser-specific hacks

### OOCSS and BEM

We encourage some combination of OOCSS and BEM for these reasons:

* It helps create clear, strict relationships between CSS and HTML
* It helps us create reusable, composable components
* It allows for less nesting and lower specificity
* It helps in building scalable stylesheets
- It helps create clear, strict relationships between CSS and HTML
- It helps us create reusable, composable components
- It allows for less nesting and lower specificity
- It helps in building scalable stylesheets

**OOCSS**, or 鈥淥bject Oriented CSS鈥, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of 鈥渙bjects鈥: reusable, repeatable snippets that can be used independently throughout a website.

* Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki)
* Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
- Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki)
- Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)

**BEM**, or 鈥淏lock-Element-Modifier鈥, is a _naming convention_ for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.

* CSS Trick's [BEM 101](https://css-tricks.com/bem-101/)
* Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
- CSS Trick's [BEM 101](https://css-tricks.com/bem-101/)
- Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)

We recommend a variant of BEM with PascalCased 鈥渂locks鈥, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.

@@ -164,9 +164,9 @@ function ListingCard() {
.ListingCard__content { }
```

* `.ListingCard` is the 鈥渂lock鈥 and represents the higher-level component
* `.ListingCard__title` is an 鈥渆lement鈥 and represents a descendant of `.ListingCard` that helps compose the block as a whole.
* `.ListingCard--featured` is a 鈥渕odifier鈥 and represents a different state or variation on the `.ListingCard` block.
- `.ListingCard` is the 鈥渂lock鈥 and represents the higher-level component
- `.ListingCard__title` is an 鈥渆lement鈥 and represents a descendant of `.ListingCard` that helps compose the block as a whole.
- `.ListingCard--featured` is a 鈥渕odifier鈥 and represents a different state or variation on the `.ListingCard` block.

### ID selectors

@@ -203,14 +203,15 @@ Use `0` instead of `none` to specify that a style has no border.
border: 0;
}
```

**[猬 back to top](#table-of-contents)**

## Sass

### Syntax

* Use the `.scss` syntax, never the original `.sass` syntax
* Order your regular CSS and `@include` declarations logically (see below)
- Use the `.scss` syntax, never the original `.sass` syntax
- Order your regular CSS and `@include` declarations logically (see below)

### Ordering of property declarations

@@ -226,7 +227,7 @@ Use `0` instead of `none` to specify that a style has no border.
}
```

2. `@include` declarations
1. `@include` declarations

Grouping `@include`s at the end makes it easier to read the entire selector.

@@ -239,7 +240,7 @@ Use `0` instead of `none` to specify that a style has no border.
}
```

3. Nested selectors
1. Nested selectors

Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors.

@@ -283,10 +284,9 @@ Mixins should be used to DRY up your code, add clarity, or abstract complexity--

When selectors become this long, you're likely writing CSS that is:

* Strongly coupled to the HTML (fragile) *鈥擮R鈥*
* Overly specific (powerful) *鈥擮R鈥*
* Not reusable

- Strongly coupled to the HTML (fragile) *鈥擮R鈥*
- Overly specific (powerful) *鈥擮R鈥*
- Not reusable

Again: **never nest ID selectors!**

@@ -0,0 +1,154 @@
{
"comment": "Be explicit by listing every available rule. https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md",
"comment": "Note that there will be numeric gaps, not every MD number is implemented in markdownlint.",

"comment": "MD001: Header levels should only increment by one level at a time",
"header-increment": true,

"comment": "MD002: First header should be a top level header",
"first-header-h1": true,

"comment": "MD003: Header style: start with hashes",
"header-style": {
"style": "atx"
},

"comment": "MD004: Unordered list style",
"ul-style": {
"style": "dash"
},

"comment": "MD005: Consistent indentation for list items at the same level",
"list-indent": true,

"comment": "MD006: Consider starting bulleted lists at the beginning of the line",
"ul-start-left": false,

"comment": "MD007: Unordered list indentation: 2 spaces",
"ul-indent": {
"indent": 2
},

"comment": "MD009: Disallow trailing spaces",
"no-trailing-spaces": {
"br-spaces": 0,
"comment": "Empty lines inside list items should not be indented",
"list_item_empty_lines": false
},

"comment": "MD010: No hard tabs, not even in code blocks",
"no-hard-tabs": {
"code_blocks": true
},

"comment": "MD011: Prevent reversed link syntax",
"no-reversed-links": true,

"comment": "MD012: Disallow multiple consecutive blank lines",
"no-multiple-blanks": {
"maximum": 1
},

"comment": "MD013: Line length",
"line-length": false,

"comment": "MD014: Disallow dollar signs used before commands without showing output",
"commands-show-output": true,

"comment": "MD018: Disallow space after hash on atx style header",
"no-missing-space-atx": true,

"comment": "MD019: Dissalow multiple spaces after hash on atx style header",
"no-multiple-space-atx": true,

"comment": "MD020: No space inside hashes on closed atx style header",
"no-missing-space-closed-atx": true,

"comment": "MD021: Disallow multiple spaces inside hashes on closed atx style header",
"no-multiple-space-closed-atx": true,

"comment": "MD022: Headers should be surrounded by blank lines",
"comment": "Some headers have preceeding HTML anchors. Unfortunate that we have to disable this, as it otherwise catches a real problem that trips up some Markdown renderers",
"blanks-around-headers": false,

"comment": "MD023: Headers must start at the beginning of the line",
"header-start-left": true,

"comment": "MD024: Disallow multiple headers with the same content",
"no-duplicate-header": true,

"comment": "MD025: Disallow multiple top level headers in the same document",
"comment": "Gotta have a matching closing brace at the end",
"single-h1": false,

"comment": "MD026: Disallow trailing punctuation in header",
"comment": "Gotta have a semicolon after the ending closing brace",
"no-trailing-punctuation": {
"punctuation" : ".,:!?"
},
"comment": "MD027: Dissalow multiple spaces after blockquote symbol",
"no-multiple-space-blockquote": true,

"comment": "MD028: Blank line inside blockquote",
"comment": "Some 'Why?' and 'Why not?' blocks are separated by a blank line",
"no-blanks-blockquote": false,

"comment": "MD029: Ordered list item prefix",
"ol-prefix": {
"style": "one"
},

"comment": "MD030: Spaces after list markers",
"list-marker-space": {
"ul_single": 1,
"ol_single": 1,
"ul_multi": 1,
"ol_multi": 1
},

"comment": "MD031: Fenced code blocks should be surrounded by blank lines",
"blanks-around-fences": true,

"comment": "MD032: Lists should be surrounded by blank lines",
"comment": "Some lists have preceeding HTML anchors. Unfortunate that we have to disable this, as it otherwise catches a real problem that trips up some Markdown renderers",
"blanks-around-lists": false,

"comment": "MD033: Disallow inline HTML",
"comment": "HTML is needed for explicit anchors",
"no-inline-html": false,

"comment": "MD034: No bare URLs used",
"no-bare-urls": true,

"comment": "MD035: Horizontal rule style",
"hr-style": {
"style": "consistent"
},

"comment": "MD036: Do not use emphasis instead of a header",
"no-emphasis-as-header": false,

"comment": "MD037: Disallow spaces inside emphasis markers",
"no-space-in-emphasis": true,

"comment": "MD038: Disallow spaces inside code span elements",
"no-space-in-code": true,

"comment": "MD039: Disallow spaces inside link text",
"no-space-in-links": true,

"comment": "MD040: Fenced code blocks should have a language specified",
"fenced-code-language": true,

"comment": "MD041: First line in file should be a top level header",
"first-line-h1": true,

"comment": "MD042: No empty links",
"no-empty-links": true,

"comment": "MD043: Required header structure",
"required-headers": false,

"comment": "MD044: Proper names should have the correct capitalization",
"proper-names": false
}
@@ -0,0 +1,43 @@
{
"name": "airbnb-style",
"version": "0.0.0",
"description": "A mostly reasonable approach to CSS.",
"main": "index.js",
"scripts": {
"preinstall": "cd packages/stylelint-config-airbnb && npm prune && npm install",
"lint": "markdownlint --config linters/.markdownlint.json README.md packages/stylelint-config-airbnb/README.md",
"pretest": "npm run --silent lint",
"test": "cd packages/stylelint-config-airbnb && npm test",
"pretravis": "npm run --silent lint",
"travis": "cd packages/stylelint-config-airbnb && npm run travis"
},
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/css.git"
},
"keywords": [
"styleguide",
"airbnb",
"css",
"lint",
"stylelint"
],
"author": {
"name": "Stephen Edgar",
"url": "https://twitter.com/netweb"
},
"contributors": [
{
"name": "Christopher Voigt",
"url": "https://twitter.com/chlorophyllkid"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/airbnb/css/issues"
},
"homepage": "https://github.com/airbnb/css",
"devDependencies": {
"markdownlint-cli": "^0.3.1"
}
}
@@ -0,0 +1,3 @@
{
"extends": "airbnb-base"
}
@@ -0,0 +1,2 @@
node_modules
npm-debug.log
ProTip! Use n and p to navigate between commits in a pull request.
You can鈥檛 perform that action at this time.