I'm curious about the most effective way to implement objective-oriented CSS for quick and clean reuse of components.
Scenario 1:
HTML:
<button class="button button-submit">Submit</button>
CSS:
.button {
/* basic styles */
}
.button-submit {
/* special styles for submit button */
}
Scenario 2:
HTML
<button class="button submit">Submit</button>
CSS
.button {
/* basic styles */
}
.button.submit {
/* special styles */
}
There are two drawbacks I can identify, one for each scenario.
In scenario 1, you may end up with excessively long class names.
In scenario 2, if you define .submit as its own element/component, you may encounter the issue of not being able to easily reuse code across different sections while maintaining consistency.