惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Google DeepMind News
Google DeepMind News
C
CERT Recently Published Vulnerability Notes
C
Cisco Blogs
Cloudbric
Cloudbric
The Last Watchdog
The Last Watchdog
L
LINUX DO - 热门话题
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Application and Cybersecurity Blog
Application and Cybersecurity Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Security Archives - TechRepublic
Security Archives - TechRepublic
TaoSecurity Blog
TaoSecurity Blog
V2EX - 技术
V2EX - 技术
H
Heimdal Security Blog
S
Security Affairs
L
Lohrmann on Cybersecurity
Hacker News - Newest:
Hacker News - Newest: "LLM"
Simon Willison's Weblog
Simon Willison's Weblog
WordPress大学
WordPress大学
小众软件
小众软件
Security Latest
Security Latest
AWS News Blog
AWS News Blog
Apple Machine Learning Research
Apple Machine Learning Research
GbyAI
GbyAI
Engineering at Meta
Engineering at Meta
阮一峰的网络日志
阮一峰的网络日志
罗磊的独立博客
F
Full Disclosure
S
Schneier on Security
L
LangChain Blog
MyScale Blog
MyScale Blog
Know Your Adversary
Know Your Adversary
P
Privacy International News Feed
Google Online Security Blog
Google Online Security Blog
Scott Helme
Scott Helme
Stack Overflow Blog
Stack Overflow Blog
爱范儿
爱范儿
A
Arctic Wolf
Martin Fowler
Martin Fowler
B
Blog RSS Feed
大猫的无限游戏
大猫的无限游戏
博客园 - 三生石上(FineUI控件)
The Register - Security
The Register - Security
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
博客园_首页
Latest news
Latest news
F
Fortinet All Blogs
G
GRAHAM CLULEY
T
The Exploit Database - CXSecurity.com
Hacker News: Ask HN
Hacker News: Ask HN

CSS Wizardry

Front-End’s Missing Metric: The TBT Window Meet Your Users Where They Are with Obs.js Better Browser Caching with No-Vary-Search font-family Doesn’t Fall Back the Way You Think What Is CSS Containment and How Can I Use It? When All You Can Do Is All or Nothing, Do Nothing Obs.js: Context-Aware Web Performance for Everyone Low- and Mid-Tier Mobile for the Real World (2025) The Fastest Site in the Tour de France Making Sense of the Performance Extensibility API Why Do We Have a Cache-Control Request Header? HTML Is Not a Programming Language… Build for the Web, Build on the Web, Build with the Web Licensing Code on CSS Wizardry A Layered Approach to Speculation Rules Designing (and Evolving) a New Web Performance Score Core Web Vitals Colours The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid Optimising for High Latency Environments Cache Grab: How Much Are You Leaving on the Table? blocking=render: Why would you do that?! Correctly Configure (Pre) Connections The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache What Is the Maximum max-age? How to Clear Cache and Cookies on a Customer’s Device The Ultimate Low-Quality Image Placeholder Technique Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? The HTTP/1-liness of HTTP/2 In Defence of DOM­Content­Loaded Site-Speed Topography Remapped Why Not document.write()? Speeding Up Async Snippets Critical CSS? Not So Fast! Measure What You Impact, Not What You Influence Optimising Largest Contentful Paint Measuring Web Performance in Mobile Safari Site-Speed Topography Speed Up Google Fonts Real-World Effectiveness of Brotli Performance Budgets, Pragmatically Lazy Pre-Browsing with Prefetch Making Cloud.typography Fast(er) Time to First Byte: What It Is and How to Improve It Self-Host Your Static Assets Tips for Technical Interviews Cache-Control for Civilians Bandwidth or Latency: When to Optimise for Which ITCSS × Skillshare What If? CSS and Network Performance The Three Types of Performance Testing Getting to Know a Legacy Codebase Image Inconsistencies: How and When Browsers Download Images Identifying, Auditing, and Discussing Third Parties My Digital Music Setup Measuring the Hard-to-Measure Finding Dead CSS The Fallacies of Distributed Computing (Applied to Front-End Performance) Ten Years Old Relative Requirements Airplanes and Ashtrays Performance and Resilience: Stress-Testing Third Parties Refactoring Tunnels Little Things I Like to Do with Git Writing Tidy Code Configuring Git and Vim Base64 Encoding & Performance, Part 2: Gathering Data Base64 Encoding & Performance, Part 1: What’s Up with Base64? Code Smells in CSS Revisited Typography for Developers Moving CSS Wizardry onto HTTPS and HTTP/2 Ack for CSS Developers A New Year, a New Focus Preparing Vim for Apple’s Touch Bar Choosing the Correct Average CSS Shorthand Syntax Considered an Anti-Pattern CSS Wizardry Newsletter Nesting Your BEM? Improving Perceived Performance with Multiple Background Images Continue Normalising Your CSS Pure CSS Content Filter Pragmatic, Practical, and Progressive Theming with Custom Properties Refactoring CSS: The Three I’s Speaker’s Checklist: Before and After Your Talk Improving Your CSS with Parker The Importance of !important: Forcing Immutability in CSS Mixins Better for Performance Managing Typography on Large Apps White October Events Workshop Partnership BEMIT: Taking the BEM Naming Convention a Step Further Travelling Like You Want to, When You Have To Contextual Styling: UI Components, Nesting, and Implementation Detail Subtleties with Self-Chained Classes Cyclomatic Complexity: Logic in CSS Immutable CSS Can CSS Be Too Modular? More Transparent UI Code with Namespaces When to use @extend; when to use a mixin The Specificity Graph CSS Wizardry Ltd.: Year 1 in review
shame.css – full .net interview
Harry Roberts · 2013-04-26 · via CSS Wizardry

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

  1. Featured case study: NHS

