Top 10 CSS One-Liners I Love to Use

By coursity / July 19, 2024

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;
}

Enter fullscreen mode
Exit fullscreen mode

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 */
}

Enter fullscreen mode
Exit fullscreen mode

3. Centering with Flexbox

Center any element with a single line using Flexbox.

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

Enter fullscreen mode
Exit fullscreen mode

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;
}

Enter fullscreen mode
Exit fullscreen mode

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%;
}

Enter fullscreen mode
Exit fullscreen mode

6. Variable Font Size

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

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

Enter fullscreen mode
Exit fullscreen mode

7. Full-Width Container

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

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

Enter fullscreen mode
Exit fullscreen mode

8. Custom Scrollbar

Style your scrollbar to match your design aesthetic.

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

Enter fullscreen mode
Exit fullscreen mode

9. Smooth Scroll

Enable smooth scrolling for a better user experience.

html { scroll-behavior: smooth;
}

Enter fullscreen mode
Exit fullscreen mode

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);
}

Enter fullscreen mode
Exit fullscreen mode

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! 🤗

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply