This content originally appeared on DEV Community and was authored by Safdar Ali
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! 🤗
This content originally appeared on DEV Community and was authored by Safdar Ali
Safdar Ali | Sciencx (2024-07-19T23:00:00+00:00) Top 10 CSS One-Liners I Love to Use. Retrieved from https://www.scien.cx/2024/07/19/top-10-css-one-liners-i-love-to-use-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.