--- title: Best CSS-Tricks posts — July 2021 | daily.dev description: The most upvoted CSS-Tricks posts from July 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2021/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2021/07 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — July 2021 | daily.dev og:description: The most upvoted CSS-Tricks posts from July 2021, 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-Tricks — July 2021 1. 1 [](https://daily.dev/posts/es2021-wj8aoryjp "ES2021") Article CSS-Tricks · 5y ES2021 Promise.any & AggregateError & WeakRefs & FinalizationRegistry. Objects are Logical. Assignment Operators, Numeric Separators, and String.prototype.replaceAll. ES2021 Features! are available in ES6, ES7, and ES8. 45 3 2. 2 [](https://daily.dev/posts/demystifying-styled-components-wwqmaj3rs "Demystifying styled-components") Article CSS-Tricks · 5y Demystifying styled-components styled-components is a tool that takes arbitrary CSS and assigns it to a React component. By demystifying it, we'll be able to diagnose and fix weird CSS issues with way less frustration. This article is written for experienced React developers. It may surprise you to learn that styled-Components doesn't do anything with the CSS we added to it. 33 7 3. 3 [](https://daily.dev/posts/the-nine-states-of-design-qlstt6hrt "The Nine States of Design") Article CSS-Tricks · 5y The Nine States of Design The nine states of design apply to all designs and all components. These states will repeat based on the page, user interaction, updated data, and pretty much any change of your application’s state. By thoughtfully designing for these changes, you can create a polished experience for users. 20 4. 4 [](https://daily.dev/posts/body-toggle-m0z2cyiru "Body Toggle") Article CSS-Tricks · 5y Body Toggle It’s a one-liner that toggles the class on the so you can mock up different states and toggle between them on click. I appreciate the clarity of this trick that Mikael Ainalem posted over on Reddit. Could be on any element as well! 15 3 5. 5 [](https://daily.dev/posts/a-shared-eslint-configuration-jge8gil0l "A shared ESLint configuration") Article CSS-Tricks · 5y A shared ESLint configuration Like our markdown linters, all Mapbox documentation repositories use a shared ESLint configuration. Our configuration covers everything from enforcing React best practices to improving accessibility, including: eslint- plugin-jsx-a11y checks accessibility rules on JSX elements. eslinter-plugin-es allows us to disallow unsupported ECMAScript syntax. 13 6. 6 [](https://daily.dev/posts/links-on-react-and-javascript-trvqcfh4r "Links on React and JavaScript") Article CSS-Tricks · 5y Links on React and JavaScript React 18 is coming soon, and the React team has put together a list of things to look out for. The list includes React Query, Just-In-Time translations, Compound Components, and React Hooks. There are also a number of other React-related articles. 11 7. 7 [](https://daily.dev/posts/zero-width-space-ceqfvw14d "Zero-Width Space") Article CSS-Tricks · 5y Zero-Width Space The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually. WordPress was being weird about it and not escaping it even when in a code block. 10 1 [See all CSS-Tricks archives](/sources/css%5Ftricks/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/sources/css_tricks/best-of/2021/07#page","url":"https://daily.dev/sources/css_tricks/best-of/2021/07","name":"Best CSS-Tricks Posts — July 2021","description":"The most upvoted CSS-Tricks posts from July 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2021/07#items","numberOfItems":7,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/es2021-wj8aoryjp","name":"ES2021"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/demystifying-styled-components-wwqmaj3rs","name":"Demystifying styled-components"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-nine-states-of-design-qlstt6hrt","name":"The Nine States of Design"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/body-toggle-m0z2cyiru","name":"Body Toggle"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/a-shared-eslint-configuration-jge8gil0l","name":"A shared ESLint configuration"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/links-on-react-and-javascript-trvqcfh4r","name":"Links on React and JavaScript"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/zero-width-space-ceqfvw14d","name":"Zero-Width Space"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"July 2021"}]}]} ```