{"id":699,"date":"2009-02-10T21:09:24","date_gmt":"2009-02-11T02:09:24","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/699"},"modified":"2009-02-10T21:09:24","modified_gmt":"2009-02-11T02:09:24","slug":"css-style-naming-recommendations","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/699","title":{"rendered":"CSS Style Naming Recommendations"},"content":{"rendered":"<p>From Six Revisions, \u201c<a href=\"http:\/\/sixrevisions.com\/css\/css-tips\/css-tip-2-structural-naming-convention-in-css\/\" target=\"_blank\">CSS Tip #2: Structural Naming Conventions in CSS<\/a>.\u201d<img loading=\"lazy\" title=\"Sears Tower\" style=\"border-right: 0px; border-top: 0px; display: inline; margin-left: 0px; border-left: 0px; margin-right: 0px; border-bottom: 0px\" height=\"284\" alt=\"Sears Tower\" src=\"http:\/\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2009\/02\/image4.png\" width=\"238\" align=\"right\" border=\"0\" \/><\/p>\n<p>&#160;<\/p>\n<p>In a nutshell, they recommend naming CSS classes based on the structure of the document instead of a commonly used presentational style. For example, you could give a DIV an id of \u201crightColumn.\u201d That implies that the div (and corresponding CSS class) must be the right column. Sure, until your designer decides that the column should instead be located on the left side in a new version. The structural approach would be to name the column based on the use of the column, not based on it\u2019s presentation. For example, it might be called, \u201cnavigationColumn&quot;.<\/p>\n<p>I know I\u2019ve used a mix of presentational and structural naming conventions in the past in CSS, but I\u2019m definitely inclined to follow this general advice of going with structural names.<\/p>\n<p>There\u2019s plenty of other examples and details in the post <a href=\"http:\/\/sixrevisions.com\/css\/css-tips\/css-tip-2-structural-naming-convention-in-css\/\" target=\"_blank\">here<\/a>.<\/p>\n<p>What\u2019s your pattern for naming styles?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From Six Revisions, \u201cCSS Tip #2: Structural Naming Conventions in CSS.\u201d &#160; In a nutshell, they recommend naming CSS classes based on the structure of the document instead of a commonly used presentational style. For example, you could give a DIV an id of \u201crightColumn.\u201d That implies that the div (and corresponding CSS class) must [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-bh","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1442,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1442","url_meta":{"origin":699,"position":0},"title":"Nest Thermostat API\/Protocol","date":"January 8, 2012","format":false,"excerpt":"While Nest Labs hasn\u2019t released a formal (documented & supported) API, I thought I\u2019d do a bit of digging to see how they\u2019re using the network and what might be achievable. A few things are going on, the majority as you\u2019d probably expect. The web interface is using a long\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"image","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/01\/image_thumb7.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1377,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1377","url_meta":{"origin":699,"position":1},"title":"EzData for Ember.js","date":"January 1, 2012","format":false,"excerpt":"Previous post: Entity reference I\u2019ve been extending my original post (above) in an effort to create a simple entity system using Ember.js (SproutCore 2.0). While it\u2019s grown in sophistication, it is far from complete. The project is now located on GitHub. This is the introduction, from the readme on GitHub.\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1397,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1397","url_meta":{"origin":699,"position":2},"title":"A post not related to Nest thermostat hardware&hellip;.","date":"January 3, 2012","format":false,"excerpt":"I typed in https:\/\/www.nest.com this evening and instead of the nice looking Nest.com web site, I got this: What?! I hadn\u2019t actually noticed that I\u2019d typed https at first, so I was a bit baffled for a moment. After closer investigation, Nest doesn\u2019t have HTTPS apparently for their marketing\/support web\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"SNAGHTML69c9dbf8","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/01\/SNAGHTML69c9dbf8_thumb.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1565,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1565","url_meta":{"origin":699,"position":3},"title":"Knockout.JS: Dictionary\/Index and ObservableArray, Part 2","date":"March 10, 2012","format":false,"excerpt":"Ryan suggested an alternative in a comment (and corresponding jsFiddle) to the technique that I\u2019d used in my previous Knockout.JS post. Following his suggestion, I made a few tweaks to my original function (and renamed it yet again): ko.observableArray.fn.withIndex = function (keyName) { var index = ko.computed(function () { var\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1076,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1076","url_meta":{"origin":699,"position":4},"title":"How to embed and use the Google Web Fonts in Silverlight","date":"May 23, 2010","format":false,"excerpt":"There are a few steps necessary to using one of the Google Web Fonts in Silverlight. Step 1 Go to the directory of web fonts here. \u00a0 Step 2 Pick your favorite font and click the embed link: Step 3 Verify the license is acceptable to your needs. Step 4\u2026","rel":"","context":"In &quot;Silverlight&quot;","img":{"alt_text":"SNAGHTML5afad2c6","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2010\/05\/SNAGHTML5afad2c6.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1963,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1963","url_meta":{"origin":699,"position":5},"title":"Blue Iris 3 and Samsung SmartCam SNH-1011N","date":"October 9, 2013","format":false,"excerpt":"If you\u2019ve got a Samsung SmartCam SNH-1011N and you want to use it with Blue Iris 3, I found a reasonable currently undocumented way to make it work. The camera currently isn\u2019t officially supported by Blue Iris, but it can be made to work with a few simple steps. I\u2019ve\u2026","rel":"","context":"In &quot;General&quot;","img":{"alt_text":"image","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2013\/10\/image_thumb1.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/699"}],"collection":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/comments?post=699"}],"version-history":[{"count":0,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/699\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/categories?post=699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/tags?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}