I hand crafted the CSS for site. It’s still a work in progress. I learned that while semantic tags are good for HTML, they’re not that great for CSS.

The great HTML5 semantic tags like section, article, header, and footer may be great for crawlers, and nice when you’re reading the HTML, but when I tried to rely on them exclusively for CSS it just resulted in confusing markup.

The “article > footer” question⌗

When you’re reading CSS, what do you think article > footer {...} means?

  • Is meta-information about the article, as the HTML spec sortof says?
  • Is it stuff that goes at the bottom of the page, as everyone who hasn’t read the spec assumes based on the English definition of the word “footer”?
  • Related to the above, does it contain a huge amount of content or a small amount of content? Like, does it include comments on the post? This consideration is important when I’m skimming through a CSS file and looking for big, structural pieces.

What I decided⌗

I needed tags that were more specific to what I was actually building. I decided that it was cleaner to make a class for each “block” of the site. article > footer is less clear to me than .about-post.

In the HTML code I decided to keep that <footer> tag, because it makes the HTML more readable. (Especially when looking at the HTML in outline form, as every browser inspector and debugger panel does.) But I styled it strictly based on its .about-post class, because that makes the CSS more readable.

As an afternote, I understand some of the principles behind BEM CSS a lot better now. Even though I didn’t use BEM specifically, the principle of removing/reducing the nested lookups made my CSS much cleaner.

Tomorrow I’ll talk about my preferred method of writing CSS, the One Parent Method. Take a wild guess what that means.