8 Years of UI Development: Essential CSS Tricks Every Frontend Engineer Should Know

After 8 years of UI development, from beginner to semi‑veteran, I share some CSS tips I use in my work.

1. Using currentColor

currentColor is a CSS variable that refers to the current element’s (or its parent’s) text color. It works well on mobile, especially for skinning, reducing code. The effect is shown in the following images.

It can also define background colors, pseudo‑element borders, etc.

2. 1 px lines on high‑density screens

On devices with device‑pixel‑ratio ≥2, a declared 1 px becomes 2 px (or more). Since CSS doesn’t support 0.5 px, a common workaround is to draw the border on a pseudo‑element and scale it via media queries. The solution code is illustrated below.

The border is applied to the pseudo‑element, so it appears as 1 px on retina screens while remaining unchanged on lower‑density screens.

3. Vertically centering text and icons

In QQ Music’s song list, icons next to text need vertical alignment. Four methods are shown; the second works best on desktop, the fourth on mobile.

I use the second method most on PC and the fourth on mobile.

4. Multi‑line ellipsis

For truncating text to multiple lines with an ellipsis, the non‑standard

-webkit-line-clamp

property can be used. The following images demonstrate the CSS.

5. Creating triangle arrows with borders

Instead of images, CSS borders can draw triangle arrows. For IE6 compatibility use dashed and solid borders; otherwise solid is sufficient. The code and result are shown.

Thanks for reading!