standardcss | DEPRECATED

This project is deprecated in favour of stylelint-config-visionapps.

##CSS Standard Style

###Rules

1. Use 4 spaces for indentation.

  h1 {
      color: lime;
  }

2. Use single quotes.

  h1:after {
      content: ' ';
  }

3. Write urls without quotes.

  div {
      background-image: url(background.jpg);
  }

4. In attribute selectors, enclose attribute value in quotes.

  a[target='_blank'] {
      color: lime;
  }

5. Don’t select via IDs.

  // ✓ ok 
  .element {
      color: lime;
  }

  // ✗ avoid 
  #element {
      color: lime;
  }

6. Add a space after selector.

  // ✓ ok 
  h1 {
      color: lime;
  }

  // ✗ avoid 
  h1{
      color: lime;
  }

7. Add a space after property name.

  // ✓ ok 
  h1 {
      color: lime;
  }

  // ✗ avoid 
  h1 {
      color:lime;
  }

8. Commas should have a space after them.

  p {
      font-family: 'Times New Roman', Times, serif;
  }

9. Add a semicolon after every declaration.

  h1 {
      color: lime;
      text-align: center // ✗ avoid 
  }

10. Put each declaration on a line.

  h1 {
      color: lime;text-align: center; // ✗ avoid
  }

11. Put multiple values on one line each.

  h1,
  h2,
  h3 {
      color: lime;
  }

12. Always put a blank line between rules.

  // ✓ ok 
  h1 {
      color: lime;
  }

  p {
      font-family: 'Times New Roman', Times, serif;
  }

  // ✗ avoid
  h1 {
      color: lime;
  }
  p {
      font-family: 'Times New Roman', Times, serif;
  }

13. Multiple blank lines are not allowed.

  // ✓ ok 
  h1 {
      color: lime;
  }

  p {
      font-family: 'Times New Roman', Times, serif;
  }

  // ✗ avoid
  h1 {
      color: lime;
  }


  p {
      font-family: 'Times New Roman', Times, serif;
  }

Implementation with Stylelint, PostCSS and Grunt

We are using stylelint for easiest implementation of standardcss rules. This linter is powered by PostCSS. In this example we are going to use Grunt, however you can choose any task runner that supports PostCSS.

You need these npm packages: stylelint, grunt, grunt-postcss and if you are using any CSS preprocessor, you might need supporting PostCSS package. In our example postcss-less.

Best practice is to check your CSS before any other tasks process it.

####Installation

1. Install npm packages
2. Include .stylelintrc in the root of your directory
3. Prepare Grunt PostCSS task
4. If you are using preprocessor include it in PostCSS task
5. Add stylelint and postcss-reporter (at least with clearMessages option, but we recommend throwError also)
6. Add other Grunt tasks to process your CSS
7. Lint your CSS!
8. (Optional) Cry over errors and inconsistencies in your stylesheet

lint: {
  options: {
    syntax: require('postcss-less'),
    processors: [
      require('stylelint'),
      require('postcss-reporter')({
        clearMessages: true,
        throwError: true,
      }),
    ],
  },
  src: 'resources/less/**/*.less',
  dest: '.tmp/main.less',
},