Web designers and developers are frequently urged to write “semantic” code, and with good reason – semantics add meaning to code so that it can be understood by humans and computers alike.
Too often, the importance of semantic code is forgotten. Web design is constantly evolving, and if the structure and naming conventions used within your site are based specifically on how that site looks and works today, you’re setting yourself up for difficulties in the future.
Here’s an easy example. Let’s say you have this CSS:
.red {color: red;}
You’ve gone through your site and applied this class to a few paragraphs that you want to stand out from the rest of the page. But now you’ve decided to redesign, and you feel that blue would look better than red. What do you do? If you just change the property value, you’ll have a class called “red” that’s setting the text color to blue, which doesn’t make sense. On the other hand, if you change the class name itself to “blue” so that it matches, then you’ll have to go through your entire site and replace all instances of “red” with “blue.” And that still won’t help when a third redesign looks best with green – you’ll have the exact same problem.
But what if you had just done this?
.important {color: red;}
Now you can change the text color as much as you want – text that you’ve decided is important will pick up whatever color you decide on. Your CSS still makes sense, and you don’t need to make a single change to your HTML.
So here’s a quick tip for creating semantic naming conventions – name your IDs and classes by their purpose or meaning, not by their appearance. Assign styles to elements based on what they do rather than what they are. You’ll thank yourself in the future!
