csswizardry

<section class="sub-content">
  <p>Lorem ipsum dolor.</p>
  <div class="refactored-component">
    Foo Bar Baz
  </div>
  <p>Lorem ipsum dolor.</p>
</section>

csswizardry

<section class="sub-content">
  <p>Lorem ipsum dolor.</p>
  <div class="refactored-component">
    Foo Bar Baz
  </div>
  <p>Lorem ipsum dolor.</p>
</section>

csswizardry

<section class="foo">
  foo
</section>

csswizardry

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// carousel.less
.carousel {
  size: medium;
  
  .page--home & {

csswizardry

<div class="search">

  <ul class="search__foo">
    <li>A</li>
    <li>B</li>
    <li class="hidden-lap-and-up">C</li>
    <li class="hidden-lap-and-up">D</li>
    <li class="hidden-lap-and-up">E</li>
  </ul>

csswizardry

<div class="search">

  <ul class="search__links  search__left">
    <li class="search__link">A</li>
    <li class="search__link">B</li>
    <li class="search__link  hidden-lap-and-up">C</li>
    <li class="search__link  hidden-lap-and-up">D</li>
    <li class="search__link  hidden-lap-and-up">E</li>
  </ul>

csswizardry

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

/**
 * Accordion component with stateful naming.
 */
.accordion {
  foo: bar;

csswizardry

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// Config and setup.
$config: (
  client: Sothebys,
  project: sothebys-realty,
  theme: dark,

csswizardry

<!--
  - Styled directly.
  -->
<p class="u-color-world">Lorem ipsum dolor sit amet.</p>

<p class="u-color-politics">Lorem ipsum dolor sit amet.</p>

<p class="u-color-tech">Lorem ipsum dolor sit amet.</p>

<p class="u-color-entertainment">Lorem ipsum dolor sit amet.</p>

csswizardry

<div class="box"><a href="#0" class="btn">Foo</a></div>

<p class="foo" id="foo">Lorem ipsum</p>