As someone who is deeply interested in creating clean and efficient markup, particularly with the advancements of HTML5, I have found it challenging to divorce content structure from presentation. After delving into object-oriented CSS and the use of classes, I realize that finding the right balance is not as simple as it seems. Coming from a programming background where the logical structure of code is crucial, I have some musings on this subject.
I experimented with different approaches, such as creating reusable classes for color palettes like:
.color_pr1 {
color: blue;
}
.color_pr2 {
color: red;
}
I also created quick utility classes like:
.left {
float:left;
}
.right {
float:right;
}
.bold {
font-weight:bold;
}
While traditional wisdom advises against classes like .left, .right, and .bold dictating styling, their reusability can't be denied, leading to potentially bloated markup like:
<div class="color_pr1 bold right">
<p>Lorem ipsum</p>
</div>
Alternatively, one could write the markup differently:
<div clas="right">
<p class="color_pr1 bold">Lorem ipsum</p>
</div>
However, both approaches may result in clutter. One solution could be assigning an ID or class to the parent div and defining specific subclasses within that selector in CSS.
Consistency is key to avoiding bloated markup that hampers project workflow overall. Instead of littering the markup with numerous classes, perhaps utilizing SASS variables for color palettes and basic sizes could simplify things. An ideal scenario might involve writing CSS like:
#somediv, .someclass {
h1 {
color: $color_pr1;
}
}
This approach could lead to more streamlined markup without sacrificing styling options. Take, for example, a layout consisting of various elements - how should one choose which tags to use? Is <h> appropriate for all headings? Would restructuring the markup like this make more sense?
<section id="news_articles">
<article>
<h3>15.03.2013</h3>
<img>Some image</img>
<h5>Music news</h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>
</article>
</section>
Accompanied by CSS that reflects these structural decisions:
*/ default values */ h1 { font-size: 16px; }
h3 {
font-size: 12px;
}
h5 {
font-size: 10px;
}
*/ specific ID subclasses */
#news_articles {
h3 {
font-weight: bold;
}
}
Finding the right balance between concise markup and reusable CSS remains my primary challenge. What are your insights on striking this balance effectively?