Categorize CSS elements by meaning or by looks?

Whats the best practice for choosing a CSS class (name) for an element?

a) Should I name it after what it is (a booking link in this example) and group all classes with the same looks in CSS?

<a href="booking.html"开发者_如何转开发 class="bookingLink">Book this course!</a>

with CSS:

a.bookingLink, a.otherLink, a.someLink { color: red; font-weight: bold }

b) Or should I rather name it after what it looks like?

<a href="booking.html" class="boldLink">Book this course!</a>

with CSS:

a.boldLink { color: red; font-weight: bold }

I currently find myself adding more and more classes for links that should look the same, but have a different meaning. Of course this makes changes in CSS necessary, too.

On the other hand, I can change the looks more flexible via CSS later if I want to change the look of a specific type of link. (only the booking links for example)

What method do you prefer?

It's considered best practise to keep class names as semantic as possible, so bookingLink.

I can see where you are coming from though as it does add to the amount of code you have to write.

Here's an article from W3c about this issue, I try to keep to their guidelines in most cases.

http://www.w3.org/QA/Tips/goodclassnames

As long as you keep your code readable, consistent and maintainable I think a little bit of your own style can't hurt.