Посмотрел видео о классах "CSS - Who Wins?", а перед этим задумался об инструментах для CSS

Если стиль блока включает несколько классов, то какие "главнее"? Когда порядок объявления стилей в css файлах второстепенен? Эти вопросы особенно важны, когда у элемента разметки много классов (BEM). Как лучше использовать префиксы, оптимизаторы, json2html, Map HTML to JSON, beautifytools, CSS Optimizer, What is Modernizr? Best Free CSS Optimization Tools to Tune up Your Site, Bootstrap wrapper no conflict

jsfiddle.net
an online Playground for Sass.js](http://sass.js.org/) - есть имитация файловой системы
sassmeister.com - есть окно HTML
smacss.com Module Rules As briefly mentioned in the previous section, a Module is a more discrete component of the page
Online CSSO (CSS Optimizer) ...try out CSSO right in your browser (web interface)
CSS Optimizer CSSO (CSS Optimizer) is a CSS minifier. It performs three sort of transformations: cleaning (removing redundant), compression (replacement for shorter form) and restructuring (merge of declarations, rulesets and so on). As a result your CSS becomes much smaller.
CSS codebeautifier.com
beautifytools.com HTML To JSON Converter
json2html is an open source javascript library that uses JSON templates to convert JSON objects to HTML.
Map HTML to JSON

Is there any ready to use Bootstrap css file with prefix
Both Less and Sass support namespacing How to namespace Twitter Bootstrap so styles don't conflict
css-prefix.com Batch add any prefix to your CSS rules and class names
Bootstrap wrapper no conflict - Wrap Bootstrap v3.3.6 CSS inside a div with the class .bootstrap-wrapper
Best Free CSS Optimization Tools to Tune up Your Site
JavaScript to test each CSS class on a page and report which are hindering performance
Top 20 Resources to Build a Powerful Site
All You Need to Know When Working with Remote Developers FREE eCommerce Platform
A Sass library for creating flexible CSS transitions and animations MOTION UI
What is Modernizr? Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers. Rather than blacklisting entire ranges of browsers based on “UA sniffing,” Modernizr uses feature detection to allow you to easily tailor your user's experiences based on the actual capabilities of their browser.

В видео "CSS - Who Wins?" автор рассуждает о шести "правилах"¶

1. Default
2. Inheritance

3. Order

4. Speсification

5. Inline style

6. !Important

Вызывает сомнение пункт 4. Я проверил, да, составные цепочки "побеждают" порядок объявления стилей...

In [2]:

%%html
<style>
.red{
  background:red;
}
/* объявлен раньше, чем класс .blue */
.wrapper .blue {
  background:red;
}

.blue{
  background:blue;
}
</style>

<div class="wrapper">
<h3>First</h3> 
<span class="blue">class blue</span>
<span class="red">class red</span>  
</div>

<span class="blue">class blue</span>

First

class blue class red

class blue

И это логично, но как быть в такой ситуации

In [4]:

%%html
<span class="blue red">class ???</span>
<span class="red blue">class ???</span>

class ??? class ???

Снова работает последовательность (порядок) объявления стилей.

Все почти очевидно, но не так все просто, есть еще вот такие приемы:

Пробелы в строках таблиц стилей и в разметке¶

Оказывается, что если описать в таблице стиль так .pod.pod-callout (без пробела), то он будет присвоен элементу с классом class="pod pod-callout" (

In [9]:

%%html
<style>
  .pod-callout {
  background:green;
  }
  
 /*классы без пробела присваиваются блоку с class="pod pod-callout"*/
 .pod.pod-callout {
  background:blue;
  }
  /*классы без пробела присваиваются блоку с class="pod pod-callout last */
  /* Первый класс "pod" (из трех) игнорируется !!!*/  
  .pod-callout.last {
  background:orange;
  }
 
  /*В HTML разметке два блока, у каждого один стиль*/
  .pod1 .pod-callout {
  background:red;
  }

/*Самое неспицифицированное, не переопределяет предыдущие*/ 
/* Даже вслучае class="pod pod-callout last" см. чуть выше */
.pod, .pod1 {
  background:yellow;
  }
</style>

<div class="pod pod-callout">class="pod  pod-callout"           -> css rule ".pod.pod-callout"</div>
<div class="pod pod-callout last">class="pod  pod-callout  last" -> css rule ".pod-callout.last"</div>

<div class="pod">
  <div class="pod-callout">Class "pod-callout" into "pod"       -> css rule ".pod-callout"</div>
</div>
<div class="pod1">
  <div class="pod-callout">Class "pod-callout" into "pod1"      -> css rule ".pod1 .pod-callout"</div>
</div>
<!-- Побеждает последний объявленный класс, а ен порядок стилей в html разметке -->
<div class="pod1 pod-callout">Class "pod1 pod-callout" into "pod1"      -> css rule ".pod, .pod1"</div>
<div class="pod1-callout pod1">Class "pod-callout pod1" into "pod1"      -> css rule ".pod, .pod1"</div>

class="pod pod-callout" -> css rule ".pod.pod-callout"

class="pod pod-callout last" -> css rule ".pod-callout.last"

Class "pod-callout" into "pod" -> css rule ".pod-callout"

Class "pod-callout" into "pod1" -> css rule ".pod1 .pod-callout"

Class "pod1 pod-callout" into "pod1" -> css rule ".pod1 .pod-callout"

Class "pod-callout pod1" into "pod1" -> css rule ".pod1 .pod-callout"

Новое правило для CSS ?¶

Если в разметке несколько стилей, то можно задать сочетание

In [ ]:

class="pod  pod-callout  last"

вот такой класс в таблице стилей:

In [ ]:

.pod-callout.last {
  background:orange;
  }

Посты чуть ниже также могут вас заинтересовать