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

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
雷峰网
雷峰网
Recent Announcements
Recent Announcements
月光博客
月光博客
G
Google Developers Blog
腾讯CDC
S
Secure Thoughts
大猫的无限游戏
大猫的无限游戏
T
Tenable Blog
云风的 BLOG
云风的 BLOG
W
WeLiveSecurity
博客园 - 【当耐特】
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 聂微东
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
P
Privacy International News Feed
MyScale Blog
MyScale Blog
K
Kaspersky official blog
T
The Blog of Author Tim Ferriss
Attack and Defense Labs
Attack and Defense Labs
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
aimingoo的专栏
aimingoo的专栏
I
Intezer
Vercel News
Vercel News
小众软件
小众软件
Simon Willison's Weblog
Simon Willison's Weblog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
Latest news
Latest news
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tor Project blog
S
Security Affairs
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
博客园 - Franky
C
Cyber Attacks, Cyber Crime and Cyber Security
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
美团技术团队
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
Security @ Cisco Blogs
L
LINUX DO - 热门话题
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
D
Docker
L
Lohrmann on Cybersecurity
F
Full Disclosure

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
A new CSS Wizardry
Harry Roberts · 2012-12-21 · via CSS Wizardry

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

  1. So long, WordPress
  2. Hello, Jekyll!
  3. GitHub Pages
    1. Public code
  4. Practicing what I preach
    1. inuit.css
  5. As little as possible, and nothing more…
    1. No comment
  6. The transition
  7. What now?

Hey there! Welcome to a brand new CSS Wizardry!

These recent changes are pretty big ones, and this post aims to discuss and explain them all. There’ll be quite a lot… grab a coffee!

So long, WordPress

There’s no denying that WordPress is pretty awesome; it’s powerful, it’s flexible and it’s free! But it’s just too much. I was at the mercy of WordPress with my last site; updating it was no longer a trivial matter and to develop it required MAMP, a database, a few MB of library code and all manner of other things. This isn’t a bad thing per se, but it was certainly more than I wanted to be dealing with.

I love tinkering, I love building, I love coding, I love Vim and Git and the command line now. As a developer, I don’t love GUIs and CMSs. WordPress was just no fun any more…

Hello, Jekyll!

I recently discovered Jekyll, a static site generator written on Ruby by Tom Preston-Werner, GitHub co-founder. After seeing what it does and how it works, it felt like the answer; I was already writing posts in markdown using iA Writer and converting it to HTML before dropping it into WordPress’ admin panel, so why not write in markdown full time?

I built inuit.css’ site on Jekyll, it was a lot of fun, and very simple. I knew that I wanted to move CSS Wizardry over to Jekyll too. I used exitwp (with the help of Tom Hudson) to port CSS Wizardry’s WordPress content into Jekyll-friendly markdown format.

GitHub Pages

I have always hosted CSS Wizardry with NuBlue, an absolutely fantastic host in the UK. However, I was only on a humble shared hosting package with no Git/SSH access. I decided to move hosting over to GitHub Pages which:

  • Is free
  • Allows me Git access
  • Allows me to leave the source code totally open

I love GitHub, so hosting my site on GitHub Pages and keeping the whole lot in an open repo is great!

I still love NuBlue, and would recommend them to anyone, and I have kept my hosting account with them open so that I can quickly move back at the drop of a hat if I need to.

Now my new workflow means I can write blog posts and publish them without ever leaving Terminal!

Public code

Hosting the site on GitHub Pages means it lives in a public repository. This serves a couple of great purposes:

  • It can serve as a learning tool to anyone who wants to poke through
  • It will keep me on my toes

The second is very important to me; the old CSS Wizardry was nasty, because it was behind closed doors, and wasn’t easily accessible for me to work with. By hosting the code so openly it will make me take more pride in it and allow me to work on it much more easily; no excuses now!

Practicing what I preach

There was nothing more embarassing than writing articles about how IDs are the devil’s selector when the old CSS Wizardry was full of them; I have now started practicing what I preach. The code should hopefully be in line with all the things I write and talk about.

inuit.css

Naturally, I rebuilt CSS Wizardry on top of inuit.css, my open source CSS framework. I am super proud of inuit.css, and it was fun building a proper project on top of it. The proof, they say, is in the pudding!

As little as possible, and nothing more…

The new site is purposefully low on features. I didn’t want to build too much too soon and end up with a lot more than I needed. I’m taking a kind-of-agile approach with CSS Wizardry now. Instead of building a whole, behemoth WordPress clone, I have decided to launch CSS Wizardry as an MVP (shoot me now…). The rebuild was undertaken quite selfishly; I wanted two things out of the site at its most basic:

  • Somewhere to post/house articles
  • Somewhere to keep a professional bio/profile

This was my MVP, and it has been fulfilled. Features like comments, search, tags and categories will come at a later date; I got my minimum viable product out of the door, and the next jobs will be to build on and extend that. I won’t be working in sprints, but I will amass a backlog and a set of features I would like to include at a later date.

For now, the functionality of the site serves only myself; you can read anything I have written previously, but you might find it hard to search (like I said, I have been a little selfish).

I have decided to remove comments. If I am totally honest, comments were previously a huge chore; it sounds ungrateful but comments – although often excellent and full of information and opinion – were:

  • Time consuming to moderate
  • Impossible to reply to individually
  • Fetching a lot of spam. I mean a hell of a lot…

I have decided, for now at least, to do away with comments. I still have the data from comments on the old site, so I can reinstate them if/when I decide it is the right thing to do, but for now I have gotten rid.

The transition

Unsurprisingly, the transition from WordPress to Jekyll is a pretty massive one, and as such I am fully expecting things to be broken, or not working quite right.

I have some tech tasks on GitHub to address stuff like that, so if you spot anything I would be very grateful if you could raise an issue to help me keep track of things that need tidying up. Like I said, this rebuild is a little selfish in that I don’t care too much, but I will have a task always in the back of my mind to clean things up gradually.

What now?

Well, you can grab the new RSS feed, follow me on Twitter and keep an eye on the project on GitHub.

Thanks,
Harry