OO CSS/CSS компоненты

Question

Мне интересно, каким способом является реально-ориентированный CSS, где вы можете действительно быстро и чисто повторно использовать компоненты.

---

Сценарий 1:

HTML:

<button class="button button-submit">Submit</button>

CSS:

.button {
  /* basic styles */
}
.button-submit {
  /* special styles for submit button */
}

Сценарий 2:

HTML

<button class="button submit">Submit</button>

CSS

.button {
  /* basic styles */
}
.button.submit {
  /* special styles */
}

---

Я вижу только два негативных аспекта, по одному в каждом сценарии.

В сценарии 1 у вас могут быть действительно длинные имена классов.
В сценарии 2, если вы определяете.submit как его собственный элемент / компонент, вы сталкиваетесь со старой проблемой, когда вы не можете повторно использовать фрагменты кода, чтобы оставаться неизменными в любом месте.

Answer 1

Сценарий 1, вероятно, будет более оригинальным, но, как и все технологии и методологии, я бы выбрал тот, который наилучшим образом соответствует вашим потребностям, и вам понравится писать.

В настоящее время я перестраиваю платформу электронной коммерции с нуля, и при проведении исследований хотел принять аналогичные методы. В итоге я проигнорировал способы, аналогичные вашему первому примеру, из-за длинных имен классов, как вы упомянули.

Идея, стоящая за всем этим, заключается в том, чтобы сделать написание кода проще, быстрее и более пригодным для повторного использования. Как только на один из этих факторов оказывается слишком сильное воздействие при попытке удовлетворить другого, вся идея, стоящая за их попыткой в ​​первую очередь, аннулируется.

Просто отметим, что это чисто субъективный ответ, и все разные.

Несколько хороших статей о различных методологиях и практиках, которые я использовал, чтобы помочь принять решение:

• http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
• http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/
• https://smacss.com/book/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Надеюсь это поможет!

Answer 2

CSS не является ООП, однако вы можете использовать фреймворки, которые позволяют вам СУХОЙ кодировать CSS.

• SASS
• МЕНЬШЕ