Link tags: styling

125

sparkline

Line heights in CSS work better with ratios | Andy Bell

There’s a broader point here about declarative design:

Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.

Conditional CSS - Ahmad Shadeed

I like to think of CSS as a conditional design language.

Yes! This is exactly what I’m talking about with declarative design!

Read on for some fantastic examples. And also, Ahmad makes a comparison between CSS and Figma, pointing out that the conditional, declarative possibilities currently aren’t available in graphic design tools.

A CSS challenge: skewed highlight — Vadim Makeev

I did not know about box-decoration-break—sounds like a game-changer for text effects that wrap onto multiple lines.

Tree views in CSS

Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.

User Stylesheets Are Still Pretty Great and Should Be More Widely Supported — Pixel Envy

Hear, hear!

If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.

12 Days of Web

All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.

dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots

A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.

An Interactive Guide to Flexbox in CSS

This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!

CSS Timeline

Here’s a remarkably in-depth timeline of the web’s finest programming language, from before it existed to today’s thriving ecosystem. And the timeline is repsonsive too—lovely!

A long-term plan for logical properties? | Miriam Eric Suzanne

Well, now I’m really glad I wrote that post about logical properties!

We’re not there yet. So how do we get there?

Well, I don’t know for sure – but articles like this are very helpful as we try to work it out!

Modern alternatives to BEM - daverupert.com

Dave rounds up some of the acronymtastic ways of scoping your CSS now that we’ve got a whole new toolkit at our disposal.

If your goal is to reduce specificity, new native CSS tools make reducing specificity a lot easier. You can author your CSS with near-zero specificity and even control the order in which your rules cascade.

Using :has() as a CSS Parent Selector and much more | WebKit

A terrific tour of just some of the fantastic ways you can use :has() in CSS.

The section on using it with sibling selectors blew my mind:

How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.

h2:has(+ p) { margin-bottom: 0; }

Amazing.

A good reset | Trys Mudford

Prompted by my recent post about using native button elements, Trys puts forward a simple explanation for why someone would choose to use a div instead.

The one common feature between every codebase I’ve encountered on that doesn’t use buttons well, is a bad CSS reset. Developers try to use a button, and find that it still looks like a native browser button, so they grab a plain old, blank canvas div, and build from there.

Occam’s Razor makes Trys’s explanation the most likely one.

Jeremy Keith | In And Out Of Style | CSS Day 2022 - YouTube

Here’s the video of my opening talk at this year’s CSS Day, which I thoroughly enjoyed!

It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!

In And Out Of Style | Jeremy Keith | CSS Day 2022

How Flexbox Works

A really deep dive into flexbox. This is a great example of what I categorise as “thinking like a browser” (a skill I recommend for any front-end developer).

The Future of CSS: Cascade Layers (CSS @layer) – Bram.us

This is a really in-depth explanation from Bramus of the upcoming @layer rules in CSS, from the brilliant minds of Miriam, fantasai and Tab.

Basically, you’ll be able to scope styles, and you get to define the context for that scoping. So all those CSS-in-JS folks who don’t appreciate the cascade will have a mechanism to get encapsulated styles.

I can see this being very handy for big complex codebases with lots of people on the team.

Designing Beautiful Shadows in CSS

This is a great tutorial—I just love the interactive parts that really help make things click.

Scope Proposal & Explainer

This detailed proposal from Miriam for scoping CSS is well worth reading—it makes a lot of sense to me.

Organize your CSS declarations alphabetically – Eric Bailey

Until there is movement on developers taking CSS more seriously and understanding its full capabilities, we are caught in an awkward loop where introducing too much complexity in your project’s CSS will do more harm than good.