CSS Best practices in creating and applying classes

Viewed 86

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?

1 Answers

Oh man, this is a tricky one as there have been endless amount of articles written about this. Ex. https://css-tricks.com/tailwind-versus-bem/

I think the key thing is: there's no right answer, but just be consistent.

If you decide on keeping most of the styles in your CSS file, and you are worried about the file size, I suggest looking at https://purgecss.com. Ironically, it's created (sponsored?) by Tailwind, who promotes utility based styling. Using this tool, you can reduce your file size. Maybe not as small as using mostly utility classes, but it'll help.

I prefer BEM with some utility classes (per your float example). The hybrid approach has helped me a lot.

Related