Comments on Carrer Blog: Write modern CSS - use class

I believe everyone made their point. Although this...

2011-07-12T17:51:27.432+02:00

I believe everyone made their point. Although this system is flawed. And It is recommended, for not reusable elements WITHIN THE SAME PAGE, like footer, header, content, columns (layout in general) to use ids, to give them more hierarchy over the classes, and Gabor also is absolutely right, ids come absolutely handy to interact with jquery. once again, if you have an element used only once in the page, use ids, and for the css do the same...if you have elements repeated in the page (user controls, lists, etc) use classes and their respective styling. This is html/css 101 imo.

@Scott: I just used .w300 just to make my point. Y...

2011-06-12T20:14:21.036+02:00

@Scott: I just used .w300 just to make my point. You are absolutely right about the downsides of w300 naming system. I like your suggestion about .small-width-column, .medium-width-column, .large-width-column ... Finding right naming system for 24,16,12 columns grid system is no easy task that is why we have variety of names like grid1, column1, g160 ... Probably the best solution is to give names that work best for your current project and don't use general names.

Henry Ho pointed this out first, but I don't k...

2011-06-12T17:28:34.706+02:00

Henry Ho pointed this out first, but I don't know that he made his point. Styles are supposed to be about semantics, not implementations.

The reason not to use inline styling, as we know, is that when you need to change the width (to use your examples), you'd have to make that change in multiple places in your site. If you use class names that derive from the VALUES assigned to those classes, you have the same problem, namely having to change all references to .w600 in your site to .w650 (for example). Taking this to the logical extreme over time, you'd find yourself with hundreds of classes like .red, .bold, .verdana, etc. If you're implementation specific in either direction, you've gone too far. :)

The better approach is to use more class names (as you advocated), but keep the names implementation-neutral.

For example, I'd suggest .small-width-column, .medium-width-column, .large-width-column, .tall-section, .short-section, etc. for the type of layout elements you used in your example. You can still apply these to multiple elements to get the benefits you described, but you can also change the specific values in one place (the .css file) with less likelihood of leaving behind badly named classes just because a value changes.

Overall though, I think your general point that people are styling implementation details is valid.

I agree with Henry Ho ... This is the new inline s...

2011-06-01T05:26:56.511+02:00

I agree with Henry Ho ... This is the new inline style. That means I have to write different template files to serve to different clients ie: web, mobile, etc.

@Henry Ho: and of course inline styling is not rec...

2011-05-31T22:13:06.370+02:00

@Henry Ho: and of course inline styling is not recomented, especially if you want to keep content independent from style

@Henry Ho : .w300 was just the example. I'm no...

2011-05-31T20:35:05.721+02:00

@Henry Ho : .w300 was just the example. I'm not saying use .w I'm saying use any class name that makes sense for you. The point is if that unit will be used multiple times is better to write class not ID.

If u're doing class="w180", why don&...

2011-05-31T20:07:14.349+02:00

If u're doing class="w180", why don't you do style="width:180px;"?

2011-05-31T20:06:11.389+02:00

This comment has been removed by the author.

@Gabor: Yes, ID with combination of getElementById...

2011-05-31T18:49:38.534+02:00

@Gabor: Yes, ID with combination of getElementById are fast.

But in the future browsers will speed optimize document.querySelectorAll . If document.querySelectorAll is put in array is even faster than not optimized getElementById. http://www.vcarrer.com/2011/04/svetlo-one-line-javascript-selector.html

But this is completely off-topic :-)

I've been doing this for many years, and I had...

2011-05-31T07:54:24.899+02:00

I've been doing this for many years, and I had another reason besides the obvious reusability problem: in my code IDs are preserved for Javascript interaction, for several reasons. It's faster to query the DOM for IDs, no code duplication, more effective parallel coding among developers. The letter two are especially important, since this way JS and CSS are largely independent of each other, so most cases I don't have to edit the other if a naming change happened in the application.