{"id":11304,"date":"2019-06-17T11:08:30","date_gmt":"2019-06-17T09:08:30","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=11304"},"modified":"2019-06-17T11:08:30","modified_gmt":"2019-06-17T09:08:30","slug":"what-are-css-modules-and-why-do-we-need-them","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/what-are-css-modules-and-why-do-we-need-them\/","title":{"rendered":"What are CSS Modules and why do we need them?"},"content":{"rendered":"\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-css-tricks\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"PCZx5Ocas7\"><a href=\"https:\/\/css-tricks.com\/css-modules-part-1-need\/\">What are CSS Modules and why do we need them?<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;What are CSS Modules and why do we need them?&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/css-modules-part-1-need\/embed\/#?secret=2i52ki7sVG#?secret=PCZx5Ocas7\" data-secret=\"PCZx5Ocas7\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-0\"><a href=\"https:\/\/css-tricks.com\/css-modules-part-1-need\/#article-header-id-0\">#<\/a>What are CSS Modules?<\/h3>\n\n\n\n<p>According to the <a href=\"https:\/\/github.com\/css-modules\/css-modules\">repo<\/a>, CSS modules are:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>CSS files in which all class names and animation names are scoped locally by default.<\/p><\/blockquote>\n\n\n\n<p>So CSS Modules is not an <em>official spec<\/em> or an <em>implementation in the browser<\/em> but rather a process in a build step (with the help of <a href=\"https:\/\/webpack.github.io\/\">Webpack<\/a> or <a href=\"http:\/\/browserify.org\/\">Browserify<\/a>) that changes class names and selectors to be scoped (i.e. kinda like namespaced). <\/p>\n\n\n\n<p><strong><a href=\"https:\/\/css-tricks.com\/css-modules-part-1-need\/\">Read more on CSS tricks<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>#What are CSS Modules? According to the repo, CSS modules are: CSS files in which all class names and animation names are scoped locally by default. So CSS Modules is not an official spec or an implementation in the browser but rather a process in a build step (with the help of Webpack or Browserify) [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[142,37,491],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11304"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=11304"}],"version-history":[{"count":1,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11304\/revisions"}],"predecessor-version":[{"id":11305,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11304\/revisions\/11305"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=11304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=11304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=11304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}