CODEWITHSUNDEEP
htmlcssoocss
lumio
lumio

Reputation: 7585

OO CSS/CSS components

I am wondering, which way is real objective oriented CSS where you can reuse components really quickly in a clean way.

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 */
}

I only see two negative aspects, one in each scenario.

In scenario 1 you might end up having really long class names.
In scenario 2, if you define .submit as it's own element/component, you end up with the old problem where you cannot reuse code fragments to stay the same in any place.

Upvotes: -1

Views: 92

Answers (2)

Guy
Guy

Reputation: 11315

Scenario 1 would probably be the more OO one but like all technologies and methodologies I would use the one that suits your needs best and you are going to enjoy writing.

Currently I am rebuilding an ecommerce platform from the ground up and when researching wanted to adopt similar methods. I ended up ignoring ways similar to your first example due to the long class names like you mentioned.

The idea behind all of it is to make writing code easier, quicker and more reusable. As soon as one of those factors is impacted too much while trying to satisfy the other, the whole idea behind trying them in the first place is voided.

Just to note this is a purely subjective answer and everyone is different.

Some good articles on the various methodologies and practices that I used to help make a decision:

Hope this helps!

Upvotes: 2

Stevanicus
Stevanicus

Reputation: 7761

CSS is not OOP, you can however, use frameworks which allow to you code CSS in a DRY manner.

Upvotes: 0

Related Questions