{"id":1385,"date":"2014-10-28T00:52:48","date_gmt":"2014-10-28T05:52:48","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=1385"},"modified":"2014-10-28T00:52:48","modified_gmt":"2014-10-28T05:52:48","slug":"css-naming-patterns-compared","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/css-naming-patterns-compared\/","title":{"rendered":"CSS Naming Patterns Compared"},"content":{"rendered":"<p>A few weeks ago, I heard about <a href=\"http:\/\/amcss.github.io\/\">AMCSS<\/a>, a newly formalized alternative to using classes for CSS hooks. I was pretty hesitant at first &ndash; and still am to some extent &ndash; if nothing else because it just feels odd.<\/p>\r\n\r\n<p>The goal of this post is to briefly compare the most common methods of organizing CSS module classes &#8211; and see how AMCSS compares.<\/p>\r\n\r\n<h2>Multi-Class<\/h2>\r\n\r\n<pre class=\"pre\"><code class=\"language-markup\">&lt;span class=\"badge\"&gt;A Badge&lt;\/span&gt;\r\n&lt;span class=\"badge badge--large\"&gt;A Large Badge&lt;\/span&gt;\r\n<\/code><\/pre>\r\n\r\n<pre class=\"pre\"><code class=\"language-css\">.badge {\r\n    display: inline-block;\r\n    background: #555;\r\n    color: #eee;\r\n}\r\n.badge--large {\r\n    font-size: 1.5em;\r\n}\r\n \r\n\/* overriding *\/\r\n.darkheader .badge {\r\n    background: #777;\r\n    color: #eee;\r\n}\r\n<\/code><\/pre>\r\n\r\n<ul>\r\n <li><strong>Good:<\/strong> overrides are easy.<\/li>\r\n <li><strong>Bad:<\/strong> HTML can feel a bit repetitive.<\/li>\r\n<\/ul>\r\n\r\n<h2>Single-Class<\/h2>\r\n\r\n<pre class=\"pre\"><code class=\"language-markup\">&lt;span class=\"badge\"&gt;A Badge&lt;\/span&gt;\r\n&lt;span class=\"badge--large\"&gt;A Large Badge&lt;\/span&gt;\r\n<\/code><\/pre>\r\n \r\n<pre class=\"pre\"><code class=\"language-css\">.badge,\r\n.badge--large {\r\n    display: inline-block;\r\n    background: #555;\r\n    color: #eee;\r\n}\r\n.badge--large {\r\n    font-size: 1.5em;\r\n}\r\n \r\n\/* overriding *\/\r\n.darkheader .badge,\r\n.darkheader .badge--large {\r\n    background: #777;\r\n    color: #eee;\r\n}\r\n<\/code><\/pre>\r\n\r\n<ul>\r\n <li><strong>Good:<\/strong> HTML is shorter.<\/li>\r\n <li><strong>Bad:<\/strong> If you need more than one modifier you&#8217;re back to multi-class anyhow.<\/li>\r\n <li><strong>Bad:<\/strong> Overrides are messy because they have to be updated when a new modifier is added. Unless&#8230;<\/li>\r\n<\/ul>\r\n\r\n<h2>Single-Class with Single Selector: |=<\/h2>\r\n\r\n<pre class=\"pre\"><code class=\"language-css\">[class|=\"badge\"] {\r\n    display: inline-block;\r\n    background: #555;\r\n    color: #eee;\r\n}\r\n<\/code><\/pre>\r\n\r\n<ul>\r\n <li>You don&#8217;t have to list every modifier for the base styles.<\/li>\r\n <li><strong>Bad:<\/strong> Can&#8217;t add any extra classes to the base class (class=&#8221;badge extra&#8221; will fail). <strong>*dealbreaker*<\/strong><\/li>\r\n<\/ul>\r\n\r\n<h2>Single-Class with Single Selector: ^=<\/h2>\r\n\r\n<pre class=\"pre\"><code class=\"language-css\">[class^=\"badge\"] {\r\n    display: inline-block;\r\n    background: #555;\r\n    color: #eee;\r\n}\r\n<\/code><\/pre>\r\n\r\n<ul>\r\n <li>You don&#8217;t have to list every modifier for the base styles.<\/li>\r\n <li><strong>Bad:<\/strong> It always must be the first class.<\/li>\r\n <li><strong>Bad:<\/strong> You can&#8217;t have any other classes that begin with your base class (it would also match class=&#8221;badgeAlt&#8221;).<\/li>\r\n<\/ul>\r\n\r\n<h2>So far<\/h2>\r\n\r\n<p>So far, for me it&#8217;s pretty clear that the multi-class pattern comes out on top. Yeah, the HTML is a bit longer &ndash; but that&#8217;s better than the downsides of the alternatives.<\/p>\r\n\r\n<h2>AMCSS<\/h2>\r\n\r\n<p>When compared to the previous options, <a href=\"http:\/\/amcss.github.io\/\">Attribute Module CSS<\/a> gets you the best of all worlds.<\/p>\r\n\r\n<pre class=\"pre\"><code class=\"language-markup\">&lt;span css-badge&gt;A Badge&lt;\/span&gt;\r\n&lt;span css-badge=\"large\"&gt;A Large Badge&lt;\/span&gt;\r\n<\/code><\/pre>\r\n\r\n<pre class=\"pre\"><code class=\"language-css\">[css-badge] {\r\n    display: inline-block;\r\n    background: #555;\r\n    color: #eee;\r\n}\r\n[css-badge~=\"large\"] {\r\n    font-size: 1.5em;\r\n}\r\n\r\n\/* overriding *\/\r\n.darkheader [css-badge] {\r\n    background: #aaa;\r\n    color: #444;\r\n}\r\n<\/code><\/pre>\r\n\r\n<p>The HTML is short, overrides are straightforward, and there aren&#8217;t any caveats about how the &#8220;classes&#8221; can ordered or mixed with others.<\/p>\r\n\r\n<p>However &ndash; there&#8217;s one drawback you might not notice at first: JavaScript. Modern browsers have classList, and everyone&#8217;s familiar with jQuery&#8217;s methods for managing classes. You can&#8217;t use any of it to toggle attribute values. The spec authors <a href=\"https:\/\/github.com\/amcss\/attribute-module-specification\/issues\/13\">suggest<\/a> that this is a feature, and that you might try regular classes for state changes.<\/p>\r\n\r\n<p>But if you don&#8217;t like the idea of adding regular classes back into the mix, it&#8217;s easy enough to make a JS utility for manipulating attributes in the same way: Here&#8217;s <a href=\"https:\/\/gist.github.com\/chrisbateman\/c3cf0bc3744817c9f98f\">a gist<\/a> that should do the trick.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>A few weeks ago, I heard about AMCSS, a newly formalized alternative to using classes for CSS hooks. I was pretty hesitant at first &ndash; and still am to some extent &ndash; if nothing else because it just feels odd. The goal of this post is to briefly compare the most common methods of organizing CSS module classes &#8211; and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1385","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1385"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=1385"}],"version-history":[{"count":46,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1385\/revisions"}],"predecessor-version":[{"id":1445,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1385\/revisions\/1445"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=1385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=1385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=1385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}