Given the following example:
<div class="resource-url-cont clearfix">
<div class="url-icon-action float-left">
<v-btn @click="toggleUrlConsumed(link)" icon x-small color="success">
<v-icon v-html="link.is_consumed ? 'mdi-checkbox-marked-outline' : 'mdi-checkbox-blank-outline'"></v-icon>
</v-btn>
</div>
<div class="url-link float-left"><a :href="link.url" target="_blank">{{ link.name }}</a></div>
<div class="url-icon-action float-left">
<v-btn @click="removeResearchUrlConfirm(link)" icon x-small color="error" class="float-right">
<v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
</div>
</div>
...and the SASS snippet:
.resource-url-cont {
.url-icon-action {
width: 30px;
}
.url-link {
width: 255px;
white-space: break-spaces;
overflow: hidden;
}
}
What would implement best practices for managing the css classes? Given that the class float-left is applied to all 3 divs which contains only a single style: float: left; ...
Would it be better to completely omit the addition of the 2nd class within the html float-left, and apply the style to the existing classes like so...
.resource-url-cont {
.url-icon-action {
float: left;
width: 30px;
}
.url-link {
float: left;
width: 255px;
white-space: break-spaces;
overflow: hidden;
}
}
If I keep the float:left style encapsulated within the existing float-left class, it ultimately reduces the size of the overall compiled styles.
However there is a cost at developer readability while managing the source code, because to me it seems easier to read through the source when the styles for an element are constrained to a single use class.
This is obviously a simple example where it would not make much difference regardless of which technique you used however the differences become more evident when applied consistently throughout a large scale application.
What would be the best standard of practice to implement and why?