CSS (Cascading Style Sheets)
CSS: How to Indicate Container Overflow, When There Is Overflow
You have a block of text that you can’t shorten and yet that you don’t want to give too much space, so as not to draw attention away from other content. It’s useful metadata that you like to show. On a stopgap option using scroll-driven animations.
#107 · · development, design
The CSS Reset Contradiction
Re-publishing my article for SitePoint, discussing what I think we miss in our conversations: Notably, what are the premises for CSS resets? What’s the reality—or are the realities? And, how could we also approach resets?
#106 · · development
HTML/CSS Frameworks, in Their Own Words (by Word Cloud)
Checking in on Bootstrap, Tailwind, Foundation, Bulma, Milligram, Pure, and UIkit.
#105 · · development, html, frameworks
Now Available: “Rote Learning HTML & CSS,” the Most Boring Free Ebook Ever
The book you never thought you wanted. The rough and raw skeleton of HTML and CSS. Elements, attributes, selectors, properties. No explanations, no examples, no context. Not a New York Times bestseller (it’s free).
#104 · · books, development, html, semantics
Thoughts on CSS in 2024
What I appreciate, what I don’t need (so far)—light and casual and certainly subjective notes on contemporary CSS.
#103 · · development
2023: 0 of the Global Top 100 Websites Use Valid HTML
The latest analysis of HTML and CSS conformance of the most popular websites. The situation is only going to get better once we set higher expectations for the code we ship.
#102 · · development, html, conformance
What Happened to Separation of Concerns in Frontend Development
On a story that began around 2010, and in which web standards make separation of concerns easier—and frameworks make it harder.
#101 · · development, html
CSS Naked Day and the Missing Wikipedia Page
CSS Naked Day has a message—separation of concerns. The event has been around for nearly 20 years, thousands of developers have participated, and it’s still alive. It may not be an event significant enough for Wikipedia, for which this post had been a draft—but it does seem significant for our field.
#100 · · development, maintainability
My CSS Wishlist
Trim it.
#99 · · development
HTML Concepts: Unstyled Documents
There’s unstyled and there’s fully unstyled. And then there’s also styled “in a manner that is useful for a developer.”
#98 · · development, html
Minimal Dark Mode
What’s the easiest and fastest way to set up dark mode? Depending on the setup, something from one declaration to two rules.
#97 · · development, minimalism
2022: 0 of the Global Top 100 Websites Use Valid HTML
When you looked at the top websites in 2021, you learned that 98% of them included invalid HTML. When you do the same for the Top 100 globally, this year, would things have improved? Updated data, with a look at our field’s inability to produce valid HTML output.
#96 · · development, html, conformance
The CSS Art Paradox
The fanciest CSS, standing on the shoulders of bloated HTML.
#95 · · development, html, maintainability, design, art
The Little Book of Little Books
The consolidated and updated version of The Little Book of HTML/CSS Frameworks, The Little Book of HTML/CSS Coding Guidelines, and The Little Book of Website Quality Control!
#94 · · books, development, html, frameworks, quality
CSS: “:has()” and the Lost Paradigm
On the :has() pseudo-class and the forgotten school of ID- and class-less development.
#93 · · development, html, minimalism
The 3-Second Frontend Developer Test
“Do you validate?” Be a frontend developer who ships valid HTML and CSS; hire frontend developers who ship valid HTML and CSS. End the time of unconditionally accepted sloppiness in professional frontend development.
#92 · · development, html, conformance, quality
2021: 98% of the Top 100 U.S. Websites Use Invalid HTML
Is frontend development in the bad shape it’s said to be? Is it hyperbole when frontend developers are accused of poor quality work? When you look at the code of the most popular websites, the answer is clear.
#91 · · development, html, conformance
In Critical Defense of Frontend Development
The field of frontend development is in another crisis, largely due to an incomplete, misinterpreted definition and a bizarre mess created by “web development as a commodity” and “web development as software development.” How frontend development is more than development, and what we can (and should) do.
#90 · · development, html, javascript, quality, design
Custom Properties: Questioning “:root”
For custom properties (aka CSS variables) we got into the habit of declaring variables in a rule with a :root selector. Yet unless you’re working in an environment in which style sheets serve several document types (and roots), question this use of :root.
#89 · · development
The Anti-Reset (to Reset to User Agent Styles)
I advise against resets. You don’t need them. (We don’t need them.) Yet what’s the opposite of a reset? Of all resets? The anti-reset. It looks something like this—
#88 · · development
HTML and CSS and the 2019 Web Almanac
The HTTP Archive’s Web Almanac is fantastic because it provides us with data about how we build what kinds of websites. While the release of the 2019 Almanac has been accompanied by some analysis, I had found it interesting to interpret the data, too.
#87 · · development, html
CSS: When to Use Logical Properties
Logical properties are great and long overdue. They are great because they solve an ugly problem of international, multi-directional web development in that directionality does not need to affect your writing and managing of CSS anymore…
#86 · · development
The Problem With Web Development Checklists, or: The Frontend Checklist, Revised
Checklists are a great way to make sure nothing gets forgotten, yet they are problematic when they contain items that aren’t important. A few general thoughts and a very specific review of The Frontend Checklist—of which 33 guidelines appear useful, and 41 not (yet).
#85 · · development, html, javascript
Print Styling, the 3 Basics
Many sites are not prepared for print, and yet our users print, and they save through print. Therefore: Have a print style sheet, and be it a negative one. Hide what’s not usable or useful. Always test, and tweak when you want better.
#84 · · development, design
What Happened on Google+, the Web Development Archives
Following a few philosophy posts to be archived, here are past entries related to web development. Nothing more, nothing less.
#83 · · development, html, design
37 Theses on CSS and Web Development
CSS Optimization Basics ends with a list of key ideas. From acknowledging that we don’t always write perfectly efficient and maintainable and understandable code to leading by example.
#82 · · development
The Craft of CSS
When we type down CSS like we’ve done 20 years ago, and when we work with ever more abstractions, what does that mean for our craft?
#81 · · development
CSS Optimization Basics
My latest little book, covering mindsets needed for writing effective style sheets, optimization options during operation and for production, and useful resources to aid and inform the work with CSS.
#80 · · books, development, optimization
HTML, CSS, and Dependency Direction
Adam Wathan wrote one of the most interesting web development articles I’ve read in the last few months: CSS Utility Classes and “Separation of Concerns.” At least until “Phase 3” there’s much to learn about current web development…
#79 · · development, html
How Declaration Repetition Developed Over Time, a Statistically Insignificant Sample
We know that there’s excessive declaration repetition in the Web’s style sheets, that each declaration is on average repeated 2–3 times, often needlessly. We know that this repetition is a little less bad on tech sites…
#78 · · development
The Compact Guide to Web Maintainability: 200 Tips and Resources
The result of reviewing, normalizing, rephrasing, sorting, and testing 134 responses to a maintainability survey that yielded more than 500 data points, to form a new guide, a new and more definite guide to web maintainability.
#77 · · development, html, maintainability
The Two Extremes of Writing CSS, and What We Can Learn From Them
Extremes can be useful. In practice they help get the maximum out of a given approach, and in theory they can show what we’re headed to. Compare two ways of writing CSS—like Tachyons or Atomic CSS, and 2000’s idealistic engineering.
#76 · · development
Performance of CSS Selectors Is Still Irrelevant
From my upcoming book on CSS optimization: Selector performance is not something to optimize for as the price we pay for it is terrible: We micro-manage our work for gains that aren’t noticeable.
#75 · · development, performance
CSS: The Reason Why Selectors Should Be Ordered, Too
We’ve talked a lot about declarations as declarations are at the heart of our work with direct consequences for the quality of our style sheets. We’ve not talked much about selectors, though, and that may be a mistake.
#74 · · development
DRY CSS: How to Use Declarations Just Once, Effectively
Using declarations just once is one way to control repetition in style sheets. It’s not a silver bullet, as we’ve seen with recent data, but it’s so powerful as to make for a key style sheet optimization method.
#73 · · development, optimization
5 Reasons Against Resets, Normalizers, Reboots
A word about one of CSS’s horsemen of the apocalypse.
#72 · · development
CSS @-Rules, an Overview
From @charset to @viewport. Or from @bottom-center to @top-right-corner.
#71 · · development
What I Learned Building Google’s Web Frameworks
On building Google’s Go and Maia HTML/CSS frameworks, and succeeding and failing as a tech lead.
#70 · · development, html, frameworks
Stop Using Resets: Visual Examples of the Practical Nonsense of Resets and Normalizers
Or, when Jens found out that he could just collect websites that use reset style sheets and the like, disable those style sheets, document the results and write a post with the diffs for visual evidence. All because “we ran after this mirage for more than a decade.”
#69 · · development
Two Paradigms of Web Development
On a sunny Tuesday in Düsseldorf a few weeks back, at Beyond Tellerrand, I had a pleasant recorded conversation with the team of Working Draft. In our discussion we briefly touched on the idea of web development paradigms…
#68 · · development
70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization
Looking at data for some of the most popular websites, we repeat ourselves too much in CSS; using declarations just once is often one solid avenue to avoid repetition; together, we need to put more focus on style sheet optimization.
#67 · · development, maintainability
CSS Shorthand Syntax Considered Important
CSS shorthands are no anti-pattern, just as little as universal selectors, just as little as !important, and just as little as no-js would not be one. Now we learn that shorthands were an anti-pattern. No, they’re not. Yes, they are! No they’re not.
#66 · · development
Why I Don’t Use CSS Preprocessors
A tribute to Roger Johansson as well as the craft of web development.
#65 · · development
Stop Using the Old “Clearfix”
I had thought the old method of clearing through .clearfix:after { clear: both; content: ''; } long dead, but then I spotted it quite alive and even being taught to developers.
#64 · · development
New Book: “The Little Book of HTML/CSS Coding Guidelines”
Out of the blue! My latest book, The Little Book of HTML/CSS Coding Guidelines, is now available. It’s a brief introduction into the theory and practice of coding standards. Emphasis, as the title suggests, is on HTML and CSS, and furthermore on Google’s guidelines…
#63 · · books, development, html
The Law of User-Generated Code
Whenever you allow users to edit code of your website, you’re doomed. It’s only a matter of time until you need to give up and redo the entire website—and, adding insult to injury, alienate your users.
#62 · · development, maintainability
New Book: “On Web Development”
I wrote another book. On Web Development. On Web Development is an ebook that collects most of the articles about web development (and web design) that I wrote between 2005 and 2015. Most articles as in most useful, most important, and also most controversial.
#61 · · books, development, maintainability, html, design
Web Standards: We’re F’ing It Up
It’s a problem to just change specs. But it’s an increasingly bigger problem not to clean and prune them. The intimidating complexity of web standard specs should precisely be a motivation, not a threat, to come up with a plan. It follows the populist version.
#60 · · development, html
Remember: April 9 Is CSS Naked Day
CSS Naked Day is coming up! Why the excitement? Because CSS Naked Day is a magnificent custom; the magnificent custom to, on one day of the year, strip websites of all styling. It’s awesome because—
#59 · · development, maintainability
The Truth About “!important”
Sometimes I wake up at night, full of agony, tears in my eyes. The Holiest Alliance Against !important is haunting me. I see their countless crusaders gallop at innocent web developers with merciless force, incessantly blowing their deafening horns…
#58 · · development