A Fluid Grid Calculator

Build your own fluid grid systems.

Writing CSS For Others

CSS code that is perfect for other developers.

General CSS notes, advice and guidelines

High-level guidelines from writing manageable, maintainable CSS.

The single responsibility principle applied to CSS

How to build big, scalable front-ends.

Keep your CSS selectors short

As sites get bigger, selectors should get shorter.

Single-direction margin declarations

Why you should always try and apply margins in one direction only.

Breaking Good Habits

Harry Roberts' talk at Front-Trends 2012.

A classless class—on using more classes in your HTML

Explaining OOCSS and the use of classes.

Code smells in CSS

Things to avoid in your code.

Front-end performance for web designers and front-end developers

An introduction.

“If you’re starting a new job as a developer, place a copy of HTML for Dummies on your desk on the first day, see if anyone says anything…”

Responsive grid systems; a solution?

Discussing the fluid grid system behind inuit.css.

Introducing csswizardry-grids

A nestable, Sass-based, responsive grid system.

shame.css

A way to isolate hacky, quick-fix CSS.

“I secretly judge people who write ‘0px’ in their CSS…”

Hashed classes in CSS

A better way to flag something as unique.

Make it count

“Look after yourself, and with everything you do, make it count.”

“You know you’ve picked well when you can have a Skype conversation with your girlfriend about the intricacies of spacing em dashes…”

Normalising Designs For Better Quality CSS

Approaches to maintain a better codebase.

Keeping Parts of Your Codebase Private on GitHub

How to do it with multiple remotes.

Advice to budding front-end developers

“The secret is, there is no secret. It’s all just a lot of continued, hard work.”

CSS Guidelines

Approaches for writing manageable, scalable CSS.

Pure CSS accordion

A crude proof of concept.

The Specificity Graph

Writing better quality CSS.

“Think of a preprocessor as a magnifying glass: it can make good CSS great, but bad CSS terrible. It’s not a magic bullet.”

Ten Principles for Effective Front-end Development

Code is only a small part of a developer's job.

More Transparent UI Code with Namespaces

How to write self-documenting CSS.

Cyclomatic Complexity: Logic in CSS

An advanced principle to try and apply to CSS.

BEMIT: Taking the BEM Naming Convention a Step Further

From BEM to BEMIT with some small additions.

The Importance of !important: Forcing Immutability in CSS

When it’s OK to use !important.

Improving Your CSS with Parker

How you can use the tool to get insightful metrics about your style sheets.

Refactoring CSS Without Losing Your Mind

Ways to deal with legacy code.

Pure CSS Content Filter

Tutorial and demo.

Improving Perceived Performance with Multiple Background Images

A technique for images with a low change rate.

We Need to Talk About Technical Debt

What it is and how to deal with it.

CSS Shorthand Syntax Considered an Anti-Pattern

Why to always favor the longhand syntax.

Typography for Developers

Simple rules to drastically improve your text quality.

Code Smells in CSS Revisited

Things to avoid in your code.

Writing Tidy Code

When it comes to readable code, most of us could do better.

Performance and Resilience: Stress-Testing Third Parties

Let’s find out how well we handle failures.

Finding Dead CSS

Simple technique to identify dead code on a live site.

Slowfiles

Demonstrate and observe slow-loading resources.

Image Inconsistencies

How and when browsers download images.

‘Can I Use’ based on Google Analytics

No more best-guessing browser support for your site.

Performance Budgets, Pragmatically

A way to define performance budgets for any website.

Real-World Effectiveness of Brotli

Is it worth to move over from Gzip?

The Fastest Google Fonts

Let’s find a snippet for loading Google Fonts at lightning speed.