csswizardry

Vim without NERD tree or CtrlP

I used to use NERD tree for quite a while, then switched to CtrlP for something a little more lightweight. My setup now includes zero file browser or tree view, and instead uses native Vim fuzzy search and auto-directory switching.

Fuzzy Search

There is a super sweet feature in Vim whereby you can fuzzy find your files using **/*, e.g.:

:vs **/*<partial file name><Tab>

csswizardry

Bringing BEM to inuit.css

BEM is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative.

The naming convention follows this pattern:

.block{}
.block__element{}
.block--modifier{}

csswizardry

/* ==========================================================================
   COMPILED EXAMPLE
   ========================================================================== */

/**
 * This is one example I picked from the project; there are plenty more like it.
 */

csswizardry

Given the following dataset:

Run 1 Run 2 Run 3 Run 4 Run 5
1.991 1.871 1.885 2.007 2.114
2.009 2.211 2.199 2.281 2.094
2.018 2.091 2.115 2.241 2.020
2.782 2.105 2.506 2.660 2.273
1.501 1.885 1.921 1.235 1.873

csswizardry

/**
 * Tier 1 – Dotted
 */
* { outline: 2px dotted purple; }
* * { outline: 2px dotted blue; }
* * * { outline: 2px dotted green; }
* * * * { outline: 2px dotted yellow; }
* * * * * { outline: 2px dotted orange; }
* * * * * * { outline: 2px dotted red; }

csswizardry

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$spacing-unit: 24px;

$spacing-unit-tiny:  round(0.25 * $spacing-unit);
$spacing-unit-small: round(0.5  * $spacing-unit);
$spacing-unit-large: round(2    * $spacing-unit);

csswizardry

I received this email from someone in response to my Code smells in CSS article in which I advocate the use of classes over not doing (you will need to read the article for full context).

Below is that email conversation, with names removed:

Hiya Harry,

Just wanted to drop you a line to say hi really as I am a fan of your work. I loved your talk about Big CSS, I even made my whole team watch it so they could learn a thing or two.

I have just read your latest blog article "Code Smells..." great stuff in there, some of which I am still guilty of even now. Generally I do try and make all my CSS as robust as it can be though. At my work I am the only one that takes things like HTML, CSS, JS seriously, it gets hard to try and pass on the enthusiasm for great sites onto other members of the team. I will be making them read this post aswell so thanks ;-) >>

csswizardry

This post has moved

I published this email exchange as a full post at csswizardry.com/…/can-css-be-too-modular.

csswizardry

<ul class="o-list-fit  c-nav-primary">
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">The workshop</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">2013 Schedule</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link  is-current">About CSS Wizardry</a>
  </li>

csswizardry

<p class="foo">Lorem <span class="foo__bar">ipsum dolor</span> sit amet.</p>

<p>Lorem <span class="foo__bar">ipsum dolor</span> sit amet.</p>