blackfalcon

<div class="content-block-alpha">
  <div class="content-cell">
    Words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words words words words words words words words words words words words words words
  </div>
  <div class="content-cell">
    Words words words words words words words words words words words words words words words
  </div>

blackfalcon

.block
  -(1..6).each do |i|
    .element #{i}

blackfalcon

If you haven't heard me talk about the Mountie, then you don't follow along on Twitter.

What is it? Well, it's NOT a reference to the Canadian Mounted Police, at least not in this reference, and it's NOT any reference to any professional wrestler, EVER.

What it IS, is a real genius little device that mounts additional devices such as iPads and iPhones to your laptop. For a professional nomad like myself, this is a MUST HAVE!

Why would you want one?

blackfalcon

<div class="my-selector"></div>

blackfalcon

// ----
// libsass (v3.1.0-beta)
// ----


$map-one: (color: orange, height: 100px);

.block {
  color: map-get($map-one, color);
}

blackfalcon

<div class="base rule">base</div>
<div class="w3c-box-model">w3c</div>
<div class="border-box">border-box</div>
<div class="content-box">content-box</div>
<div class="padding-box">padding-box</div>

blackfalcon

.block
  .cube hello
  .cube world,
  .cube how
  .cube are
  .cube you?

blackfalcon

The point of this test is to easily see how the famed 4096 selector limit really effects your web apps.

There are three parts, the Sass file that will generate the number of selectors needed, the base HTML need to view this in the browser and then run the simple Python server to view this locally.

We have all heard about this, but the use case is confusing and what does IE really consider a 'selector' anyway? In this exercise I confirmed a few suspicions.

How does this test work?

It's pretty simple really. I have a Sass loop that will create a series of nested selectors to render text the color orange. What I did was that the HTML does not represent this specificity, so unless the 4096th rule is read by the browser, the test will have NO style.

blackfalcon

// ----
// libsass (v3.0.1)
// ----

@function get-list-value($list, $place: first) {
  @if $place == first {
    $group: nth($list, 1);
    $first-object: nth($group, 1);

    @return $first-object

blackfalcon

// ----
// libsass (v3.0.1)
// ----

@function get-list-value($list, $place: first) {
  $list-length: length($list);

  @if $place == first {
    $group: nth($list, 1);
    $first-object: nth($group, 1);