Best of CSS — March 2024

1. 1
   Article

   DEV·2y

   2024 Cheat Sheet Collection

   A collection of cheat sheets for developers that provide concise reference guides for various programming languages, including CSS Grid and Flexbox. Also includes recommendations for comprehensive cheat sheet collections.

   1.7K

   55
2. 2
   Article

   DEV·2y

   Useful CSS Tools

   Explore a curated list of CSS tools that can enhance your web design by simplifying the styling process and adding creativity and efficiency. This includes gradient generators, shadow creators, glassmorphism effects, sophisticated shadows, CSS scanning, animated hamburger icons, easing gradients, neumorphic design generators, CSS buttons, glow generators, and a CSS animation playground.

   1.3K

   81
3. 3
   Article

   Community Picks·2y

   Goodbye SASS 👋, welcome back native CSS

   CSS has undergone rapid development and now includes features once unique to Sass such as variables and CSS nesting. The :is pseudo-class revolutionizes the selector concept and container queries allow elements to adjust based on container size. Despite these advancements, Sass still has advantages like mixins and functions.

   1.1K

   42
4. 4
   Article

   Community Picks·2y

   How to Build a Masonry Layout Using CSS

   Learn how to create a Masonry Layout using CSS by using the grid-template-columns function and the grid-column property.

   420

   16
5. 5
   Article

   DEV·2y

   Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game!

   A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe awareness is impossible without JavaScript and provides an interactive and inspiring experience.

   197

   5
6. 6
   Article

   Community Picks·2y

   Introducing Nue CSS

   Introducing Nue CSS, a scalable alternative to Tailwind, BEM, and CSS-in-JS. It offers a more maintainable and scalable way to write and structure CSS, making it easy to create consistent designs and simplify maintenance. Nue CSS aims to offload the burden from JavaScript developers and provide a clean separation of concerns for content creators, designers, and CSS developers.

   190

   9
7. 7
   Article

   CSS-Tricks·2y

   The Power of :has() in CSS | CSS-Tricks

   Learn about the power of :has() in CSS, a pseudo-class that allows you to style elements based on their contents. Discover the syntax and examples of how to use :has() to enhance your web projects.

   182

   10
8. 8
   Article

   Community Picks·2y

   Tailwind CSS Animated

   Learn more about Tailwind CSS Animated and its benefits.

   176

   6
9. 9
   Article

   David Walsh·2y

   I’m So Old: Web Edition

   The post reminisces about the early days of web development, highlighting outdated practices and tools.

   152

   19
10. 10
    Article

    Community Picks·2y

    Lightning CSS

    Transform and minify CSS files with the Lightning CSS plugin.

    101

    1
11. 11
    Article

    Community Picks·2y

    Free Resources Every Web Developer Should Know About

    Explore a list of free resources that every web developer should know about, including code editors, CSS resources, JavaScript resources, React resources, web design resources, developer communities and forums, learning platforms and tutorials, collaboration and project management tools, and testing and debugging tools.

    92

    3
12. 12
    Article

    gitconnected·2y

    The ULTIMATE Beginners Guide To Becoming a Web Developer

    This post is a comprehensive guide for beginners who want to become web developers. It covers various topics including how the web works, workspace setup, HTML, CSS, JavaScript, TypeScript, version control, package management, frontend frameworks, and interview preparation.

    88

    4
13. 13
    Article

    Community Picks·2y

    A minimalist, beautiful Radial Background Generator

    A minimalist Radial Background Generator that allows users to customize colors and size

    83

    4
14. 14
    Article

    Collections·2y

    What's New in Tailwind CSS 4: Performance Improvements, Smaller Footprint, and Increased Flexibility

    Tailwind CSS 4 brings performance improvements, smaller file sizes, and increased flexibility to developers, making it an efficient and convenient way to style web applications.

    75

    11
15. 15
    Article

    asayer·2y

    The Benefits of using CSS Modules

    CSS modules provide a way to write CSS code that is easy to reuse and organize, while solving common problems with CSS in large-scale projects. They enable local scope, support composition and inheritance of styles, and integrate well with modern web development tools and frameworks.

    70

    2
16. 16
    Article

    DEV·2y

    Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript

    Learn how to create interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript. The post provides code examples and explains the implementation process.

    69
17. 17
    Article

    Collections·2y

    Tailwind CSS v4 Alpha: Open-Sourcing Big Changes for Speed and Simplicity

    Tailwind CSS V4 is now open-sourced and brings a faster engine, composable variants, modern CSS features, and simplified installation and customization. Future updates will include support for JavaScript configuration files, additional dark modes, plugins and custom utilities, and prefix support.

    69

    2
18. 18
    Article

    RUBYLAND·2y

    Tailwind has won

    Tailwind has emerged as the preferred CSS framework due to its extensive styles, excellent documentation, and flexibility. It is used in combination with a custom design system, allowing for easy style sharing across components.

    65

    6
19. 19
    Article

    Community Picks·2y

    Going beyond pixels and (r)ems in CSS

    Learn about container query length units in CSS and how they can be used to create responsive designs based on the size of the containing element.

    63

    2
20. 20
    Article

    DEV·2y

    Dev Coffee

    This post is a tutorial on creating a CSS art of a coffee cup. It provides step-by-step instructions and code snippets to create the art piece.

    58

    7
21. 21
    Article

    DEV·2y

    Styling Checkboxes and Switches

    This post provides a tutorial on how to style checkboxes and switches in web development. It covers clearing default styling, setting initial size, adapting to dark mode, adding hover effects, creating checkmarks, updating colors, creating variants, and styling switches.

    52

    5
22. 22
    Article

    LogRocket·2y

    Exploring Tailwind Oxide

    Tailwind Oxide is the next evolution of Tailwind CSS, addressing challenges and streamlining the setup process. It comes with a unified toolchain, simplified configurations, and improved performance. Developers can use Tailwind Oxide without worrying about the setup and have more flexibility to create custom interfaces.

    50

    1
23. 23
    Article

    Frontend Masters·2y

    What is safe alignment in CSS?

    The 'safe' keyword in CSS is used to prevent content alignment from causing data loss, where content becomes positioned off-screen and inaccessible. It ensures that elements stick to the top and can always be scrolled to.

    45

    2