Deprecated: Hook custom_css_loaded is deprecated since version jetpack-13.5! Use WordPress Custom CSS instead. Jetpack no longer supports Custom CSS. Read the documentation to learn how to apply custom styles to your site: in /home/members/lnfnmo/sites/ on line 6078
Sassy WordPress and some updates - Lara L. Schenck

Sassy WordPress and some updates

A recap of my talk “Sassy WordPress” along with some updates I’ll add should I give the talk again.


I gave a talk at WordCamp Montreal last fall called “Sassy WordPress”:

I’d explain a few things differently now (which I will be June 16th at the NYC WordPress Meetup, actually). Everything goes from “do this” to “don’t do this” pretty quickly, and you learn a lot in six months. Anyhow, here are some updates and an opinionated take on the word “module”.

Good ‘ol @extend

I talk about @extend like it’s super cool and now I don’t think it’s so cool (err…at least Harry and Hugo said it’s not). On CSS-Wizardy, Harry says:

…I would generally advise never to use @extend at all. It is something of a Fool’s Gold: a feature with a lot of promise and twice as many caveats.

If you are definitely, completely set on using @extend:

1. Please reconsider.
2. Use the placeholder hack.
3. Keep an eye on your output.

For what it’s worth, that and Hugo’s article came out after my talk but…yeah. In Sassy WordPress 2.0, @extend will accompanied by a heavy warning, and a big note that gzip got yo’ back.

Nesting and the Inception Rule

At about 7:03 I saw myself violate the three-deep nesting rule, a.k.a. the Inception Rule, and my current self was mortified. Well, I think the example I showed, the nav>ul>li>a>&:hover conundrum, could an acceptable case for violating that rule, but I’ll make a specific point to talk about not nesting just because you can next time.

Modules, meh.

Here’s a dictionary definition because, why not:

… a set of standardized parts or independent units that can be used to construct a more complex structure, such as an item of furniture or a building.

…an independent self-contained unit of a spacecraft.

I mean, I’m down with spacecrafts, but either way that’s vague. In my talk I described “modules” as the Sass that doesn’t compile, or functionality that is abstracted from actual content e.g. a settings file, mixins, and extends (gasp!). That sounds incorrect to me now, I’d say “modules” are styles directly applied to markup around a specific component, not abstracted. I call the abstracted breed of partials “config” these days.

Both probably work. It’s a confusing buzzword I think we can quash. I’m into “blocks” these days…not much better, but c’mon, naming things is hard.

Starter Themes (I’m a fair-weather friend)

I mention the starter theme Roots (now called Sage) a couple of times – I was pretty into it at the time as these were my pre-Timber days. It does some cool stuff, but at the end of the day it’s Bootstrap, unless you rip it out (which I did). That’s not a great solution. So, no more Roots/Sage for me, but if you are hung up on Boostrap and looking for a great starter theme, go for it. I do need to dig into Bedrock soon though.

I now point people to Underscores or Bones (which it is near and dear to my heart). If you want to take it next level though, it’s all about Timber, baby.