Create an accessible
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Using radial gradients to create shapes. They are similar in some ways to svgs.
CSS has gotten easier to write than it is different to write.
:is to group multiple selectors such as
using logical properties instead of marg
margin-trim can help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap property
aspect-ratio to set only one dimension between the height and the width, while keeping proportions
.card:has(:hover, :focus) is easier and straightforward than
a.card-link:hover > .card
an easier way to define color palette with
--gray-dark: color-mix(in srgb, var(--primary-color), #fff 25%);. It is more maintainable!
ch for managing line lengths;
text-wrap: balance is a work in progress (65% of users can use it)
and more with cascade layers, container queries,
<selectmenu> and CSS nesting
This website is a single HTML file. It simply uses the
#anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.
and ho it differs from SCSS.
Consider mixing kebab-casing with camelCasing:
Using namespaces can help to avoid collision. In the upper example:
system is a namespace.
Value typing hints to the use cases of the variable. In the upper example:
color. It could be
fontSize for example
Descriptive names can use 2 patterns:
icyBlue which is value-based or
accent which is usage-based.
Dark mode is simpler with usage-based variables
When to use between value- and usage-base?
Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.
Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.
There are often 3 levels of abstractions:
defining the values
different property for custom controls such as
the CSS variable of use in the component such as
Use padding, relative line-height and a flow layout instead.
Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.
A great way to use CSS properties is to make "private" properties for a class and then create variants based on other CSS class modifiers that sets these variables.
The semantic version is 8 × smaller, renders faster, and is easier to modify and extend.
A class named "secondary" is definitely more explicit.
It will solves a lot of tooltip or popover issues
A search input that expands itself on focus. It animates the width, but it uses CSS grid for the main layout.
We can use css (attributes) selectors to style external links, and I think it is a great idea.
Are you sure you want to delete this link?
The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community