Change IdWithExtraneousSelector to IdSelector

Rename and modify behavior of linter to always report IDs any time they
appear in a selector, rather than only when they appear concatenated
with a type/class etc.

Change-Id: Ie2bbc54cab25faaef6715c340e8d3798d07bd051
Reviewed-on: http://gerrit.causes.com/44913
Tested-by: jenkins <[email protected]>
Reviewed-by: Shane da Silva <[email protected]>

Author: sds

CHANGELOG.md

@@ -16,6 +16,8 @@
   as they are always hyphenated lowercase
 * Fix `Indentation` to not crash on `@at-root` directives with comments inside
 * Add support for disabling/enabling linters via inline comments
+* Change `IdWithExtraneousSelector` to `IdSelector` and modify behavior to
+  always report a lint when an ID appears as part of a selector.
 
 ## 0.30.0
 

config/default.yml

@@ -52,7 +52,7 @@ linters:
   HexValidation:
     enabled: true
 
-  IdWithExtraneousSelector:
+  IdSelector:
     enabled: true
 
   ImportPath:

lib/scss_lint/linter/README.md

@@ -17,7 +17,7 @@ Below is a list of linters supported by `scss-lint`, ordered alphabetically.
 * [HexLength](#hexlength)
 * [HexNotation](#hexnotation)
 * [HexValidation](#hexvalidation)
-* [IdWithExtraneousSelector](#idwithextraneousselector)
+* [IdSelector](#idselector)
 * [ImportPath](#importpath)
 * [Indentation](#indentation)
 * [LeadingZero](#leadingzero)
@@ -362,37 +362,29 @@ p {
 }
 ```
 
-## IdWithExtraneousSelector
+## IdSelector
 
-Don't combine additional selectors with an ID selector.
+Avoid using ID selectors.
 
-**Bad: `.button` class is unnecessary**
+**Bad: highly-specific styling for a single element via ID**
 ```scss
-#submit-button.button {
+#submit-button {
   ...
 }
 ```
 
-**Good: standalone ID selector**
+**Good: reusable class**
 ```scss
-#submit-button {
+.submit-button {
   ...
 }
 ```
 
 While the CSS specification allows for multiple elements with the same ID to
-appear in a single document, in practice this is a smell.  When
-reasoning about IDs (including selector specificity), it should suffice to
-style an element with a particular ID based solely on the ID.
-
-Another possible pattern is to modify the style of an element with a given
-ID based on the class it has. This is also a smell, as the purpose of a CSS
-class is to be reusable and composable, and thus redefining it for a specific
-ID is a violation of those principles.
-
-Even better would be to
-[never use IDs](http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/)
-in the first place.
+appear in a single document, in practice this is a smell. [ID selectors should
+never be used](http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/) for
+the purposes of styling an element, as it leads to overly specific styles that
+aren't easily shared with other elements.
 
 ## ImportPath
 

lib/scss_lint/linter/id_selector.rb

@@ -0,0 +1,10 @@
+module SCSSLint
+  # Checks for the use of an ID selector.
+  class Linter::IdSelector < Linter
+    include LinterRegistry
+
+    def visit_id(id)
+      add_lint(id, 'Avoid using id selectors')
+    end
+  end
+end

lib/scss_lint/linter/id_with_extraneous_selector.rb

@@ -0,0 +1,62 @@
+require 'spec_helper'
+
+describe SCSSLint::Linter::IdSelector do
+  context 'when rule is a type' do
+    let(:css) { 'p {}' }
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule is an ID' do
+    let(:css) { '#identifier {}' }
+
+    it { should report_lint line: 1 }
+  end
+
+  context 'when rule is a class' do
+    let(:css) { '.class {}' }
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule is a type with a class' do
+    let(:css) { 'a.class {}' }
+
+    it { should_not report_lint }
+  end
+
+  context 'when rule is a type with an ID' do
+    let(:css) { 'a#identifier {}' }
+
+    it { should report_lint line: 1 }
+  end
+
+  context 'when rule is an ID with a pseudo-selector' do
+    let(:css) { '#identifier:active {}' }
+
+    it { should report_lint line: 1 }
+  end
+
+  context 'when rule contains a nested rule with type and ID' do
+    let(:css) { <<-CSS }
+      p {
+        a#identifier {}
+      }
+    CSS
+
+    it { should report_lint line: 2 }
+  end
+
+  context 'when rule contains multiple selectors' do
+    context 'when all of the selectors are just IDs, classes, or types' do
+      let(:css) { <<-CSS }
+        #identifier,
+        .class,
+        a {
+        }
+      CSS
+
+      it { should report_lint line: 1 }
+    end
+  end
+end