Just a small remark I have, and has been made before by @Pieman and Kevin Rapley- directed mainly at the concept of Object Oriented css. Often I see people recommend to create classes like .rounded, .floatleft or .bold.
While at first sight this may seem like a good idea in terms of reusability there is something fundamentally wrong with this approach. When you do this, you will create html like this: <div class=“rounded floatleft”>. The problem is that this goes against the concept of seperating markup and content.
The idea is to create meaningful html. For example instead of <p class=“bold”> you might want to go for <p class=“emphasis”> so the classname has meaning, but does not imply any markup. Instead of thinking in terms of markup, you should be thinking of the function this markup serves. e.g. .rounded could be .box or .button.
Ofcourse this will make you repeat yourself when you want to round both box and button. A solution to this might be css variables, but this is a completely different story ofcourse.
Another solution I have been thinking about is to have jquery add these “presentational” classes to the desired elements. This would allow me to combine the maintainability (let’s face it, they are very practical) of these classes, while keeping the markup in javascript-and not in html. Problem here might be rendering speed, and ofcourse it still isn’t completely semantic.
Great article though, and as chance would have it, I just needed a jquery slideshow.
Maikel
Just a small remark I have, and has been made before by @Pieman and Kevin Rapley- directed mainly at the concept of Object Oriented css. Often I see people recommend to create classes like .rounded, .floatleft or .bold.
While at first sight this may seem like a good idea in terms of reusability there is something fundamentally wrong with this approach. When you do this, you will create html like this: <div class=“rounded floatleft”>. The problem is that this goes against the concept of seperating markup and content.
The idea is to create meaningful html. For example instead of <p class=“bold”> you might want to go for <p class=“emphasis”> so the classname has meaning, but does not imply any markup. Instead of thinking in terms of markup, you should be thinking of the function this markup serves. e.g. .rounded could be .box or .button.
Ofcourse this will make you repeat yourself when you want to round both box and button. A solution to this might be css variables, but this is a completely different story ofcourse.
Another solution I have been thinking about is to have jquery add these “presentational” classes to the desired elements. This would allow me to combine the maintainability (let’s face it, they are very practical) of these classes, while keeping the markup in javascript-and not in html. Problem here might be rendering speed, and ofcourse it still isn’t completely semantic.
Great article though, and as chance would have it, I just needed a jquery slideshow.