Top 10 CSS One-Liners I Love to Use

CSS one-liners can significantly enhance your web development workflow, providing quick and effective solutions for common styling challenges. Here are my top 10 CSS one-liners that you’ll find incredibly useful.

1. Aspect Ratio

Setting a fixed aspect ratio for an element is a breeze with this one-liner. It’s perfect for maintaining the dimensions of videos or images.

.box {
  width: 90%;
  aspect-ratio: 16/9;
}

2. Logical Properties

Simplify your margin and padding definitions with logical properties. These are especially handy for responsive designs.

.box {
  margin-block: 5px 10px;    /* 5px top margin, 10px bottom margin */
  margin-inline: 20px 30px;  /* 20px left margin, 30px right margin */
}

3. Centering with Flexbox

Center any element with a single line using Flexbox.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. Text Overflow

Ensure long text is truncated with an ellipsis, maintaining a neat and tidy layout.

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Sticky Footer

Create a sticky footer that stays at the bottom of the viewport with this simple trick.

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

6. Variable Font Size

Make your font size responsive to the viewport width with a single line.

.text {
  font-size: calc(16px + 1vw);
}

7. Full-Width Container

Ensure your container takes up the full width of the viewport, minus any padding.

.container {
  width: calc(100% - 20px);
}

8. Custom Scrollbar

Style your scrollbar to match your design aesthetic.

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

9. Smooth Scroll

Enable smooth scrolling for a better user experience.

html {
  scroll-behavior: smooth;
}

10. Dark Mode

Easily switch to dark mode by leveraging CSS variables.

:root {
  --bg-color: white;
  --text-color: black;
}
body.dark-mode {
  --bg-color: black;
  --text-color: white;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Conclusion

These CSS one-liners can save you time and simplify your development process. Incorporate them into your projects to achieve cleaner and more efficient code. By integrating these snippets into your daily workflow, you can enhance the aesthetics and functionality of your web projects efficiently and effectively.

That's all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 25957! 🤗

Comments

[Safdar Ali]

Subscribe to my YouTube Channel if you find it helpful! Subscribing is free, and it will motivate me to stay active here. 😊

[João Angelo]

Hi Safdar Ali,
Top, very nice and helpful !
Thanks for sharing.