I have a dislike of grid systems because they break separate of style and content that CSS is supposed to provide

I'm not sure I follow. If you use HTML5 sections, for instance, you could have <article class="3-columns"> or <nav class="1-column">. I'm not sure that CSS classes themselves are intended to convey any structural meaning - that's a job for HTML. You can, of course, adapt class names if you prefer a different naming system.

@AndyLangton css class names are supposed to convey semantic information:

[w3.org...]

It also makes it a lot easier to understand and modify an existing design if CSS class names make sense.

Class names and ids are part of the HTML that happens to be used to apply CSS, but is also used from Javascript, for fragment identifiers, and by spiders.

Also consider how, for example, you change the width of a column using a framework. You edit the HTML to change the class names. Without a framework you edit the CSS.

Actually, I need to correct myself and you. They are not "css class names" - they are HTML class attributes (e.g. class="myclass") that can be used in CSS selectors (e,g, .myclass). The same goes for ids, tags, etc.

Yes and no - I think everyone should think about it and it is mostly and an issue for responsive design, so why not warn someone of this when they start responsive design - in short frameworks make it easy, but they they have shortcomings that matter.

If an admin feels it is off topic perhaps this can be split into a separate thread?

I think that the question on the pros and cons of using a grid layout to achieve device responsive sites is a good idea. ;)

This is a good topic for discussion.

A much better way to name your classes is with the role a certain HTML element...

The W3c advises against using naming conventions that describe a styling effect but it seems to me that how many columns a section has is information about the structure itself and not a style effect applied to the structure. So doesn't that conform to the idea of giving the class a useful name that describes the structure itself (16 columns) instead of naming it according to the effect applied to the structure?

Giving the class a name that describes the structure is useful information and I believe that calling the class "16 columns" conforms to the W3C tip about giving classes names that describe the structure.

The w3c ways semantic information (vs presentational) not structural vs styling.

Suppose you have a a page (or section) that is divided into two columns - one containing the main content, and the other a side bar. You then decide to make the main content narrower and the side bar a bit wider, but you keep the content the same. This is a purely presentational change, but using a grid requires you to edit the CSS to change the classes.

It also makes it harder to understand and maintain a design. For example suppose you have a product page with a summary description, features, etc. All these section are the same width. Using a grid you apply the same class to all of them. Without a grid you give them class names like .summary, .features, .requirements etc. Suppose you initially make them all full width, but after a while you decide make three columns. With a grid framework you need to change the HTML for each, and move them from separate tows to a single row. Without a grid you may need to add a single wrapper element, and you can do the rest with CSS.

The second example is a simplified version of a design I have worked with in the last few days.