20 CSS One-Liners Every CSS Expert Needs to Know

Mate Marschalko
8 min readFeb 28, 2024

1. Prevent Text Selection

Ever wanted to stop users from selecting text on your page, maybe for a sleek UI element or a game interface? It’s a neat trick to keep your UI elements undisturbed by accidental text selection.

.no-select { user-select: none }

Variations include using user-select: text for areas you want to allow text selection or user-select: all to let users select all content with a single click.

Did you know? A semicolon (;) is only required at the end of a CSS declaration if it’s followed by another declaration, serving as a separator!”

2. Responsive Text Size

Striking the perfect balance between too small and too large text across devices can be tricky. Enter the magic of clamp(): this CSS function dynamically adjusts the font size based on the viewport width, ensuring your text is always just right. The syntax clamp(minimum size, preferred size, maximum size) offers a seamless reading experience:

.responsive-text { font-size: clamp(1rem, 2.5vw, 2rem) }

So what do these values control?

  • 1rem: The minimum font size to ensure text remains readable on small screens.
  • 2.5vw: The preferred size, where vw stands for viewport width. It scales the font size relative to the width of the viewport, making the text larger on wider screens and smaller on narrower ones. Here, 2.5vw means the font size will be 2.5% of the viewport width.
  • 2rem: The maximum font size to prevent the text from becoming too large on wide screens.

Experiment with these values to dial in the perfect responsiveness for your text, making sure it looks great on any device.

3. Maintain Aspect Ratio

Perfect for responsive design, setting an element’s aspect ratio will scale it beautifully while keeping its width and height in a specified ratio. The aspect-ratio: 16 / 9 declaration is ideal for videos and images that need to maintain their shape regardless of the screen size.

.aspect-ratio { aspect-ratio: 16 / 9 }

--

--

Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS