Lets talk classes.
I want to make a certain word in a paragraph of text stand out so i create a class called “red” i use this to color the specific word red. In a few months time i decide to update this color and change it to blue, i now have to change both the CSS and the HTML to update my class from “red” (no longer relevant) to “blue”.
Or i could have simply created a class called “highlight” and used this, then only a CSS change is required.
But…
What to do in this scenario. I have a link to a money tracking application on my website, i create a class of “icon_bar_chart” to pull in an icon i have created of a bar chart next to the link. In a few months time i need to change it to an icon of a £ symbol so i create my new class “icon_pound_symbol” and then i update the HTML but again i am having to update both the HTML and CSS.
Is this a solution?
Create a class called “icon_1″ and get this to pull in the image of the bar chart, then i only need to update the CSS when i need to change the icon.
About Ben
Hi My name is Ben and i am a front end web developer based in the Midlands of England. I love all things HTML and CSS with over 5 years commercial experience but on the side i also enjoying smashing my body to pieces down the gym and playing football.
4 Responses to Semantics, Schemantics
I agree with having none descriptive classes where ever possible. The best example being for colours.
When properly documented you can have primary secondary etc, allowing any changes down the line doesn’t require any html changes.
For background images / icons I can’t see the benefit of not having a descriptive class. Say two links share .icon1. If you wanted to change one of those you still need to edit the html.
Agree with proper documentation but would also say documentation can be used for the images/icons. If an existing image/icon is being updated you should only need to change the graphic, if adding new stuff then a CSS and HTML change will always be required.
Well, it’s a better solution than using a colour, I think we can all agree, but where to stop? icon_topleft1, icon_bottommiddle4?
Couldn’t agree more