-
Some pointers on default cursors
- Every so often in a project, the issue comes up of whether cursors on buttons should be ‘the hand’ or default.
- The spec says they should be default, but many people (myself included, until recently), are unaware.
- Many designers I’ve worked with want pointer-cursors regardless of what the spec says.
-
An Interview With Elad Shechter on "The New CSS Reset"
@layer normalize; /* Create 1st layer named “normalize” */ @layer the-new-css-reset; /* Create 2nd layer named “the-new-css-reset” */ @layer project-styles; /* Create 3rd layer named “project-styles” */
-
We had 90% unused CSS because everybody was afraid to touch the old stuff
- “I don’t know if it’s okay for me to change this, so I’m gonna duplicate it.” And now we’ve got – at PayPal (this is not made up) we had 90% unused CSS on the project I was using, because everybody was afraid to touch the old stuff.
- Well, that’s why styled-components and CSS-in-JS was so pivotal; it was like “Oh, hey, we can actually encapsulate all of this logic inside the component that it’s touching and don’t have to worry about bleeding code anymore.” It’s so much easier to delete things, and add things, and all of those things.
- That’s one of the reasons I sometimes like component-based-styling solutions (CSS-in-JS, if you’re nasty). Not because I love complex tooling. Not because I like JavaScript syntax better than CSS. Because of the co-location of styles and componentry. Because nobody is afraid of the styles anymore — they are tightly coupled to what they are styling.
-
Don’t Fight the Cascade, Control It!: is, where pseudo-selector with specificity.
-
column-count: 3;
-
Global vs. Local Styling In Next.js
-
Design tokens
:root { --green: #3fe79e; --dark: #0f0235; --off-white: #f5f5f3; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --font-size-sm: 0.5rem; --font-size-md: 1rem; --font-size-lg: 2rem; }
-
Global styles
-
Utility classes
- I need it repeatedly;
- It does one thing well;
- It applies across a range of different components or pages.
.lockup { max-width: 90ch; margin: 0 auto; }
-
Component styles
-
-
Using the Specificity of :where() as a CSS Reset: The key about
:where()is that it always has 0 specificity.:where(ul[class]) { list-style: none; } .list { list-style: square; /* Now this works like a charm! */ }
-
<div data-lunch="tuna-sandwich chips soda Cookie">My Lunch Order</div>
[data-lunch~="chips"] { } [data-lunch|="tuna"] { } [data-lunch^="tuna"] { } [data-lunch$="Cookie"] { } [data-lunch*="Cook"] { } [data-lunch~="cookie" i] { }
- justify-content vs column-gap
- justify-content and align-items vs margin: auto
- flex items are blockified
Notice that we’re advised to make target sizes at least 44×44 pixels, which is mentioned no fewer than 18 times in the WCAG 2.5.5 explainer.
For years, my go-to recommendation for CSS animations was animate.css by Daniel Eden.
It’s a great library, but it also a library. I generally only need one or two animations, and it includes way more stuff than I typically want in a project.
So I was delighted to discover Animista by Ana Travis last week. Animista is a tool that lets you select the animation you want, and then copy/paste the CSS for it into your project.
Animations can make people who experience motion sickness, vertigo, and other conditions physically sick, dizzy, and disoriented.
Both Windows and macOS provide a way to disable animations at the operating system level, and tell websites that they would prefer not to see them as well.
We can access this setting through a CSS media query: prefers-reduced-motion.
@media (prefers-reduced-motion: reduce) {
/* The user does not want animations */
}
@media (prefers-reduced-motion: no-preference) {
/* The user is OK with animations */
}TL;DR; Use @media-like @supports rule for feature detection in CSS, its equivalent - CSS.supports() in JS, and library like Modernizr when those feature detections aren’t supported (e.g. IE).