Bootstrap — плохая практика добавлять к элементам фреймворка свои классы / стили. Как тогда лучше в моем случае?

Question

[alexandrnevajno1]

Здравствуйте! Слышал, что нежелательно добавлять к элементам Bootstrap'а свои классы - это плохая практика. Вот, например:
<div class="col-md-3 sub-content"> ...</div>
Лучше делать так:

<div class="main">
<div class="col-md-3">
<div class="sub-content">... </div>
</div>
</div>

Действительно ли так лучше? И почему? Получается больше div'ов, а много div'ов - тоже плохая практика.
И еще. Если ни тот и ни другой вариант, то может лучше добавить СТИЛИ к элементу Boostrap? Вот:

.main .col-md-3 {
....
}

Или это тоже плохая практика? Как тогда лучше делать?

Comments

[Volodimir Babeshko]

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

[alvvi]

Konstantin Abaiev: этот хейт на бутстрап еще абсурднее хейта на jQuery, ей богу.

[Volodimir Babeshko]

Обычно специалисты по бутстрапу или те кто по нему учился умеют красиво подбирать классы, но верстаться не умеют, в отличие от остальных кто использует его с головой. Но таких, к сожалению немного.

[Виолетта Морозова]

Konstantin Abaiev: ой я намучалась с бутстрапом в свое время. С сеткой в частности. К каким же безумным хакам приходилось прибегать. А потом изучила флексы и на фоне бутстрапа я в них просто влюбилась) Поэтому у меня стойкая аллергия на бутстрап и четкое убеждение, что он не такой уж и универсальный. Для стандартного/примитивного дизайна подойдет, а в идеале лучше использовать не его.

Answer 1

[Welaurs]

Доброго времени суток. А тот, кто

Слышал, что нежелательно добавлять к элементам Bootstrap'а свои классы - это плохая практика

говорил привёл свои аргументы или доводы?
Разумеется, много div`ов влияют на читабельность, но разве конструкции, приведенные во 2 примере, улучшают её?

Answer 2

[sim3x]

Используйте сасс/лесс
ruby.bvision.com/blog/please-stop-embedding-bootst...

Answer 3

[BB 8]

Лучше всего не использовать bootsTRAP.

Изучите FLEX. Это как таблетка от головной боли)

Comments

[Froggyweb]

каким боком flex-box заменяет бутстрап? Изучите grid и забудь про страшный flex с его костылями.
Наверное float вообще использовать запрещено? удалить его из css нафиг :)

Изучите FLEX. Это как таблетка от головной боли)

Как решить проблему flexbox в safari ??
У Вас нормально ведут себя FLexBox в IE10-11, EDGE-14-15?

Когда напишешь что-то вреде бутстрапа сможешь писать bootsTRAP., а пока не надо...

[BB 8]

Froggyweb,

Изучите grid и забудь про страшный flex с его костылями.

Ок босс, когда поддержка будет выше 80%, тогда и возьмусь за изучение.

Наверное float вообще использовать запрещено? удалить его из css нафиг :)

Float'ы нужно использовать по назначению. Ты же не вставляешь в строчные теги блочные, верно ? Вот с float'ами нужно поступать точно также.

Как решить проблему flexbox в safari ??
У Вас нормально ведут себя FLexBox в IE10-11, EDGE-14-15?

Еще не было проблем в IE10-11, EDGE 14-15 с Флексами. А если и возникали, то все найденные баги и пути их решения выложены на гитхабе под названием "Flexbox Bugs", вроде. Дословно не помню, т.к. читал этот справочник давно, когда возникали те самые трудности. Но это было всего 1 раз, после чего ты уже имеешь представление как преодолевать их. И это намно приятнее, чем 100500классов бутстрапа при решении тривиальных задач.

[BB 8]

Froggyweb,

Когда напишешь что-то вреде бутстрапа сможешь писать bootsTRAP., а пока не надо...

Хорошо босс, когда перестанешь бояться багов в новых технологиях, прибегая к поиску их решения и будешь уметь писать сетку самостоятельно, тогда я послушаю твой "ценный" совет.

[Froggyweb]

bootstarp это не только сетка. это набор стандартных элементов для верстки чего-то.

У Вас нормально ведут себя FLexBox в IE10-11, EDGE-14-15?

это твой вопрос между прочем.

ЗЫ flex не панацея чтобы его совать куда ни попдя..

[BB 8]

Froggyweb,

bootstarp это не только сетка. это набор стандартных элементов для верстки чего-то.

Спасибо кэп

ЗЫ flex не панацея чтобы его совать куда ни попдя..

Спасибо кэп :)

[Froggyweb]

посмотрите на вопрос и свои ответы.
До свидания не КЭП

Answer 4

[Sergey Sidorov]

На самом деле плохой практикой (и то в ряде случаев это утверждение спорно) является перекрытие существующих свойств bootstrap заданных в указанных классах (просто потому что это меняет нативное поведение и делает его неожиданным). Блоку с уже присвоенными классами bootstrap можно назначать свои классы в случаях когда данные классы расширяют (а не перекрывают (опять же не всегда это правило)) набор свойств заданных элементу.

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

Answer 5

[Илья]

А нагромождение классов так, что они в одну строку на 1366px экране не помещаются это норм ?
col-6 col-sm-12 col-md-6 col-lg-4 text-center my-class__part1-ho4y-4tob-bilo-levee-na5px
Используйте наследование. Не мучайте bootstrap +).

Comments

[Ярослав Иванов]

Да это норормально если вы знакомы с БЭМ. А рекомендовать наследование не стоит. Это убивает масштабируемость.

Answer 6

[Виолетта Морозова]

Автор, я такого ни разу не слышала.

• Если вот так подумать, то наверно плохим тоном будет считаться добавление классов, которые потом будут в себе сочетать правила, касающиеся и размеров, и отступов, и стилизации оформления.
  
• Бывают такие случаи, когда необходимо переопределить колонке внутренние/внешние отступы. Я думаю здесь лучше добавить класс к этой колонке, который будет отвечать за внутренние/внешние отступы.
  
• Бывают такие случаи, когда необходимо стилизовать именно колонку. Как раз из-за этих самых отступов (не могу привести пример, память уже не та) - добавляй класс к ней.
  
• Да в конце концов, бутстраповская сетка лишь помогает тебе не задумываться о ширине и отступах.
  
• Мне изначально было вбито в голову, что большая вложенность - это плохо. Никто не запрещает, но нужно стараться избегать этого.
  
• И самое главное, в нашем сообществе разработчиков слишком много людей, которые придумывают всяческие правила и нормы "поведения". По большей части из-за того, что они привыкли жить по правилам. А жизнь - это импровизация.
  

Answer 7

[Alexander Pushkarev]

Классы добавлять можно, для более удобной манипуляцией через js. Ну или для создания дополнительного каскада. Но применять конкретные свойства лучше не стоит.