I have always found it strange how content authors sometimes do not use the correct markup in the websites I develop for content management systems. Many are unfamiliar with basic HTML elements such as paragraph tags.
For instance, if I have a description element that needs to be styled differently from the other paragraphs, I find myself adding the styles to both the parent and paragraph tags:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
p {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
}
While this method may seem repetitive, it ensures consistency regardless of whether the author uses a paragraph tag or not. Applying styles only to the paragraph tag can lead to inconsistencies, while applying them only to the parent can result in global styles overriding the specific ones. I face similar challenges when styling anchor tag colors. Although backend code enforcement is possible, I am more interested in purely architectural styling solutions.
What approach do others take in similar situations? Is there a better strategy than the one I have been using? So far, this styling method has proven to be the most reliable option for me.