Adactio: Links

A Love Letter to CSS

My argument is relatively simple: creating a comprehensive styling mechanism for building complex user interfaces is startlingly hard, and every alternative to CSS is much worse. Like, it’s not even close.

Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli

Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.

No images were harmed in the making of these form controls.

Organize your CSS properties however you dang like – Michael.blog

Neither matters all that much and you can use every method on the same project without the universe imploding.

Some interesting approaches in the comments too.

PhD Thesis: Cascading Style Sheets

Håkon wrote his doctoral thesis on CSS …which is kinda like Einstein writing a thesis on relativity. There’s some fascinating historical insight into the creation of the standards we use today.

Eric’s Archived Thoughts: Grid-Powered Drop Quotes

I’ve been digging into CSS Grid a lot during the past week, so this post from Eric is very timely. On the surface it looks like a fairly simple use case but as you read through the explanation, it starts to become clear that the underlying thinking could be used in a lot of situations.

And, yes, like Eric, I too have been bitten by the Grid bug:

I’m working on my first redesign in a dozen years. If that doesn’t give you some sense of the power of Grid, well, I just don’t know what will.

Cascading HTML Style Sheets — A Proposal

It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:

A one-statement style sheet that sets the font size of the h1 element:
h1.font.size = 24pt 100%
The percentage at the end of the line indicates what degree of influence that is requested (here 100%).

WTF, forms?

Here’s a CSS file that will give you a bit more control over styling some form elements. The thinking behind the CSS for each element is explained nice and clearly.

Style List Markers in CSS | CSS-Tricks

A clever way of styling list numbers and bullets in CSS. It feels like this should be its own pseudo-element already though, right? Well, that’s on the way.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends – Smashing Magazine

A really terrific piece by Heydon that serves as a rousing defence of the cascade in CSS. It’s set up in opposition to methodologies like BEM (and there’s plenty of back’n’forth in the comments), but the truth is that every project is different so the more approaches you have in your toolkit, the better. For many projects, something like BEM is a good idea. For others, not so much.

Funnily enough, I’ve been working something recently where I’ve been embracing the approach that Heydon describes—although, to be fair, it’s a personal project where I don’t have to think about other developers touching the HTML or CSS.

CSS Writing Mode

Some nifty layout tricks using the writing-mode property in CSS.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

* + * {
    margin-top: 1.5em;
}

I should try it out and see how it feels.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

A little piece of JavaScript to strip out the styling from Twitter widgets.

Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!

Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?

Tags: styling

26