this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press – but very remotely, of course – because press already hase content and semantic, while div’s structure of document – only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure – for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
I see two different ways, but dont know, what way is better practice in marking down html documents:
1) Adding semantic class to element, which already have class that forming my document structure – col-xs-12 – or press in my analogy.
<div class="container">
<div class="row">
<div class="col-xs-12 article-preview">
'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
</div>
</div>
</div>
2) Or adding brand new semanit block under structuring block and putting my content here:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="article-preview">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
</div>
I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.
Thank you!
2
Answers
I will prefer the second way. Because bootstrap cols have their own styles and structure, so if you have additional styles or codes try to do like second way.
I think we should keep the bootstrap structure.
Go with the first approach because I feel the second approach will make your code long unnecessarily.
With the first approach as well you can add your custom styles. just add your stylesheet after the bootstrap css.