To a man with a hammer…
Give a small boy a hammer, and he will find that everything he encounters needs pounding
You’ve no doubt heard variations on this quote many times. Abraham Maslow, he of the hierarchy of needs, is probably the most well known of those who popularised it:
if all you have is a hammer, everything looks like a nail
but it likely dates far further back than that.
We are all guilty of this cognitive bias–we fall back on what we know, what’s to hand even when we know there are better solutions.
A couple of articles I read this week brought the phrase to mind and that broader issue of updating our approaches and practices. After all, the field we work in is constantly changing, and it has since the invention of the Web.
Yet once established, practices and technologies can take years to be supplanted, by often much superior approaches.
Back in the mid to late 1990s as the web began to get a solid hold on the popular imagination the technologies for web design were very primitive, but techniques emerged to make designs more print-like.
One involve using tables to layout pages, and images for text, particularly headings (this is pre CSS, certainly pre widespread and reliable implementation of CSS).
Now this is when network speeds were in the order of kilobits a second, not tens or hundreds of megabits–so thousands or tens of thousands of times slower than today. A 20KB image might take several seconds or longer to download. And you thought flash of unstyled content was an issue? Tables were tricky to mark-up, and even harder to change. Errors were common. And you might imagine how accessible or otherwise these pages were.
But these techniques took root, and took years to undo. A whole cottage industry of ‘image replacement’ techniques emerged, that were still in widespread use a decade or more late.
All because a generation of web designers got really good at slinging the table-based hammer.
Now we might scoff at these rubes from ancient times, but it’s very likely you do something very similar. How long did it take you to adopt flex or grid? How long did you cling fast to your tried and trusted float based layouts?
What relatively recent JavaScript language features have you adopted lately?
Now this is not to argue we should always be embracing whatever the new hotness is for its own sake–David Berber gave a great talk on the pitfalls of Hype Driven Development at Code last year–but nor should we keep wielding our hammer, when other better tools are available.
So maybe it’s time to take an inventory of your approaches to development. And survey what’s happening out there. Here’s a few things to get you thinking about it all.
Old Dogs, new CSS Tricks
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains.
Source: Old Dogs, new CSS Tricks | Max Böck
If you’ve paid any sort of attention lately (or come to one of our conferences) you’ll know that CSS has gained many new features in recent years. But their adoption seems a little less enthusiastic than you might imagine. Max Böck considers why.
Modern CSS Layouts: You Might Not Need A Framework For That
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. But amidst this abundance, the modern CSS features we have today offer simpler and more flexible approaches without the added dependencies or abstractions. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.
Source: Modern CSS Layouts: You Might Not Need A Framework For That
In this piece, Brecht De Ruyte looks at newer CSS features related to layouts, including new features for architecting our CSS, like layers.
Bonus Video: Bramus Van Damme took a detailed look at the then new CSS layers at Hover ’22.
Plus we have a whole raft of CSS layout based presentations at Conffab–most available with just a free membership-you’ve got one right? If not it’s a few seconds to signup.
The wasted potential of CSS attribute selectors
In our preoccupation with classes, it’s easy to think of them as the default selector. Historically, when people have talked about targeting elements by their attributes, it’s been in the context of neat tricks or one liners. You make a mental note to use a[href^=https://specific-domain.com]the next time you want to use pink underlines for each link to one specific domain, and promptly forget about it forever. Or, to give a more practical example, attribute selectors have been recommended as a kind of linter or debugger for invalid HTML (img:not([alt]) { border: 1rem solid red; }).
Source: The wasted potential of CSS attribute selectors by Elise Hein
Class might the original CSS hammer. More than 20 years ago we settled on the pattern of using classes in HTML for styling pages with CSS. From OOCSS to BEM and elsewhere we developed conventions for their use. And let’s not even stat on utility based styling. But perhaps we’ve overlooked at times better ways of doing things, like using the attribute selector (which among other things has lower specificity, even when selecting based on class, and greater flexibility).
CSS Color Modules and Changes, Part I
In this multi-part series for WeblogPoMo2024 I want to cover what I’m learning about the new CSS Color Modules. This will build on and refer to many other articles, posts, and sources out there, and contain my own “tiny page” experiments in subsequent parts of the series.
Source: CSS Color Modules and Changes, Part I
Do you still use hexadecimal for color values? Many of our tools default to it. But color has developed enormously in recent years, so if you’re still thinking in terms of RGB alone, however you express that, there’s some much to explore.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
