{"id":466,"date":"2010-06-21T23:41:02","date_gmt":"2010-06-22T07:41:02","guid":{"rendered":"http:\/\/www.stubbornella.org\/content\/?p=466"},"modified":"2010-06-21T23:41:02","modified_gmt":"2010-06-22T07:41:02","slug":"css-granularity-architecture","status":"publish","type":"post","link":"https:\/\/www.stubbornella.org\/2010\/06\/21\/css-granularity-architecture\/","title":{"rendered":"How to create CSS objects? Get the granularity right!"},"content":{"rendered":"

In a previous post<\/a>, I said:<\/p>\n

Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP.<\/p><\/blockquote>\n

And then I didn’t expand on it, or give proper context. Ooops, sorry!<\/p>\n

Correct granularity is one of the keys to tiny CSS<\/h3>\n

In the PHP layer, the following stream story (from facebook) might be a single object. All of the logic of determining which bits of HTML to show or hide are contained within one object structure. <\/p>\n

\"An<\/a>
A Facebook stream story<\/figcaption><\/figure>\n

Frequently, developers try to make the CSS match this middle-end logic. We expect all the CSS code for the stream story to be sand-boxed within a wrapper id, for example #story. This ends up with bloated code that isn’t DRY. Why? because the proper architecture for the CSS layer is much more granular. Trying to base the CSS architecture on the PHP layer is something akin to trying to use the DB schema to configure apache. It just doesn’t work. <\/p>\n

\"stream<\/a>
The stream story is composed of many smaller (more granular) objects<\/figcaption><\/figure>\n

So we can see that the stream story example above is composed of many more granular objects. As we make the objects more granular, we begin to see the same patterns emerge over and over, and the same objects become much more reusable. We start to see that most sites on the interwebs are composed of the same basic repeating patterns combined in different ways. As a side benefit, the CSS gets *much* smaller and simpler. <\/p>\n

The stream story, one PHP object, is composed of several HTML & CSS objects:<\/p>\n

1 heading <\/h3>\n

\"Heading\"<\/a><\/p>\n

5 Media Blocks<\/h3>\n

\"\"<\/a><\/p>\n

2 Link Styles<\/h3>\n

\"Link<\/a><\/p>\n

1 Comments List<\/h3>\n

\"Comments<\/a><\/p>\n

1 Action List<\/h3>\n

\"Action<\/a><\/p>\n

1 Paragraph<\/h3>\n

\"paragraph\"<\/a><\/p>\n

Benefits of this approach?<\/h3>\n

Getting the CSS object granularity right means that our CSS (and by extension, our HTML) become much simpler and lighter. Our little reusable object can be employed across the site to create new and different pages without adding to the weight of the CSS.<\/p>\n

As a starting point, I recommend creating the following objects: headings, lists, text treatments and links, containers, media, grids, and template. Create all your smallest objects first, before you build whole pages, and your CSS will stay small by default.<\/p>\n","protected":false},"excerpt":{"rendered":"

In my previous post<\/a>, I said:<\/p>\n

Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP.<\/p><\/blockquote>\n

And then I didn’t expand on it, or give proper context. Ooops, sorry!<\/p>\n

In the PHP layer, the following stream story (from facebook) might be a single object. All of the logic of determining which bits of HTML to show or hide are contained within one object structure. <\/p>\n

\"An<\/a><\/p>\n

Frequently, developers try to make the CSS match this middle-end logic. We expect all the CSS code for the stream story to be sand-boxed within a wrapper id, for example #story. This ends up with bloated code that isn’t DRY. Why? because the proper architecture for the CSS layer is much more granular. Trying to base the CSS architecture on the PHP layer is something akin to trying to use the DB schema to configure apache. It just doesn’t work. <\/p>\n

\"stream<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,20,5,35,24,27],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","hentry","category-css","category-geek","category-general","category-image","category-performance-geek-general","category-xhtml-html"],"_links":{"self":[{"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":0,"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stubbornella.org\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}