avalonstar:distortion

Bryan: o_o; Christ. Paul: Did veloso drink again? Bryan: I just standardized the markup in all 199 posts. o_o; It took a day. But hey! It’s done! Paul: Whoa. That sounds really geeky.

Now before you go around saying that I know how to waste my time, let me tell you that this was a very important step, as the Aries Project beings today.

It may seem like a stupid thing to do. But take it from me; you don’t want to be going back to posts you don’t necessarily care about, stripping unwanted and unused tags. Something that I learned long ago but never put into practice was to keep all my markup as clean, simple and semantic as possible, even the markup that goes in my blog posts.

Since I don’t use Markdown or Textile, I find myself using different class names and extra paragraph tags in order to achieve the effect that I want. On top of that, I would use different class names for the same effect depending on the design. Obviously that’s definitely not future-proof. As you go forward, unless you have a great memory, then you’ll find yourself doing the same thing. If anything, maybe this’ll poke you in the eye and get you to go over some of your old code. Remember that blog posts (whether old or new) are people too and can cause quite a problem during a redesign if not taken care of.

I can hear people say “shit, why does that old post look like shit?!”

So today’s lesson, go back to your posts and make sure that you’re using only the tags that you’ll need. Also combine any elements as needed (i.e., I had a <p> within a <div> for my emphasis boxes, now I only use the classed <div>). It’s all common sense, but even the best of us forget sometimes. Note that I don’t apply to “the best of us” statement. ;)

Avalonstar’s Standards

Since I woke up thinking that this post wasn’t quite finished, I’ll add some of the standards I’m using (and hope to keep) for the future version(s) of Avalonstar. (Believe me, I make it sound more complicated than it really is.)

• All section headers are <h3>, since <h1> and <h2> are reserved for the title of the page (which is hidden) and the title of the post.
• I have WordPress take care of all paragraph tags, which is something that I used to hardcode before. In doing this, I found that sometimes there would be double <p> tags in my markup.
• Images from now on are going to be automatically floated, with a class of nofloat added to the larger images. Since I float more images than not, I might as well apply the float to the tag and then manage it from there.
• All internal and external link icons will be handled in future versions using attribute selectors. So instead of adding a class of external to every external link (and then forgetting to do it), I have the CSS choose for me. I realize that this only works in newer browsers, but I want to take the Malarkey approach for this next version. So the only attributes I include with anchor tags are either a rel if the target is a person, or a title if the content being surrounded by the anchor is ambiguous.
• The emphasis box (the blue one you see everywhere) has been stripped of it’s containing <p>. I’m still thinking of whether or not to change the now <div>‘d box to a <p>, but that’ll require going back through again.

Everything else I’m doing is already standardized, but I like to think of it this way: if I can get the effect I want without typing so much, then I’m golden. Only in special cases, say tutorials, I’ll create classes or class existing items for visual effect. Also, rather than class everything I can just specify a “parent-child” (i.e., #content p {} or #content p {} relationship in the CSS. I’d just like to thank Andy Budd’s book, for finally making me aware of the importance and the ease that attribute selectors can provide.