Since writing about shame.css last week, there has been a lot of buzz and discussion around it, which is great! Part of that was an interview I did with .net magazine about the idea. You can read the edited version of the interview over on the .net site and you can also read the whole, unabridged version right here:


Do you think there’s a tendency from some in the web industry to not be realistic about the need for (hopefully) short-term hacks to get sites working?

Yes, big time. If you work on a site/product that earns millions of pounds a year then any bugs, breakages, quirks et cetera need fixing as soon as possible; your product owner doesn’t care if your CSS is perfect (nor should they, really), they care that the site is up and functional and ticking over that revenue. Good code is important—and hacks are far from ideal—but to think you can always avoid hacks and short-term/quick fixes is naive.

With websites/products you need to keep certain people happy; when a client is breathing down your neck—or a feature is broken on live—then you need to make sure you’re keeping the right stakeholders happy. If you spend an hour writing a perfect fix for something you could have superficially fixed in two minutes then I’d say you’re keeping the wrong person happy (i.e. yourself).

Hacks are far from ideal, and it would be nice to avoid them where possible, but to say/believe you can always avoid hacks and quick fixes is, to repeat myself, very naive. I’ve worked on projects of varying sizes (from simple one-page marketing sites to in-house, continuous (i.e. years) projects that earn serious amounts of cash) and I will readily admit that the need for hacks increases fairly proportionately with the size of the project, but the good thing about that is that you’ll likely have more project time dedicated to fixing those hacks.

What would you consider ‘hacks’ in the context of shame.css? Would you treat cutting-edge CSS similarly, since that’s not always ‘clean’ or fully standardised, or is this just about botch-jobs that were needed to get something working and into production?

For me a hack is something that could have been done better given more time. It’s hard to think of examples out of context, but I think you’ll often know when something is a hack. Written something that you’d be ashamed to explain to a colleague? That’s probably a hack.

A hack is something where—as you’re writing it—you’re thinking there has to be a cleaner way to do this. Shame.css is about making a file full of things that you think you could have done better, a file that you can do better when you get the time to revisit it. It’s a self-writing todo list, really; a file of hacks that you put to one side to think about when you have more time.

On the documentation side of things, should people working on CSS get more into that in general, rather than just for hacks?

Yes! If there’s one thing all developers should do more, it’s writing comments. You should comment anything that isn’t immediately obvious from the code alone (comments like color:red; /* Makes the text red. */ are totally redundant). There’s nothing worse than picking up someone else’s code and wondering what anything does, or how, or why. Document your code so that, if you get hit by a bus on your way home, your colleague can take over right away the next day.

Featured case study: NHS

How I helped the NHS rapidly build a brand new product.

Read case study…

In terms of integration, do you essentially see the hacks appearing as a block of patches as the end of a minified CSS file? How would you recommend people work if they’re not using preprocessors?

If you are using a preprocessor then I’d @import the shame.[scss|less|etc] file right at the end, ideally (this could always lead to specificity and source-order problems, so your mileage may vary).

If you aren’t using a preprocessor but you do have a decent build process then all your CSS files should be concatenated and minified before they’re deployed anyway, so again, shame.css bolted onto the end of that.

If you aren’t using a preprocessor and you don’t have a build process then 1) you probably fix that and 2) I reckon a hacks section at the end of your stylesheet is probably your best bet. Shame.css isn’t at all intended for public viewing so you should never end up with a separate stylesheet called by a link element in your markup. You should be serving one concatenated and minified stylesheet only.

Finally, if shame.css as a concept really took off, how do you think it would change design process and websites in general?

Shame.css is only as useful as the developers who implement it. It’s all well and good isolating and documenting your hacks, but if you never fix or revisit them then you’re just in the same boat as before.

For me, shame.css signals a broader shift in development; it doesn’t need to be limited to CSS. The concept is merely ‘realising, documenting and making a point of your hacks’. You can apply that thinking to everything.

The real work involved with shame.css is getting your immediate team (developers) on board, and then making the business/PMs/scrum masters/BAs/product owners et cetera aware of the fact that their product will include less-than-ideal code sometimes, but that this code exists to meet business requirements.

Tell them that you are isolating and documenting these hacks and then get some development time allocated to tidy things up. It’s easier to make a business case for tidying up a codebase if you can quantify it; simply telling your project manager that I have some things to tidy up before I can move onto Feature X won’t always cut it. Take a list of things to your PM and try and get half a day of sprint time to spend cleaning up.

The idea behind shame.css is simply to make your hacks more transparent, quantifiable and isolated; it’s up to you what you do with that information.