Start the switch to BEM

This is inspired by https://github.com/ivaynberg/select2/issues/2826
and starts the general transition to using selectors with a lower
specificity. This should make it considerably easier to override
the styles in the long run.

Unfortunately libsass does not support the SASS 3.3 style for BEM
where we can just use `&__m` for defining sub-modules. For now we
are still using a limited amount of nesting, but nowhere near as
much as we did in the past.

dist/css/select2.css

@@ -5,14 +5,14 @@
   position: relative;
   vertical-align: middle; }
 
-.select2-container .selection .single-select {
+.select2-selection--single {
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   height: 28px;
   user-select: none;
   -webkit-user-select: none; }
-  .select2-container .selection .single-select .rendered-selection {
+  .select2-selection--single .select2-selection__rendered {
     display: block;
     overflow: hidden;
     padding-left: 8px;
@@ -71,15 +71,16 @@
   border-top-right-radius: 0;
   left: 0; }
 
-.select2-container.select2-theme-default .selection .single-select {
+.select2-container--default .select2-selection--single {
   background-color: #fff;
   border: 1px solid #aaa;
   border-radius: 4px; }
-  .select2-container.select2-theme-default .selection .single-select .rendered-selection {
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: #444;
     line-height: 28px; }
-    .select2-container.select2-theme-default .selection .single-select .rendered-selection .placeholder {
+  .select2-container--default .select2-selection--single .select2-selection__placeholder {
-      color: #999; }
+    color: #999; }
+
 .select2-container.select2-theme-default .selection .multiple-select {
   background-color: white;
   border: 1px solid #aaa;

dist/js/select2.amd.full.js

@@ -724,9 +724,10 @@ define('select2/selection/single',[
 
   SingleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="single-select" tabindex="0" role="combobox" ' +
+      '<span class="select2-selection select2-selection--single" tabindex="0"' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
+        ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
-        '<span class="rendered-selection"></span>' +
+        ' aria-expanded="false">' +
+        '<span class="select2-selection__rendered"></span>' +
       '</span>'
     );
 
@@ -744,7 +745,7 @@ define('select2/selection/single',[
 
     var id = container.id + '-container';
 
-    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.find('.select2-selection__rendered').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
 
     this.$selection.on('mousedown', function (evt) {
@@ -772,7 +773,7 @@ define('select2/selection/single',[
   };
 
   SingleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   SingleSelection.prototype.display = function (data) {
@@ -795,7 +796,7 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.rendered-selection').html(formatted);
+    this.$selection.find('.select2-selection__rendered').html(formatted);
   };
 
   return SingleSelection;
@@ -921,7 +922,8 @@ define('select2/selection/placeholder',[
     var $placeholder = this.selectionContainer();
 
     $placeholder.html(this.display(placeholder));
-    $placeholder.addClass('placeholder').removeClass('choice');
+    $placeholder.addClass('select2-selection__placeholder')
+                .removeClass('select2-selection__choice');
 
     return $placeholder;
   };
@@ -940,7 +942,7 @@ define('select2/selection/placeholder',[
 
     var $placeholder = this.createPlaceholder(this.placeholder);
 
-    this.$selection.find('.rendered-selection').append($placeholder);
+    this.$selection.find('.select2-selection__rendered').append($placeholder);
   };
 
   return Placeholder;
@@ -3366,7 +3368,7 @@ define('select2/core',[
 
     this.$container = $container;
 
-    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+    this.$container.addClass('select2-container--' + this.options.get('theme'));
 
     $container.data('element', this.$element);
 

dist/js/select2.amd.js

@@ -724,9 +724,10 @@ define('select2/selection/single',[
 
   SingleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="single-select" tabindex="0" role="combobox" ' +
+      '<span class="select2-selection select2-selection--single" tabindex="0"' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
+        ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
-        '<span class="rendered-selection"></span>' +
+        ' aria-expanded="false">' +
+        '<span class="select2-selection__rendered"></span>' +
       '</span>'
     );
 
@@ -744,7 +745,7 @@ define('select2/selection/single',[
 
     var id = container.id + '-container';
 
-    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.find('.select2-selection__rendered').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
 
     this.$selection.on('mousedown', function (evt) {
@@ -772,7 +773,7 @@ define('select2/selection/single',[
   };
 
   SingleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   SingleSelection.prototype.display = function (data) {
@@ -795,7 +796,7 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.rendered-selection').html(formatted);
+    this.$selection.find('.select2-selection__rendered').html(formatted);
   };
 
   return SingleSelection;
@@ -921,7 +922,8 @@ define('select2/selection/placeholder',[
     var $placeholder = this.selectionContainer();
 
     $placeholder.html(this.display(placeholder));
-    $placeholder.addClass('placeholder').removeClass('choice');
+    $placeholder.addClass('select2-selection__placeholder')
+                .removeClass('select2-selection__choice');
 
     return $placeholder;
   };
@@ -940,7 +942,7 @@ define('select2/selection/placeholder',[
 
     var $placeholder = this.createPlaceholder(this.placeholder);
 
-    this.$selection.find('.rendered-selection').append($placeholder);
+    this.$selection.find('.select2-selection__rendered').append($placeholder);
   };
 
   return Placeholder;
@@ -3366,7 +3368,7 @@ define('select2/core',[
 
     this.$container = $container;
 
-    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+    this.$container.addClass('select2-container--' + this.options.get('theme'));
 
     $container.data('element', this.$element);
 

dist/js/select2.full.js

@@ -10259,9 +10259,10 @@ define('select2/selection/single',[
 
   SingleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="single-select" tabindex="0" role="combobox" ' +
+      '<span class="select2-selection select2-selection--single" tabindex="0"' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
+        ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
-        '<span class="rendered-selection"></span>' +
+        ' aria-expanded="false">' +
+        '<span class="select2-selection__rendered"></span>' +
       '</span>'
     );
 
@@ -10279,7 +10280,7 @@ define('select2/selection/single',[
 
     var id = container.id + '-container';
 
-    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.find('.select2-selection__rendered').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
 
     this.$selection.on('mousedown', function (evt) {
@@ -10307,7 +10308,7 @@ define('select2/selection/single',[
   };
 
   SingleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   SingleSelection.prototype.display = function (data) {
@@ -10330,7 +10331,7 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.rendered-selection').html(formatted);
+    this.$selection.find('.select2-selection__rendered').html(formatted);
   };
 
   return SingleSelection;
@@ -10456,7 +10457,8 @@ define('select2/selection/placeholder',[
     var $placeholder = this.selectionContainer();
 
     $placeholder.html(this.display(placeholder));
-    $placeholder.addClass('placeholder').removeClass('choice');
+    $placeholder.addClass('select2-selection__placeholder')
+                .removeClass('select2-selection__choice');
 
     return $placeholder;
   };
@@ -10475,7 +10477,7 @@ define('select2/selection/placeholder',[
 
     var $placeholder = this.createPlaceholder(this.placeholder);
 
-    this.$selection.find('.rendered-selection').append($placeholder);
+    this.$selection.find('.select2-selection__rendered').append($placeholder);
   };
 
   return Placeholder;
@@ -12901,7 +12903,7 @@ define('select2/core',[
 
     this.$container = $container;
 
-    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+    this.$container.addClass('select2-container--' + this.options.get('theme'));
 
     $container.data('element', this.$element);
 

dist/js/select2.js

@@ -1152,9 +1152,10 @@ define('select2/selection/single',[
 
   SingleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="single-select" tabindex="0" role="combobox" ' +
+      '<span class="select2-selection select2-selection--single" tabindex="0"' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
+        ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
-        '<span class="rendered-selection"></span>' +
+        ' aria-expanded="false">' +
+        '<span class="select2-selection__rendered"></span>' +
       '</span>'
     );
 
@@ -1172,7 +1173,7 @@ define('select2/selection/single',[
 
     var id = container.id + '-container';
 
-    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.find('.select2-selection__rendered').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
 
     this.$selection.on('mousedown', function (evt) {
@@ -1200,7 +1201,7 @@ define('select2/selection/single',[
   };
 
   SingleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   SingleSelection.prototype.display = function (data) {
@@ -1223,7 +1224,7 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.rendered-selection').html(formatted);
+    this.$selection.find('.select2-selection__rendered').html(formatted);
   };
 
   return SingleSelection;
@@ -1349,7 +1350,8 @@ define('select2/selection/placeholder',[
     var $placeholder = this.selectionContainer();
 
     $placeholder.html(this.display(placeholder));
-    $placeholder.addClass('placeholder').removeClass('choice');
+    $placeholder.addClass('select2-selection__placeholder')
+                .removeClass('select2-selection__choice');
 
     return $placeholder;
   };
@@ -1368,7 +1370,7 @@ define('select2/selection/placeholder',[
 
     var $placeholder = this.createPlaceholder(this.placeholder);
 
-    this.$selection.find('.rendered-selection').append($placeholder);
+    this.$selection.find('.select2-selection__rendered').append($placeholder);
   };
 
   return Placeholder;
@@ -3794,7 +3796,7 @@ define('select2/core',[
 
     this.$container = $container;
 
-    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+    this.$container.addClass('select2-container--' + this.options.get('theme'));
 
     $container.data('element', this.$element);
 

src/js/select2/core.js

@@ -347,7 +347,7 @@ define([
 
     this.$container = $container;
 
-    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+    this.$container.addClass('select2-container--' + this.options.get('theme'));
 
     $container.data('element', this.$element);
 

src/js/select2/selection/placeholder.js

@@ -22,7 +22,8 @@ define([
     var $placeholder = this.selectionContainer();
 
     $placeholder.html(this.display(placeholder));
-    $placeholder.addClass('placeholder').removeClass('choice');
+    $placeholder.addClass('select2-selection__placeholder')
+                .removeClass('select2-selection__choice');
 
     return $placeholder;
   };
@@ -41,7 +42,7 @@ define([
 
     var $placeholder = this.createPlaceholder(this.placeholder);
 
-    this.$selection.find('.rendered-selection').append($placeholder);
+    this.$selection.find('.select2-selection__rendered').append($placeholder);
   };
 
   return Placeholder;

src/js/select2/selection/single.js

@@ -11,9 +11,10 @@ define([
 
   SingleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="single-select" tabindex="0" role="combobox" ' +
+      '<span class="select2-selection select2-selection--single" tabindex="0"' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
+        ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
-        '<span class="rendered-selection"></span>' +
+        ' aria-expanded="false">' +
+        '<span class="select2-selection__rendered"></span>' +
       '</span>'
     );
 
@@ -31,7 +32,7 @@ define([
 
     var id = container.id + '-container';
 
-    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.find('.select2-selection__rendered').attr('id', id);
     this.$selection.attr('aria-labelledby', id);
 
     this.$selection.on('mousedown', function (evt) {
@@ -59,7 +60,7 @@ define([
   };
 
   SingleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   SingleSelection.prototype.display = function (data) {
@@ -82,7 +83,7 @@ define([
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.rendered-selection').html(formatted);
+    this.$selection.find('.select2-selection__rendered').html(formatted);
   };
 
   return SingleSelection;

src/scss/_single.scss

@@ -1,20 +1,18 @@
-.select2-container {
+.select2-selection--single {
-  .selection .single-select {
+  box-sizing: border-box;
-    box-sizing: border-box;
 
-    cursor: pointer;
+  cursor: pointer;
+  display: block;
+
+  height: 28px;
+
+  user-select: none;
+  -webkit-user-select: none;
+
+  .select2-selection__rendered {
     display: block;
-
+    overflow: hidden;
-    height: 28px;
+    padding-left: 8px;
-
+    text-overflow: ellipsis;
-    user-select: none;
-    -webkit-user-select: none;
-
-    .rendered-selection {
-      display: block;
-      overflow: hidden;
-      padding-left: 8px;
-      text-overflow: ellipsis;
-    }
   }
 }

src/scss/theme/default/layout.scss

@@ -1,20 +1,22 @@
-.select2-container.select2-theme-default {
+.select2-container--default {
-  .selection {
+  .select2-selection--single {
-    .single-select {
+    background-color: #fff;
-      background-color: #fff;
+    border: 1px solid #aaa;
-      border: 1px solid #aaa;
+    border-radius: 4px;
-      border-radius: 4px;
 
-      .rendered-selection {
+    .select2-selection__rendered {
-        color: #444;
+      color: #444;
-        line-height: 28px;
+      line-height: 28px;
-
-        .placeholder {
-          color: #999;
-        }
-      }
     }
 
+    .select2-selection__placeholder {
+      color: #999;
+    }
+  }
+}
+
+.select2-container.select2-theme-default {
+  .selection {
     .multiple-select {
       background-color: white;
       border: 1px solid #aaa;