Considering the pleasures of CSS Specifications as casual reading
What the hell is this supposed to do?
padding: 3rem 2rem 0;
[attribute^="value"], is one of a set of “attribute substring combinators” (an explanation at MDN) that allow you to use something like a regular expression (it’s not actually a regular expression, just resembles one) to refine a selector. You might wonder, like I did when I first encounntered it, how on earth that could ever be useful.
(read more )
A client recently asked me to modify his Woocommerce checkout process so that if the cart contained one particular product then shipping for the entire order would be restricted to a single option, but if that product was not in the cart then every shipping option except for that one would be available.
A Gist for my solution, modifying the Woocommerce template file
(read more )
cart-shipping.php is at GitHub if you want to get right to work, the rest is mostly me patting myself on the back.
In the past few weeks I’ve been approached, twice, by people obliquely seeking help promoting their sites on search engines. One of then knew enough to call what they wanted “SEO” and they both approached obliquely, though politely, obviously looking for free advice while pretending to inquire about my services and fees. I couldn’t help either of them. SEO is hard and best left to specialists (more below), but that’s not why I couldn’t help. I couldn’t help because in both cases they LAST thing they should have wanted is for a prospective customer to see their website.
(read more )
These tools can lost their edge, though, if we’re asked to add a feature to a site that was built five years ago (or a site that was built yesterday using methods from five years ago), and we might face the prospect of having to revert to what feels like sharpened rocks to get the job done. Revising legacy CSS files is where I first notice great tools becoming irrelevant and where the problem has loomed largest for me, and that’s what I’m going to talk about here.
(read more )
I plan to keep banging this drum — WordPress 5.0 is coming this year, a lot will change, and the big change will be the introduction of a new default editor codenamed “Gutenberg.”
Elsewhere I’ve (hastily) sketched out some things WordPress users should do to prepare for 5.0, here I’m addressing WordPress developers.
Blocks of content entered into a post (keep in mind that everything is a post) via Gutenberg get tagged with a block-specific CSS class, like
.wp-block-cover-image. Default styles for core-blocks are loaded (for now, While we use a plugin) from
somedomain.com/wp-content/plugins/gutenberg/build/core-blocks/style.css, and are loaded before the theme stylesheets. The Gutenberg developers have written well-formed CSS so a theme’s stylesheet overrides the default styles without problems like over-specified selectors or
Much of my work is building custom WordPress themes and the custom themes I make almost always start from Automattic’s Underscores starter-theme. Underscores provides modularized CSS using SASS. Anticipating WordPress 5.0, and for the sites (like this one) that currently use the plugin, I’ve created a collection of SASS files copying the default styles for Gutenberg core blocks, organized according to where the block sits in the editor’s selection dropdown. The files are available on Github.
A developer can incorporate this collection to a theme’s SASS folder for quick availability of the necessary selectors for styling blocks, providing a head-start in matching block styles to the theme.
In addition to the theme styles, there is also a collection of editor-styles in the GitHub project. I don’t want to blab about it here, but with careful development of editor-styles, a theme can come very close to displaying the editor contents just as they will appear on the live site, approaching the What You See Is What You Get promise that no one has ever quite delivered.