[smt88]

No tutorial needed.

1. Create your HTML using only semantics. If you're tempting to create a class called, say, "column" or "left-container", stop yourself. If you have multiple items that will be presented the same way, give them the same class. For a shopping site, for example, a class might be "product".

2. Use a CSS preprocessor to inherit non-semantic classes from your framework of choice into the classes you created in step 1. You might use the framework's classes as they are or modify them a little.

[k__]

(didn't down-vote)

This may work for simple cases. But what about stuff like the Bootstrap components, which consist of many HTML-elements?

[smt88]

You have two options.

A. You can compose components the same way Bootstrap does, but using semantic classes. For example, if Bootstrap is using "thumbnail-container", you could call your class "product-thumb-container". Because of the way HTML works, container classes are often necessary, and they can be semantic. Think about a legal document: at the end of them, you have appendices. An appendix is like a container: it's factored into the overall structure, but it also has a semantic value. You can't move an appendix somewhere else and still call it an appendix.

B. You can use only the parts of Bootstrap that you want, so you could leave components out altogether. As mentioned above, this might be a better option for a larger project with fine-grained, custom designs.

[true_religion]

If you're going this route, then you wouldn't use Bootstrap. You'd dreg up your own semantic/non-semantic styles from scratch.

This works really well on projects that have a dedicated design team.

[wodenokoto]

This sounds interesting, but I definitely need a tutorial for step 2.

[smt88]

Just look up the syntax for extending classes for the preprocessor of your choice. This is such an important part of the preprocessors that it'll usually be on the landing page for the documentation (sometimes above the fold).

I'd recommend SCSS if you're just getting started.