Posts Tagged ‘css’

Subscribe via RSS
  1. 04 Jun, 2024

    A rare use case for em units

    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 […]

  2. 07 May, 2024

    Transparent borders

    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. […]

  3. 05 Apr, 2024

    Should designers code?

    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 […]

  4. 03 Mar, 2024

    What is Utility-First CSS?: HeydonWorks

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

  5. 11 Apr, 2023

    3 Methods for Scoped Styles in Web Components That Work Everywhere—

    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 […]

  6. 21 Oct, 2022

    Let’s talk about web components

    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 […]

  7. 07 Jan, 2022

    A New Container Query Polyfill That Just Works | CSS-Tricks

    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

  8. 04 Jan, 2022

    The CSS :has() selector is way more than a “Parent Selector” –

    :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” –

  9. 03 Jan, 2022

    A Small Guide for Naming Stuff in Front-end Code – Frank M Taylor

    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 […]

  10. 22 Dec, 2021

    Defensive CSS – Ahmad Shadeed

    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 […]

  11. 05 Jul, 2021

    Container Queries in Web Components | Max Böck

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

  12. 14 Apr, 2021

    Say Hello To CSS Container Queries

    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

  13. 10 Jun, 2020

    Global and Component Style Settings with CSS Variables — Sara Soueidan

    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

  14. 13 Apr, 2020

    BEM Naming Cheat Sheet by 9elements

    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

  15. 09 Mar, 2020

    Sass !default and themeable design systems

    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 […]

  16. 13 Jan, 2020


    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 […]

  17. 15 Dec, 2019

    Do I need a custom Select?


  18. 19 Sep, 2019

    Initial thoughts on standardizing form controls

    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

  19. 07 Jan, 2019

    Stepping away from Sass

    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 […]

  20. 01 Jan, 2019

    Building Night Mode for

    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 […]

  21. 18 Nov, 2018

    CSS and Network Performance

    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 […]

  22. 05 Oct, 2018

    Sass Selectors: To Nest Or Not To Nest?

    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 […]

  23. 24 Aug, 2018

    Designer+Developer Workflow: Head-Down Work

    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 […]

  24. 14 Aug, 2018

    CSS Scan

    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.

  25. 16 Jul, 2018

    CSS: A New Kind Of JavaScript

    Love how Heydon flips this all on its head.

  26. 13 Jun, 2018

    Resilient, Declarative, Contextual

    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 […]

  27. 06 May, 2018

    What’s wrong with CSS-in-JS?

    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 […]

  28. 23 Apr, 2018

    Grid To Flex

    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 […]

  29. 16 Apr, 2018

    Scroll to the Future

    Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. This is a […]

  30. 02 Apr, 2018

    Creating Themeable Design Systems

    TL;DR: Design systems + CSS Zen Garden = Awesome. Is it possible to create a single design system that powers wildly different-looking brands and experiences? The answer is yes! But why would you want to? Different audiences and contexts – […]