--- title: Best CSS posts of 2023 | daily.dev description: The most upvoted CSS posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/css/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/css/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best CSS posts of 2023 | daily.dev og:description: The most upvoted CSS posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS — 2023 1. 1 [](/posts/the-react-ecosystem-in-2023-t1c5bte1z "The React Ecosystem in 2023") Article Builder.io · 3y The React Ecosystem in 2023 The React Ecosystem celebrates its 10th anniversary in 2023 as the ecosystem continues to flourish. For those who are new to React, getting started can be a daunting task. With a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging. 603 38 2. 2 [](/posts/css-trick-transition-from-height-0-to-auto--wwxc8nnwz "🧙‍♂️ CSS trick: transition from height 0 to auto!") Article Community Picks · 3y 🧙‍♂️ CSS trick: transition from height 0 to auto! Learn how to transition from height 0 to auto in CSS using CSS Grid. Avoid fixed heights and use a neat trick with grid-template-rows. 573 26 3. 3 [](/posts/10-web-development-trends-in-2023-5h3aw-hrx "10 Web Development Trends in 2023") Article Robin Wieruch · 4y 10 Web Development Trends in 2023 The most popular meta framework called Next.js comes on top of React.js. SSR is all over the place when working with JavaScript frameworks these days. Other meta frameworks like SvelteKit are catching up. SSR has been competing with static site generation (SSG) for a while for the perfect performance. 559 58 4. 4 [](/posts/an-interactive-guide-to-css-grid-qaklckagh "An Interactive Guide to CSS Grid") Article Josh W Comeau · 3y An Interactive Guide to CSS Grid Learn about the fundamentals of CSS Grid, including how it works and how it can be used to create complex layouts. 544 10 5. 5 [](/posts/introducing-freecodecamp-press-free-books-for-developers-m42onyqxg "Introducing freeCodeCamp Press – Free Books for Developers") Article freeCodeCamp · 3y Introducing freeCodeCamp Press – Free Books for Developers FreeCodeCamp has published more than 10,000 tutorials over the years. Now we're publishing more comprehensive books and handbooks that will teach you everything you need to know to get started with a certain programming language or tool. The freeCodeCamp community publishes shorter, more focused guides that aim to answer a specific question. 462 23 6. 6 [](/posts/css-tips-for-better-web-development-tbmegdu5s "CSS Tips for Better Web Development") Article Builder.io · 4y CSS Tips for Better Web Development Explore popular and unique CSS tricks and tips to make your website stand out, including creating smooth snapping product carousels, implementing sticky headers and footers, and using CSS variables for complex animations. 448 36 7. 7 [](/posts/3d-in-css-u28k7pkpd "3D in CSS") Article Community Picks · 3y 3D in CSS Learn how to use 3D effects in CSS to create depth and perspective in web design. The 'perspective' property enables a 3D space for child elements, while 'translate3d' and 'rotate3d' are used to move and rotate elements in the 3D space. Using 3D effects can provide more screen real estate and enhance user experience. 443 23 8. 8 [](/posts/modern-css-for-2024-nesting-layers-and-container-queries-kcdbwmmu5 "Modern CSS for 2024: Nesting, Layers, and Container Queries") Article Builder.io · 3y Modern CSS for 2024: Nesting, Layers, and Container Queries Explore the latest CSS features including native CSS nesting, layers, and container queries. Discover how these features can improve your CSS code and make responsive design easier. 345 15 9. 9 [](/posts/new-viewport-units-lkicakzcc "New Viewport Units") Article Ahmad Shadeed · 3y New Viewport Units New Viewport Units - Ahmad Shadeed We have been using CSS viewport units since 2012\. They are useful to help us in sizing elements based on the viewport width or height. But using the unit on mobile is buggy. The reason is that viewport size won’t include the browser’s address bar UI. 343 28 10. 10 [](/posts/patterns-tjtxlzw2b "Patterns") Article Community Picks · 3y Patterns A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. 326 11 11. 11 [](/posts/tailwind-css-tips-and-tricks-worth-knowing-tvycaidq8 "Tailwind CSS Tips and Tricks Worth Knowing") Article Builder.io · 3y Tailwind CSS Tips and Tricks Worth Knowing Tailwind allows us to change the style of an element based on its state with helper classes. There are some times where we are forced to use CSS for our styles. Tailwind has some very useful and easy-to-use animation utility classes. For example, we can add the transition color class and set a duration of 300 milliseconds. 323 38 12. 12 [](/posts/optimal-images-in-html-jns-kqls "Optimal Images in HTML") Article Community Picks · 4y Optimal Images in HTML Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing Pages Customize and optimize high performing landing pages within your existing site or app Headless CMS. Visually create and seamlessly manage content on any tech stack. 320 20 13. 13 [](/posts/create-a-virtual-world-with-javascript-5gtzoschy "Create a Virtual World with JavaScript") Article freeCodeCamp · 3y Create a Virtual World with JavaScript Learn how to create a virtual world using JavaScript, HTML, and CSS. The course covers building a spatial graph, user-friendly interfaces, generating road borders and buildings, loading real-world data, and more. 291 8 14. 14 [](/posts/you-don-t-need-javascript-for-that-ghdrvlg6e "You don't need JavaScript for that") Article Hacker News · 3y You don't need JavaScript for that The article discusses the rule of least power in web development, which advocates for choosing the least powerful language suitable for a given purpose. It highlights examples of using native HTML and CSS instead of JavaScript, such as creating custom switches, using the datalist element for autosuggest, utilizing the native color picker, implementing accordions, and using dialog modals. The article also mentions future features that will further reduce the need for JavaScript. 284 14 15. 15 [](/posts/astro-3-0-zeb8kzxrr "Astro 3.0") Article Community Picks · 3y Astro 3.0 Astro 3.0 is the first major web framework to support the View Transitions API. Fade, slide, morph, and even persist stateful elements across page navigation with ease. New features include Image Optimization (stable) and faster Rendering Performance. 279 12 16. 16 [](/posts/web-design-trends-2023-ij7mepn9s "Web Design Trends 2023") Article Red Stapler · 4y Web Design Trends 2023 Bold Typography is being used more frequently to make a statement and grab the attention of users. 3D Transform, Filter and new CSS features are going to unlock lots of interesting web design purely on CSS. Dark mode/Dark Design is expected to be a popular trend in web design this year. 267 24 17. 17 [](/posts/why-tailwind-css-won-ley4dakbz "Why Tailwind CSS Won") Article Matt Rickard · 3y Why Tailwind CSS Won Tailwind CSS has become synonymous to some degree with the UI components shipped through Tailwind UI (which is a UI framework) It replaces a generation of sites built with Twitter Bootstrap. Tailwind is tree-shaken by default and doesn’t have its own ideas of grids or flexboxes. 259 26 18. 18 [](/posts/css-variables-101-taililocv "CSS Variables 101") Article Community Picks · 3y CSS Variables 101 CSS Variables 101 CSS variables (AKA custom properties) have been supported in web browsers for almost four years. With CSS variables, this can be made much better like so. 240 12 19. 19 [](/posts/the-modern-way-of-serving-images-mqvpxcixa "The modern way of serving images") Article Community Picks · 3y The modern way of serving images The HTTPArchive found at least 70% of all websites have an image as the most prominent element, yet only 34% of the web uses to create responsive & performant images. To change this, the following article will guide you through responsive image techniques, and introduce a novel technique that aims to make tags work (almost) like tags. 226 14 20. 20 [](/posts/playcss---improve-your-css-skills-by-playing-daily-challenges--pccrfu1mu "playCSS - Improve your CSS skills by playing daily challenges 💪") Article Product Hunt · 3y playCSS - Improve your CSS skills by playing daily challenges 💪 PlayCSS was hunted by Frank Eno in Design Tools and Developer Tools. PlayCSS is not rated yet. The easiest way to translate a website Support is great. "Feel free to leave some feedback about this project, it will mean a lot to me," says the makers of playCSS. 223 11 21. 21 [](/posts/css-loaders-com-the-biggest-collection-of-loading-animations-more-than-500--clodcli1v "css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)") Article CSS Articles · 3y css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯) Css-loaders.com: The Biggest Collection of Loading Animations (more than 500) I collected all my CSS-only loaders into one unique place. Around 580 loaders are made using only one element! 221 7 22. 22 [](/posts/why-we-re-bad-at-css-xay7hnmqw "Why we're bad at CSS") Article Community Picks · 3y Why we're bad at CSS CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything. 211 19 23. 23 [](/posts/mastering-css-grid-cz0bblost "Mastering CSS Grid") Article Community Picks · 3y Mastering CSS Grid A series of concise lectures and hands-on exercises will guide you through everything you need to know about creating responsive layouts for all of your web applications. You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas. 205 12 24. 24 [](/posts/how-to-build-a-portfolio-website-with-react-tailwind-css-vuafwxiui "How to build a portfolio website with React & Tailwind CSS") Article DEV · 4y How to build a portfolio website with React & Tailwind CSS Every developer must have a portfolio website to show off their skills and projects. We will build portfolio website with React.js and Tailwind CSS. 203 19 25. 25 [](/posts/kuma-ui-ufn6zawzp "Kuma UI") Article Community Picks · 3y Kuma UI Kuma UI Empower Your Web with Ultimate Performance and Flexibility. Headless, zero-runtime UI components, build top-performing websites effortlessly. Enjoy maximum customization freedom with our headless components. 201 29 [See all CSS archives](/tags/css/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/css/best-of/2023#page","url":"https://daily.dev/tags/css/best-of/2023","name":"Best CSS Posts of 2023","description":"The most upvoted CSS posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-react-ecosystem-in-2023-t1c5bte1z","name":"The React Ecosystem in 2023"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/css-trick-transition-from-height-0-to-auto--wwxc8nnwz","name":"🧙‍♂️ CSS trick: transition from height 0 to auto!"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/10-web-development-trends-in-2023-5h3aw-hrx","name":"10 Web Development Trends in 2023"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/an-interactive-guide-to-css-grid-qaklckagh","name":"An Interactive Guide to CSS Grid"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/introducing-freecodecamp-press-free-books-for-developers-m42onyqxg","name":"Introducing freeCodeCamp Press – Free Books for Developers"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/css-tips-for-better-web-development-tbmegdu5s","name":"CSS Tips for Better Web Development"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/3d-in-css-u28k7pkpd","name":"3D in CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/modern-css-for-2024-nesting-layers-and-container-queries-kcdbwmmu5","name":"Modern CSS for 2024: Nesting, Layers, and Container Queries"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/new-viewport-units-lkicakzcc","name":"New Viewport Units"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/patterns-tjtxlzw2b","name":"Patterns"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/tailwind-css-tips-and-tricks-worth-knowing-tvycaidq8","name":"Tailwind CSS Tips and Tricks Worth Knowing"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/optimal-images-in-html-jns-kqls","name":"Optimal Images in HTML"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/create-a-virtual-world-with-javascript-5gtzoschy","name":"Create a Virtual World with JavaScript"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/you-don-t-need-javascript-for-that-ghdrvlg6e","name":"You don't need JavaScript for that"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/astro-3-0-zeb8kzxrr","name":"Astro 3.0"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/web-design-trends-2023-ij7mepn9s","name":"Web Design Trends 2023"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/why-tailwind-css-won-ley4dakbz","name":"Why Tailwind CSS Won"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/css-variables-101-taililocv","name":"CSS Variables 101"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/the-modern-way-of-serving-images-mqvpxcixa","name":"The modern way of serving images"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/playcss---improve-your-css-skills-by-playing-daily-challenges--pccrfu1mu","name":"playCSS - Improve your CSS skills by playing daily challenges 💪"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/css-loaders-com-the-biggest-collection-of-loading-animations-more-than-500--clodcli1v","name":"css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/why-we-re-bad-at-css-xay7hnmqw","name":"Why we're bad at CSS"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/mastering-css-grid-cz0bblost","name":"Mastering CSS Grid"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-build-a-portfolio-website-with-react-tailwind-css-vuafwxiui","name":"How to build a portfolio website with React & Tailwind CSS"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/kuma-ui-ufn6zawzp","name":"Kuma UI"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"CSS","item":"https://daily.dev/tags/css"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/css/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```