--- title: Best CSS-Tricks posts — September 2021 | daily.dev description: The most upvoted CSS-Tricks posts from September 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2021/09 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2021/09 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — September 2021 | daily.dev og:description: The most upvoted CSS-Tricks posts from September 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 — September 2021 1. 1 [](https://daily.dev/posts/creating-the-perfect-commit-in-git-unoqikl74 "Creating the Perfect Commit in Git") Article CSS-Tricks·5y Creating the Perfect Commit in Git This article is part of our “Advanced Git’ series. Part 2: Branching Strategies in Git Part 3: Better Collaboration With Pull Requests Part 4: Rebase vs. Merge (Coming soon!) Part 6: Interactive Rebase Part 7: Using the Reflog to Restore Lost Commits. 92 1 2. 2 [](https://daily.dev/posts/what-i-wish-i-knew-about-css-when-starting-out-as-a-frontender-uqqkz-yp1 "What I Wish I Knew About CSS When Starting Out As A Frontender") Article CSS-Tricks·5y What I Wish I Knew About CSS When Starting Out As A Frontender The Box Model (e.g. box-sizing , height , width , margin , padding ) The Document Flow and Positioning (e,g. position , top , left , etc.) There are also some useful concepts to keep in mind when building reusable and composable components. 47 1 3. 3 [](https://daily.dev/posts/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine-mlvtkbexc "I completely ignored the front end development scene for 6 months. It was fine") Article CSS-Tricks·5y I completely ignored the front end development scene for 6 months. It was fine The number of languages and frameworks you know matters very little. What actually matters is your ability to up-skill quickly and effectively. If you focus on: learning how you best learn, andpracticing effectively communicating the things you've learned you can't go wrong. I wouldn't trade that experience for anything. 24 3 4. 4 [](https://daily.dev/posts/twitter-s-div-soup-and-uglyfied-css-explained-d-5b-ptfq "Twitter's div Soup and Uglyfied CSS, Explained") Article CSS-Tricks·5y Twitter's div Soup and Uglyfied CSS, Explained React Native for Web provides cross platform primitives that normalize inconsistencies and allow to build web applications that are touch friendly. To ensure reliable interactions like touch or gestures and to provide a higher degree of compatibility, React Native reimplements some web primitives making sure that semantics and accessibility are preserved if not enhanced. 20 6 5. 5 [](https://daily.dev/posts/grainy-gradients-hj9ox5vau "Grainy Gradients") Article CSS-Tricks·5y Grainy Gradients Noise makes otherwise solid colors or smooth gradients more realistic. Despite designers’ affinity for texture, noise is rarely used in web design. In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG. 18 2 6. 6 [](https://daily.dev/posts/proposal-for-css-when-olhz-aton "Proposal for CSS @when") Article CSS-Tricks·5y Proposal for CSS @when @media (min-width: 600px) { /\* WHEN this media query is true, do these styles. \*/ } @media (max-width): 599px { /\* ... \*/ }That’s a little… fidgety. The syntax is much cleaner in this new proposal. 17 1 7. 7 [](https://daily.dev/posts/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css-ubw1hb23k "7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS") Article CSS-Tricks·5y 7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element. This effectively allows you to show something on a web page that might not be present in the HTML content. In this article, I’ll walk you through seven different examples that showcase how ::before or ::after can be used to create interesting effects. 17 2 8. 8 [](https://daily.dev/posts/just-in-time-css-4y42cmvup "“Just in Time” CSS") Article CSS-Tricks·5y “Just in Time” CSS acss.io is the first usage of “Atomic CSS’ where the point of it is to be a compiler. The result is far less CSS than you’d see in an average stylesheet. It only generates the CSS that you actually need, because you asked for it, and no more. 15 1 9. 9 [](https://daily.dev/posts/web-streams-everywhere-and-fetch-for-node-js--bu7cyuadl "Web Streams Everywhere (and Fetch for Node.js)") Article CSS-Tricks·5y Web Streams Everywhere (and Fetch for Node.js) Streaming involves splitting a resource into smaller pieces and processing each chunk one at a time. There are three kinds of streams: readable streams, writable streams, and transform streams. The original Node streams aren’t being deprecated or removed but they will now co-exist with the web standard stream API. 13 10. 10 [](https://daily.dev/posts/can-we-have-custom-media-queries-please--jwyg7rq8f "Can we have custom media queries, please?") Article CSS-Tricks·5y Can we have custom media queries, please? The custom media queries section explains how to define and reuse aliases for media queries. Custom media queries are in the spec for years, but there doesn't seem to be much interest in implementing them. Neither MDN nor caniuse.com knows about the feature, yet. 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/09#page","url":"https://daily.dev/sources/css_tricks/best-of/2021/09","name":"Best CSS-Tricks Posts — September 2021","description":"The most upvoted CSS-Tricks posts from September 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/09#items","numberOfItems":10,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/creating-the-perfect-commit-in-git-unoqikl74","name":"Creating the Perfect Commit in Git"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/what-i-wish-i-knew-about-css-when-starting-out-as-a-frontender-uqqkz-yp1","name":"What I Wish I Knew About CSS When Starting Out As A Frontender"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine-mlvtkbexc","name":"I completely ignored the front end development scene for 6 months. It was fine"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/twitter-s-div-soup-and-uglyfied-css-explained-d-5b-ptfq","name":"Twitter's div Soup and Uglyfied CSS, Explained"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/grainy-gradients-hj9ox5vau","name":"Grainy Gradients"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/proposal-for-css-when-olhz-aton","name":"Proposal for CSS @when"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css-ubw1hb23k","name":"7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/just-in-time-css-4y42cmvup","name":"“Just in Time” CSS"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/web-streams-everywhere-and-fetch-for-node-js--bu7cyuadl","name":"Web Streams Everywhere (and Fetch for Node.js)"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/can-we-have-custom-media-queries-please--jwyg7rq8f","name":"Can we have custom media queries, please?"}]},{"@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":"September 2021"}]}]} ```