Avoiding media queries is possible but unreadable.

Some SCSS mixins make it more readable though: https://github.com/ryevych/adaptiveValueFunction/blob/main/scss/adaptiveValueFunction.scss

Two good examples are provided :)

A web component for drawing patterns with CSS

The images are actually impressive

And some figures: https://yuanchuan.dev/polygon-shapes

Easier clamp values with a min and max values, and the size of the viewport.

Example of usage of conic-gradient

object-fit: cover; is the one mostly used because it preserves the ratio of the image and it fits the dimension of the container.

There is multiple use cases:

• user avatars
• logos list
• article thumbnail
• hero background
• displaying videos

background-size is for the background and has 3 values: auto, contain and cover.

TL;DR;
apply every hover effect on devices that can not support the hover effect (smartphones, ...).

Use the @media (hover: hover) media query to target devices that have the :hover effect available, or @media (hover: none).

A state of the art library for vue components

I agree

An interactive gallery that demonstrated what's possible with just CSS gradients.

CSS variables that provoke invalid CSS declarations (for example --foo: ;) are set to unset.

Space toggle for numerical value: calc(1.5 var(--toggle-value, - .4))
with toggle value:

:root {
  --ON: initial
  --OFF: ;
}

Use variables for pure data, not CSS values as CSS values are often bound with a unit.

Relative values inherit as syntax tokens unless the property is registered. Registering a property as allows us to pass down ancestor font sizes.

Again CSS properties:

.box {
  padding: var(--py, 1rem) var(--px, 1rem);
}

.box--some-variant {
  --px: 2rem;
}

👍

• Think about the :empty selector, especially for message errors :)
• :target to select the node targeted by an achor.
• :only-child and :only-of-type selectors

Another minimalistic CSS framework that makes a webpage pretty

A pure CSS form plugin

TL;DR Nearly 50% of HWB possible values tends to grey shades.

In both HWB & HSL colors, we can describe white and black and a full scale of grays using any hue we want. It doesn’t matter what hue we provide in either table

Lucky for us, browsers don’t generally render gradients using naive HSL math: currently browsers convert everything to sRGB before mixing. Gradients in RGB can still get muddy at times