{"id":251555,"date":"2017-02-16T07:40:26","date_gmt":"2017-02-16T14:40:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=251555"},"modified":"2017-02-16T07:40:26","modified_gmt":"2017-02-16T14:40:26","slug":"coding-css-context","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/coding-css-context\/","title":{"rendered":"Coding CSS for Context"},"content":{"rendered":"<p>Snook on naming a class:<\/p>\n<blockquote><p>Here&#8217;s what&#8217;s important:<\/p>\n<ul>\n<li>We want to identify that this is a variation on our button.<\/li>\n<li>We want to indicate the purpose of this button style.<\/li>\n<li>We want to avoid tying the code to a particular context that could change.<\/li>\n<\/ul>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Snook on naming a class: Here&#8217;s what&#8217;s important: We want to identify that this is a variation on our button. We want to indicate the purpose of this button style. We want to avoid tying the code to a particular context that could change.<\/p>\n","protected":false},"author":3,"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":[17],"tags":[588],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":255971,"url":"https:\/\/css-tricks.com\/naming-things-is-only-getting-harder\/","url_meta":{"origin":251555,"position":0},"title":"Naming Things is Only Getting Harder","date":"June 21, 2017","format":false,"excerpt":"I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment. They're not overly complicated. They are shorthand properties for expressing where an element should start and end on a grid's defined columns and rows. What caught me was the fact that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":266639,"url":"https:\/\/css-tricks.com\/working-towards-better-naming\/","url_meta":{"origin":251555,"position":1},"title":"Working Towards Better Naming","date":"February 26, 2018","format":false,"excerpt":"There is a quote that I bet every one of you has heard many times. You know the one. The one that reminds you how hard naming is. Let\u2019s talk names. We talk often about how hard naming is, but it\u2019s less common see people talk about how to get\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":265461,"url":"https:\/\/css-tricks.com\/stop-using-css-selectors-non-css\/","url_meta":{"origin":251555,"position":2},"title":"&#8220;Stop Using CSS Selectors for Non-CSS&#8221;","date":"January 16, 2018","format":false,"excerpt":"I saw Nicole Dominguez tweet this the other day: say it louder for the people in the backhttps:\/\/t.co\/prDKo5QaZi\u2014 nicole (@sodevious) January 11, 2018 I wasn't at this conference, so I have very little context. Normally, I'd consider it a sin to weigh in on a subject brought up by looking\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":263223,"url":"https:\/\/css-tricks.com\/abem-useful-adaptation-bem\/","url_meta":{"origin":251555,"position":3},"title":"ABEM. A more useful adaptation of BEM.","date":"December 13, 2017","format":false,"excerpt":"BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":267066,"url":"https:\/\/css-tricks.com\/using-sass-control-scope-bem-naming\/","url_meta":{"origin":251555,"position":4},"title":"Using Sass to Control Scope With BEM Naming","date":"February 28, 2018","format":false,"excerpt":"Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope\u2014but it's easy for it to lose its usefulness when you're nested quite deeply. The\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/ampersand.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7924,"url":"https:\/\/css-tricks.com\/google-cdn-naming\/","url_meta":{"origin":251555,"position":5},"title":"Google CDN Naming Conventions (and You)","date":"November 26, 2010","format":false,"excerpt":"You've seen this before: This is a way you can load a JavaScript library like jQuery directly from Google's CDN (Content Delivery Network). You can get quick copy\/paste access to these from ScriptSrc.net. See in that above URL how it is pointing to 1.4.4 specifically? That little part of the\u2026","rel":"","context":"In &quot;Article&quot;","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\/251555"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=251555"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/251555\/revisions"}],"predecessor-version":[{"id":251556,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/251555\/revisions\/251556"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=251555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=251555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=251555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}