--- title: Best CSS posts of 2022 | daily.dev description: The most upvoted CSS posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/css/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/css/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best CSS posts of 2022 | daily.dev og:description: The most upvoted CSS posts of 2022, 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 — 2022 1. 1 [](/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh "I made 100 CSS loaders for your next project") Article Community Picks · 4y I made 100 CSS loaders for your next project Each loader is done using a single element. Add a class to your div and start loading! Table of content The Classic The Infinity The Dots The Bars The Spinner The Continuous The Progress The Wobbling The Shapes The Pulsing That's it! 1.6K 97 2. 2 [](/posts/free-open-source-tailwind-css-components-tqkhcla01 "Free Open Source Tailwind CSS Components") Article Changelog · 4y Free Open Source Tailwind CSS Components HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more. HyperUI is an open source collection of Tailwind components. 1K 84 3. 3 [](/posts/fantastic-css-border-animation-sqthqwkmj "Fantastic CSS border animation") Article Medium · 4y Fantastic CSS border animation In this article we will use CSS to create a variety of wonderful border effects. The most commonly used one is solid , dashed which appears in the picture above dashed. CSS border also supports none , hidden , dotted , double , groove , ridge , inset , and outset other styles. 844 37 4. 4 [](/posts/the-60-hottest-front-end-tools-of-2021-css-tricks-he-fmztrl "The 60 Hottest Front-end Tools of 2021 | CSS-Tricks") Article CSS-Tricks · 5y The 60 Hottest Front-end Tools of 2021 | CSS-Tricks The Web Tools Weekly newsletter archives have been compiled into a list of the 60 most popular front-end tools of the past year. I’m sure there are at least one or two listed here that you can start using in your projects today. Some of these tools are super-practical, while others probably only made this list due to curiosity. 548 36 5. 5 [](/posts/an-interactive-guide-to-flexbox-cki6efp-g "An Interactive Guide to Flexbox") Article Josh W Comeau · 4y An Interactive Guide to Flexbox Flexbox is a remarkably powerful layout mode. It uses fluid principles to create a layout that flows seamlessly. When we truly understand how it works, we can build dynamic layouts that respond automatically. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. 508 42 6. 6 [](/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v "100 underline/overlay animations | The ultimate CSS collection") Article Community Picks · 4y 100 underline/overlay animations | The ultimate CSS collection The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on Firefox due to a known bug The 3D Warning. 465 19 7. 7 [](/posts/use-google-like-a-pro-b1nqqe7sq "Use Google like a pro") Article Community Picks · 4y Use Google like a pro Use quotes to force an exact-match search: "what is javascript" Use the OR operator to get the results related to one of the search terms. You can use the (\*) wildcards as placeholders, which will be replaced by any word or phrase. 400 18 8. 8 [](/posts/harvard-cs50-free-computer-science-university-course-fbqijhd4w "Harvard CS50 – Free Computer Science University Course") Article freeCodeCamp · 4y Harvard CS50 – Free Computer Science University Course Harvard CS50 is one of the most popular beginner computer science courses in the world. The course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web programming. 379 17 9. 9 [](/posts/super-useful-css-resources---2bztdgt6 "Super Useful CSS Resources 🌈") Article Community Picks · 4y Super Useful CSS Resources 🌈 A collection of 70 hand-picked, web-based tools which are actually useful. Each will generate pure CSS without the need for JS or any external libraries. Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials) The collection includes Property Generators - Animations - Backgrounds. 374 20 10. 10 [](/posts/making-a-fast-website-is-super-easy-vk259awq6 "Making a fast website is SUPER EASY") Article Community Picks · 4y Making a fast website is SUPER EASY For a website whose goal is to convert customers by selling goods or services, the website should be attractive to look at. Images take up a huge part of the website's total size. As of August 2022, images made up on average 45% on desktop and 44% on mobile of a page’s total weight. Optimizing the images can therefore result in big and easy wins. 344 25 11. 11 [](/posts/yes-i-can-connect-to-a-db-in-css-9ufa0-7dd "Yes, I can connect to a DB in CSS") Article Hacker News · 5y Yes, I can connect to a DB in CSS A new set of APIs give your browser the power to control CSS via its own Object Model in Javascript. This means that you can make custom CSS styles, add custom properties, and so on. The CSS Paint Worklet5 allows you to 'paint' on an element, and have the browser treat it as an image in CSS. 300 25 12. 12 [](/posts/defensive-css-uthcb69hj "Defensive CSS") Article Hacker News · 4y Defensive CSS 271 14 13. 13 [](/posts/the-css-hack-you-need-to-know--sbyq2um5f "The CSS Hack You Need To Know!") Article Dev Genius · 4y The CSS Hack You Need To Know! The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted HTML tag or element. A common practice implementation for this type of feature would be to use an additional span within an element. The span value is updated as required. 267 11 14. 14 [](/posts/better-scrolling-through-modern-css-la8pq-kjj "Better scrolling through modern CSS") Article Hashnode · 4y Better scrolling through modern CSS scrollbars are a very mundane thing that every website and every app has. They don't get much love from developers, but we should be paying a little more attention to them. Let's look at some of the things we can do in 2022 to improve the scrolling experience. 255 13 15. 15 [](/posts/understanding-layout-algorithms-wkhw-upv9 "Understanding Layout Algorithms") Article Josh W Comeau · 5y Understanding Layout Algorithms CSS is so much more than a collection of properties. It's a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms. We need to learn how the layout algorithms work, and how they use the properties we provide to them. 239 17 16. 16 [](/posts/html-reference-psu-7utf7 "HTML Reference") Article Community Picks · 4y HTML Reference HTML Reference is free and always will be! Please whitelist us in your ad blocker. Learn by example: HTMLreference.io is a free guide to HTML. It features all elements and attributes. 236 13 17. 17 [](/posts/the-complete-guide-to-full-stack-web3-development-wcaeztdpx "The Complete Guide to Full Stack Web3 Development") Article DEV · 5y The Complete Guide to Full Stack Web3 Development This is the third guide in my "Full Stack" web3 series. Building a full stack web3 app with Next.js, Polygon, Solidity, The Graph, IPFS, and Hardhat. The app we'll be building is a full Stack blog as well as a content management system (CMS) 233 12 18. 18 [](/posts/uiverse-io---universe-of-ui-hundreds-of-open-source-ui-elements-ejen0drwy "uiverse.io - Universe of UI; Hundreds of Open Source UI elements") Article Product Hunt · 4y uiverse.io - Universe of UI; Hundreds of Open Source UI elements All elements are open source and free to use. We make it easy to find and customize the perfect element for your project. We also offer hundreds of community-made CSS and HTML UI elements like buttons, inputs, checkboxes and cards. 221 17 19. 19 [](/posts/bradtraversy-50projects50days-50-mini-web-projects-using-html-css-js-e-sprwxhn "bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS") Article Pointer · 4y bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS 50 Projects in 50 Days - HTML/CSS and JavaScript and JavaScript. This is the main repository for all of the projects in the course. We are only accepting pull requests and looking at issues for bug fixes so that the code stays inline. All of these projects are part of the course and are available for download. 213 13 20. 20 [](/posts/new-css-features-in-2022-1kpslilin "New CSS Features In 2022") Article CSS {IRL} · 5y New CSS Features In 2022 There are a lot of new CSS features in development as I write this. 2022 is the year that some big ones will be landing in a browser near you. There are potential for big changes in the way we write CSS. I explored some of these new features for Smashing Magazine. 208 14 21. 21 [](/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x "AnimatiSS - A nice, colorful collection of CSS animations") Article Product Hunt · 4y AnimatiSS - A nice, colorful collection of CSS animations 201 7 22. 22 [](/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra "Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.") Article Hashnode · 4y Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS. This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build. 201 14 23. 23 [](/posts/11-authentication-mistakes-and-how-to-fix-them-kil1c-fx5 "11 Authentication Mistakes and how to fix them") Article asayer · 4y 11 Authentication Mistakes and how to fix them When authenticating a form on your web application, you must be careful not to display just one error message. Displaying a specific error message is dangerous because it could let an attacker use an automated trial-and-error method to determine a user’s username and password. Injection attacks, memory leaks, and compromised systems can occur if data provided in form input is not properly checked. All of the libraries I recommend for validation. 195 4 24. 24 [](/posts/how-to-center-a-div-with-css-10-different-ways-q4liy7pw4 "How to Center a Div with CSS – 10 Different Ways") Article freeCodeCamp · 4y How to Center a Div with CSS – 10 Different Ways In this article, you'll learn 10 different ways to center a div. We will explore how to center divs using the CSS position property, CSS Flexbox, and CSS Grid. After reading this whole article, I am confident that you will start centering divs like a pro. 193 6 25. 25 [](/posts/css-best-practices-16-ways-to-improve-your-css-skills-quickly-84zxcpdzg "CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly") Article Torque · 4y CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly By adhering to basic guidelines for writing CSS, you can make sure you produce clean, legible, and easily supportable code. Make your code readable and make it more comfortable to understand, maintain, and work with. If there is an existing style guide, stick with that. 189 10 [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/2022#page","url":"https://daily.dev/tags/css/best-of/2022","name":"Best CSS Posts of 2022","description":"The most upvoted CSS posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/i-made-100-css-loaders-for-your-next-project-uhgzkxrmh","name":"I made 100 CSS loaders for your next project"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/free-open-source-tailwind-css-components-tqkhcla01","name":"Free Open Source Tailwind CSS Components"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/fantastic-css-border-animation-sqthqwkmj","name":"Fantastic CSS border animation"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-60-hottest-front-end-tools-of-2021-css-tricks-he-fmztrl","name":"The 60 Hottest Front-end Tools of 2021 | CSS-Tricks"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/an-interactive-guide-to-flexbox-cki6efp-g","name":"An Interactive Guide to Flexbox"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v","name":"100 underline/overlay animations | The ultimate CSS collection"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/use-google-like-a-pro-b1nqqe7sq","name":"Use Google like a pro"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/harvard-cs50-free-computer-science-university-course-fbqijhd4w","name":"Harvard CS50 – Free Computer Science University Course"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/super-useful-css-resources---2bztdgt6","name":"Super Useful CSS Resources 🌈"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/making-a-fast-website-is-super-easy-vk259awq6","name":"Making a fast website is SUPER EASY"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/yes-i-can-connect-to-a-db-in-css-9ufa0-7dd","name":"Yes, I can connect to a DB in CSS"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/defensive-css-uthcb69hj","name":"Defensive CSS"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f","name":"The CSS Hack You Need To Know!"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/better-scrolling-through-modern-css-la8pq-kjj","name":"Better scrolling through modern CSS"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/understanding-layout-algorithms-wkhw-upv9","name":"Understanding Layout Algorithms"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/html-reference-psu-7utf7","name":"HTML Reference"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/the-complete-guide-to-full-stack-web3-development-wcaeztdpx","name":"The Complete Guide to Full Stack Web3 Development"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/uiverse-io---universe-of-ui-hundreds-of-open-source-ui-elements-ejen0drwy","name":"uiverse.io - Universe of UI; Hundreds of Open Source UI elements"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/bradtraversy-50projects50days-50-mini-web-projects-using-html-css-js-e-sprwxhn","name":"bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/new-css-features-in-2022-1kpslilin","name":"New CSS Features In 2022"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x","name":"AnimatiSS - A nice, colorful collection of CSS animations"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/build-5-web-apps-in-10-hours-using-next-js-react-js-tailwind-css--qpthdhwra","name":"Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS."},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/11-authentication-mistakes-and-how-to-fix-them-kil1c-fx5","name":"11 Authentication Mistakes and how to fix them"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-center-a-div-with-css-10-different-ways-q4liy7pw4","name":"How to Center a Div with CSS – 10 Different Ways"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/css-best-practices-16-ways-to-improve-your-css-skills-quickly-84zxcpdzg","name":"CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly"}]},{"@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":"2022"}]}]} ```