Posts Tagged ‘css’

Every problem at every company I’ve ever worked at eventually boils down to “please dear god can we just hire people who know how to write HTML and CSS.” This UX is awful? That UI looks old? Accessibility busted? Performance […]

Raw-dogging websites: index.html, styles.css, script.js. No frameworks, no CMSes, no build steps, no nuthin’. Sure, you can call it a static site, but even those tend to be compiled by sophisticated tooling behind the scenes. And also, c’mon, gotta get […]

text-decoration-offset is a good use case for em units. Most of the time we favor rems over ems, but in this case we want the text underline offset to proportionally scale with the `font-size` property. Here’s a quick demo: See […]

You Want border-color: transparent, Not border: none by Dave is a great reminder to not remove borders from components for accessibility reasons, especially to better support high contrast mode. border-color: transparent comes in handy for other use cases as well. […]

Ah yes, this old chestnut. It pops up as reliably as daffodils in early spring. My perspective has changed very little over the years. Telling web designers they don't need to worry about code is like telling architects they don't […]

What’s this? Some Heydon Pickering commentary on utility-first CSS? Allow me to fetch my popcorn.

I pay attention to anything Zach has to say about web components (and, well, pretty much all web stuff), so I really liked 3 Methods for Scoped Styles in Web Components That Work Everywhere. WebC is something I want to […]

Web components! They’re currently at the vanguard of web development and are a reliable source of hot drama in the community. We’ve built a number of web component-powered design systems with Fortune 500 companies over the last 4 years, and […]

We’re getting closer and closer and closer to being able to actually use container queries. I for one and so freaking excited. Source: A New Container Query Polyfill That Just Works | CSS-Tricks – CSS-Tricks

:has() looks really cool, and I can see this being really helpful for a design system’s more composable components. Source: The CSS :has() selector is way more than a “Parent Selector” – Bram.us

This post is a fantastic breakdown of naming things in front-end code. Many of the specifics he outlines are things we adhere to in our own work, but ultimately any one of these conventions can be handled differently. With that […]

Defensive CSS by Ahmad Shadeed does a great job breaking down a lot of common (and not so common!) CSS issues when working with dynamic content. Super helpful for people building design systems. I’m happy to report we put most […]

What an amazing demo. Source: Container Queries in Web Components | Max Böck

Container queries are going to change how we build design systems. Super pumped that they’re finally on the horizon. Source: Say Hello To CSS Container Queries

Sara shares how she’s structuring her CSS with CSS custom properties. This is all very relevant to the work I’m doing now. Source: Global and Component Style Settings with CSS Variables — Sara Soueidan – Freelance-Front-End UI/UX Developer

This guide to BEM naming conventions is really great, and closely follows how we tend to write styles. Really cool site design too! Source: BEM Naming Cheat Sheet by 9elements

I’m working on a couple themeable design systems right now, and we’re architecting components to offer a white list of themeable CSS properties, so each brand can define their design language using design tokens and then pipe those through into […]

Here are a few random stories from my last couple weeks of work. We have a datepicker field that has a calendar SVG icon sitting on top of the field. There was an issue where clicking the icon wasn’t triggering […]

No

Here’s Greg Whitworth with some good analysis and plan forward about how the platform can give more styling control to form controls. LONG OVERDUE. Source: Initial thoughts on standardizing form controls | Greg Whitworth

In this great post, Cathy Dutton explains how she removed Sass from her codebase. Why? She explains how she used to use Sass for layout, variables, and typography, but now native CSS features take care of that for her. I’ll […]

I think this is a great read that underscores how CSS can be quite powerful. In order to build out a night mode version of Hulu, the team got frustrated trying to sort out how to manage the relevant properties […]

This post by Harry does a great job of talking about the performance implications of CSS, and he shares a load of tips for avoiding big performance hits due to CSS. CSS is critical to rendering a page—a browser will […]

I threw a question out on Twitter regarding CSS/Sass authoring style. It was a difference between Option 1: .c-btn { … } .c-btn__icon { … } and Option 2: .c-btn { &__icon { … } } The results were interesting so […]

Following up on the video Dan and I recorded that shows how we collaborate as designer and developer, I recorded a video of me doing a bit of head-down development work. Dan and I mention in our first video that […]

Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles) This was an easy buy.

Love how Heydon flips this all on its head.

This is a fantastic article by Keith J. Grant that breaks down CSS’s unique qualities that makes it powerful, but also perhaps a bit confusing to people coming at it from a programmatic background. It’s a great reminder as to […]

I have yet to dive deep into CSS-in-JS, but I’ll admit I’m skeptical. This podcast by Chris Ferdinandi lays out a lot of the reasons why I’m a bit apprehensive. Three other observations I’ve noticed as I encounter CSS-in-JS in […]

From Una: CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect (more info here). This site is a solution for you so you […]