etc. Media query - Media query should be used to set width and height according to the breakpoints. 135 12 11. 11 [](/posts/10-google-chrome-extensions-you-should-use-as-a-developer-k1zjrq66h "10 Google Chrome Extensions you should use as a developer") Article DEV · 5y 10 Google Chrome Extensions you should use as a developer Here are some of the best Google Chrome extensions for developers. Extensions that make life easier, make you more productive, or perform an essential task better than a dedicated tool. As the vast majority of us use Chrome, it makes sense to consider Chrome extensions. Other browsers are available but Chrome is used by 62.6% of internet users. 129 14 12. 12 [](/posts/building-a-video-chat-app-with-node-js-socket-io-webrtc-rwobpbgiy "Building a Video Chat App with Node.js + Socket.io + WebRTC") Article gitconnected · 6y Building a Video Chat App with Node.js + Socket.io + WebRTC Building a Video Chat App with Node.js + Socket.io + WebRTC Taran Arora shares his tips on how to build a video chat app using JavaScript and NodeJS. It will also show you how to use PeerJS,WebRTC, and Nodemon to build the app. 121 7 13. 13 [](/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu "Skills required to be a full stack developer: a checklist") Article DEV · 5y Skills required to be a full stack developer: a checklist The skills list required to be a full stack developer is long and it can be hard to know exactly what skills you need. The often shared online resource for this kind of thing is roadmap.sh but, while it is extensive, I think the amount covered here is too much to be helpful to new developers. I have my own list, it’s a bare minimum required skills list and it looks like this: 120 9 14. 14 [](/posts/5-html-and-css-good-practices-tl7ikiwcl "5 HTML and CSS Good Practices") Article DZone · 5y 5 HTML and CSS Good Practices It is quite easy to find good practices for any technology, but unfortunately, the same cannot be said about HTML and CSS. I've made my list of 5 cases when you can create a user-friendly, or clumsy, interface using only HTML andCSS. The alt attribute is quite useful, but many developers don’t use it efficiently. 118 4 15. 15 [](/posts/if-else-in-css-iozc-msr2 "if/else in CSS") Article DEV · 5y if/else in CSS There are no conditional statements in CSS, but this may soon change with new @when and @else operator. Currently, the only way to perform a conditional statement was to use media queries. The new proposal looks much cleaner and very similar to many programming languages. It's not supported by any browser at this moment, it's not even listed on caniuse.com . 117 4 16. 16 [](/posts/css-pixel-art-generator-xpsncbn77 "CSS Pixel Art Generator") Article DZone · 5y CSS Pixel Art Generator Draw your pixel creations below, and then click "Generate CSS" to get your pixel art in CSS, which you can copy into your web pages. Sponsor Sponsor: Font Awesome 5 Pro, which was inspired by this article. For more information, visit the Font Awesome website. 104 9 17. 17 [](/posts/my-honest-opinion-on-tailwind-css-n5-dwz2mo "My honest opinion on Tailwind CSS") Article Hashnode · 5y My honest opinion on Tailwind CSS Tailwind is a utility framework that can be used to optimize and speed up your development. Tailwind should not be used if you don't have medium experience with CSS in general. Even though Tailwind has uniform classes, every website built with it is so different. 101 5 18. 18 [](/posts/how-i-make-css-art-4sbcf6-c8 "How I make CSS Art") Article Hashnode · 5y How I make CSS Art On the third of June 2021, I created my very first CSS art. I decided to write this blog post to illustrate my thought process from the very beginning up until publishing the art on codepen. Hopefully, this will attract more people into creating CSS art and have fun with it. 101 16 19. 19 [](/posts/css-3d-card-design-with-rgb-effect-tutorial-w387v2bn2 "CSS 3D Card Design with RGB Effect Tutorial") Article Red Stapler · 5y CSS 3D Card Design with RGB Effect Tutorial In this tutorial, we’re going to show you how to design and create CSS card with animating RGB and 3D tilt effect in just a few minutes. The first tutorial is how to setup the card layout from scratch using CSS. The second tutorial isHow to add 3d tilt effect using tilt.js. You can download the code of this project here. 99 2 20. 20 [](/posts/a-simple-css-trick-for-dark-mode-opensource-com-enhxrdcsh "A simple CSS trick for dark mode | Opensource.com") Article Open Source Way · 5y A simple CSS trick for dark mode | Opensource.com The prefers-color-scheme media query works the same way. The user can configure their operating system to use a light or dark theme. I specify different values of CSS variables for both modes and let the user's OS decide. This is the real power of the media query: Providing a consistent user experience from OS to web page. 98 1 21. 21 [](/posts/learn-css-grid-by-building-5-layouts-in-17-minutes-6id8kmz4i "Learn CSS Grid by Building 5 Layouts in 17 minutes") Article freeCodeCamp · 6y Learn CSS Grid by Building 5 Layouts in 17 minutes Learn CSS Grid by Building 5 Layouts in 17 minutes. Learn how to use CSS Grid to build your own website. Learn more about CSS Grid at the CSS Grid website. For more information on how CSS Grid works, visit www.cssgrid.com. To learn more about the Grid, visit the Grid website at www.cssgrid.org. 97 3 22. 22 [](/posts/new-in-chrome-93-taqoz3wio "New in Chrome 93") Article Chrome Developers · 5y New in Chrome 93 Chrome 93 will ship on September 21\. New PWA features include CSS Module Scripts and Multi-Screen Window Placement API. Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA. The PWA Summit is coming up October 6-7. 95 4 23. 23 [](/posts/pico-css-minimal-css-framework-for-semantic-html-tifergt9v "Pico.css • Minimal CSS Framework for semantic HTML") Article Hacker News · 5y Pico.css • Minimal CSS Framework for semantic HTML Large and complex CSS file increase memory usage and cause longer style calculations. A great design should be minimal, fast and maintainable. Most popular CSS frameworks are bulky, overkill and hard to customize. Huge stackings of wrappers and CSS classes are unnecessary for semantics elements. 93 8 24. 24 [](/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o "You want enabling CSS selectors, not disabling ones") Article CSS-Tricks · 5y You want enabling CSS selectors, not disabling ones An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element. 93 5 25. 25 [](/posts/tailwind-css-cheat-sheet---every-class-name-from-tailwind-css-on-a-single-page-5y5zuzjmt "Tailwind CSS Cheat Sheet - Every class name from Tailwind CSS on a single page") Article Product Hunt · 5y Tailwind CSS Cheat Sheet - Every class name from Tailwind CSS on a single page 90 3 [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/2021#page","url":"https://daily.dev/tags/css/best-of/2021","name":"Best CSS Posts of 2021","description":"The most upvoted CSS posts of 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2021#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/my-custom-css-reset-5w1hsb5j","name":"My Custom CSS Reset"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/tailwind-css-v3-0-tailwind-css-knchiuxts","name":"Tailwind CSS v3.0 – Tailwind CSS"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-i-structure-html-for-better-seo-results-quwh15yzv","name":"How I Structure HTML for Better SEO Results"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/10-best-websites-for-practising-and-perfecting-front-end-development-nu2hgmtcm","name":"10 Best Websites for Practising and Perfecting Front-End Development"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/learn-responsive-web-design-by-building-20-projects-a-major-freecodecamp-curriculum-update-9ot-2xnrh","name":"Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/defensive-css-tmz6xi81r","name":"Defensive CSS"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt","name":"FlexBox Cheat Sheets in 2021 || CSS 2021"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/the-ultimate-cheat-sheet-list-for-web-developers-dq615hjqi","name":"The Ultimate Cheat sheet List For Web Developers"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/6-awesome-css-layout-generators-n3cv8p4-m","name":"🔥 6 Awesome CSS Layout Generators"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/responsive-design-css-tips-osgsrngb8","name":"Responsive Design CSS tips"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/10-google-chrome-extensions-you-should-use-as-a-developer-k1zjrq66h","name":"10 Google Chrome Extensions you should use as a developer"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/building-a-video-chat-app-with-node-js-socket-io-webrtc-rwobpbgiy","name":"Building a Video Chat App with Node.js + Socket.io + WebRTC"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu","name":"Skills required to be a full stack developer: a checklist"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/5-html-and-css-good-practices-tl7ikiwcl","name":"5 HTML and CSS Good Practices"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/if-else-in-css-iozc-msr2","name":"if/else in CSS"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/css-pixel-art-generator-xpsncbn77","name":"CSS Pixel Art Generator"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/my-honest-opinion-on-tailwind-css-n5-dwz2mo","name":"My honest opinion on Tailwind CSS"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-i-make-css-art-4sbcf6-c8","name":"How I make CSS Art"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/css-3d-card-design-with-rgb-effect-tutorial-w387v2bn2","name":"CSS 3D Card Design with RGB Effect Tutorial"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/a-simple-css-trick-for-dark-mode-opensource-com-enhxrdcsh","name":"A simple CSS trick for dark mode | Opensource.com"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/learn-css-grid-by-building-5-layouts-in-17-minutes-6id8kmz4i","name":"Learn CSS Grid by Building 5 Layouts in 17 minutes"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/new-in-chrome-93-taqoz3wio","name":"New in Chrome 93"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/pico-css-minimal-css-framework-for-semantic-html-tifergt9v","name":"Pico.css • Minimal CSS Framework for semantic HTML"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o","name":"You want enabling CSS selectors, not disabling ones"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/tailwind-css-cheat-sheet---every-class-name-from-tailwind-css-on-a-single-page-5y5zuzjmt","name":"Tailwind CSS Cheat Sheet - Every class name from Tailwind CSS on a single page"}]},{"@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":"2021"}]}]} ```