React + CSS Modules = 😍<\/a><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"I\u2019ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to implement or level […]<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[669],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":345756,"url":"https:\/\/css-tricks.com\/css-modules-the-native-ones\/","url_meta":{"origin":239976,"position":0},"title":"CSS Modules (The Native Ones)","date":"August 2, 2021","format":false,"excerpt":"They are actually called \"CSS Module Scripts\" and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345297,"url":"https:\/\/css-tricks.com\/demystifying-styled-components\/","url_meta":{"origin":239976,"position":1},"title":"Demystifying styled-components","date":"July 26, 2021","format":false,"excerpt":"\u00a0Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey. styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I haven't yet been fully compelled by it. I'm a big fan of the basics: scoped styles by way\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-23-at-2.53.27-PM.png?fit=1200%2C584&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301770,"url":"https:\/\/css-tricks.com\/snowpack\/","url_meta":{"origin":239976,"position":2},"title":"Snowpack","date":"January 13, 2020","format":false,"excerpt":"Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports). This is how I digest it. When\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/pika.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344948,"url":"https:\/\/css-tricks.com\/ecmascript-proposal-json-modules\/","url_meta":{"origin":239976,"position":3},"title":"ECMAScript proposal: JSON modules","date":"July 21, 2021","format":false,"excerpt":"Dr. Axel Rauschmayer looks at JSON modules, which is already live in Chrome 91 (but nothing else). It looks just like an ES Modules-style import, only you asset the type at the end. import configData from '.\/config-data.json' assert {type: 'json'}; How nice is that? Once this makes its way across\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/package-json.png?fit=1200%2C594&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323373,"url":"https:\/\/css-tricks.com\/comparing-styling-methods-in-2020\/","url_meta":{"origin":239976,"position":4},"title":"Comparing Styling Methods in 2020","date":"October 19, 2020","format":false,"excerpt":"Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based architecture. But the styling methods talked about transcend Next.js, and can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/css-stylized.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305303,"url":"https:\/\/css-tricks.com\/css-x\/","url_meta":{"origin":239976,"position":5},"title":"CSS X","date":"March 16, 2020","format":false,"excerpt":"My name appears in an article from Bert Bos (co-author of the original CSS spec), so I'll consider that a life accomplishment. Bert makes the point that CSS has evolved and the working group versions things, but the working group hasn't been and doesn't really plan to be involved in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239976"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=239976"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239976\/revisions"}],"predecessor-version":[{"id":346587,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239976\/revisions\/346587"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=239976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=239976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=239976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}