Search
Could Grouping HTML Classes Make Them More Readable?
22.4.2019
You can have multiple classes on an HTML element:
<div class="module p-2"></div>
Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:
.module { }
.p-2 { }
const div...
Advanced Tooling for Web Components
22.3.2019
Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, we dove into creating our own custom element....
Styling Based on Scroll Position
7.3.2019
Rik Schennink documents a system for being able to write CSS selectors that style a page when it has scrolled to a certain point. If you're like me, you're already on the lookout for document.addEventListener('scroll' ... and being terrified about performance. Rik gets to that right away by both...
Text Wrapping & Inline Pseudo Elements
27.2.2019
I love posts like this. It's just about adding a little icon to the end of certain links, but it ends up touching on a million things along the way. I think this is an example of why some people find front-end fun and some people rather dislike it.
Things involved:
Cool [attribute] selectors that...
How To Learn CSS
8.1.2019
Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge.
What I would add is that if you really want to learn CSS, give yourself...
CSS Selectors are Conditional Statements
6.12.2018
foo {
}
Programmatically, is:
if (element has a class name of "foo") {
}
Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade.
Jeremy Keith:
If...
Stuff you can do with CSS pointer events
27.7.2018
Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within).
Here's how I reasoned it out to myself:
You know how if...
Unused
11.7.2018
I recently wrote Here’s the thing about "unused CSS" tools, where I tried to enumerate all the challenges any tool would have in finding truly "unused" CSS. The overarching idea is that CSS selectors match elements in the DOM, and those elements in the DOM come from all sorts of places: your static...