Posts tagged "css"

CSS minification strips out whitespace, comments, and unnecessary characters without changing any rules. On large stylesheets the savings are significant, and the tooling is trivial to set up.

Web fonts are one of the most common sources of layout shift and invisible text flash. The font-display property and a few preload hints can eliminate both problems.

CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Here is everything you need to know to use them well.

Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner and your layouts more robust.

CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you debug style conflicts without resorting to !important.

Aspect ratios determine how images and videos fill their containers. Getting them wrong causes layout shift and distorted media. CSS now has native solutions that make this straightforward.

Embedding images as Base64 data URIs eliminates an HTTP request but increases file size by 33% and breaks caching. Here is when the trade-off actually makes sense.

RGB and HEX are the same thing in different notations. HSL is much more intuitive for humans. CMYK lives in print. Understanding these distinctions saves you from confusing color bugs.

CSS sprites were the standard performance technique for reducing icon HTTP requests in the HTTP/1.1 era. With HTTP/2 and SVG, the calculus has changed — but understanding sprites is still valuable.