updated css guidelines. removed duplicate linting block

docs/contributing/css_guidelines.rst

@@ -12,50 +12,65 @@ This requires [node.js](http://nodejs.org) to run.
 To install the libraries required for compiling the SCSS,
 run the following from the Wagtail repository root:
 
+.. code-block:: bash
+
     $ npm install
 
+
 To compile the assets, run:
 
+.. code-block:: bash
+
     $ npm run build
 
+
 Alternatively, the SCSS files can be monitored,
 automatically recompiling when any changes are observed, by running:
 
+.. code-block:: bash
+
     $ npm start
 
 
 Linting SCSS
 ~~~~~~~~~~~~
 
-The guidelines are included in a ``.scss-lint.yml`` file so that you can
-check that your code conforms to the style guide.
+Wagtail uses the "scss-lint" Ruby Gem for linting.
 
-Run the linter with ``scss-lint`` from the wagtail project root.
-You'll need to have the linter installed to do this. You can get it by
-running:
+Install it thus:
 
 .. code-block:: bash
 
-    gem install scss-lint
+    $ gem install scss-lint
+
+
+Then run the linter from the wagtail project root:
+
+.. code-block:: bash
+
+    $ scss-lint
+
+The linter is configured to check your code for adherance to the guidelines below, plus a little more.
 
 
 Spacing
-~~~~~~~
+-------
 
 -  Use soft-tabs with a four space indent. Spaces are the only way to
    guarantee code renders the same in any person's environment.
 -  Put spaces after ``:`` in property declarations.
 -  Put spaces before ``{`` in rule declarations.
 -  Put line breaks between rulesets.
--  When grouping selectors, keep individual selectors to a single line.
+-  When grouping selectors, put each selector on its own line.
 -  Place closing braces of declaration blocks on a new line.
 -  Each declaration should appear on its own line for more accurate
    error reporting.
 -  Add a newline at the end of your ``.scss`` files.
 -  Strip trailing whitespace from your rules.
+-  Add a space after the comma, in comma-delimited property values e.g ``rgba()``
 
 Formatting
-~~~~~~~~~~
+----------
 
 -  Use hex color codes ``#000`` unless using ``rgba()`` in raw CSS
    (SCSS' ``rgba()`` function is overloaded to accept hex colors as a
@@ -69,7 +84,7 @@ Formatting
    must explicitly set all the available values.
 
 Sass imports
-~~~~~~~~~~~~
+------------
 
 Leave off underscores and file extensions in includes:
 
@@ -82,7 +97,7 @@ Leave off underscores and file extensions in includes:
     @import 'components/widget'
 
 Pixels vs. ems
-~~~~~~~~~~~~~~
+--------------
 
 Use ``rems`` for ``font-size``, because they offer
 absolute control over text. Additionally, unit-less ``line-height`` is
@@ -90,7 +105,7 @@ preferred because it does not inherit a percentage value of its parent
 element, but instead is based on a multiplier of the ``font-size``.
 
 Specificity (classes vs. ids)
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+-----------------------------
 
 Always use classes instead of IDs in CSS code. IDs are overly specific and lead
 to duplication of CSS.
@@ -123,7 +138,7 @@ specificity as possible. Here is a good example:
     }
 
 Class naming conventions
-~~~~~~~~~~~~~~~~~~~~~~~~
+------------------------
 
 Never reference ``js-`` prefixed class names from CSS files. ``js-`` are
 used exclusively from JS files.
@@ -132,14 +147,14 @@ Use the SMACSS ``is-`` `prefix <https://smacss.com/book/type-state>`__
 for state rules that are shared between CSS and JS.
 
 Misc
-~~~~
+----
 
 As a rule of thumb, avoid unnecessary nesting in SCSS. At most, aim for
 three levels. If you cannot help it, step back and rethink your overall
 strategy (either the specificity needed, or the layout of the nesting).
 
 Examples
-~~~~~~~~
+--------
 
 Here are some good examples that apply the above guidelines:
 
@@ -166,39 +181,3 @@ Here are some good examples that apply the above guidelines:
     .good {
         margin-bottom: 20px;
     }
-
-Vendor prefixes
-~~~~~~~~~~~~~~~
-
-Line up your vendor prefixes.
-
-.. code-block:: scss
-
-    // Example of good prefix formatting practices
-    .styleguide-format {
-        -webkit-transition: opacity 0.2s ease-out;
-           -moz-transition: opacity 0.2s ease-out;
-            -ms-transition: opacity 0.2s ease-out;
-             -o-transition: opacity 0.2s ease-out;
-                transition: opacity 0.2s ease-out;
-    }
-
-Don't write vendor prefixes for ``border-radius``, it's pretty well supported.
-
-If you're unsure, you can always check support at
-`caniuse <http://caniuse.com/>`_
-
-
-Linting SCSS
-~~~~~~~~~~~~
-
-The guidelines are included in a ``.scss-lint.yml`` file so that you can
-check that your code conforms to the style guide.
-
-Run the linter with ``scss-lint .`` from the wagtail project root.
-You'll need to have the linter installed to do this. You can get it by
-running:
-
-.. code-block:: sh
-
-    gem install scss-lint