Bootstrap CSS по-прежнему дерьмо. Но мы можем сделать его лучше
Регистрация Войти

Bootstrap CSS по-прежнему дерьмо. Но мы можем сделать его лучше

German German 1 Июля 2022

Bootstrap — отличный CSS-фреймворк для тех, кто работает с дизайном, css или хочет что-то быстро создать.

Но компоненты Bootstrap, которые вы копируете и вставляете из документации, имеют недостатки. Эти недостатки сдерживают ваши проекты!

Вот 5 советов по дизайну, которые помогут исправить эти недостатки и улучшить Bootstrap.

  1. Обратите внимание на оповещения
  2. Таблицы не обязательно должны соответствовать вашей базе данных
  3. Дополнительные кнопки не нуждаются в цвете фона
  4. Хватит все маркировать!
  5. Тени > Границы

Как вам статья (на англ. языке)? Она у меня на 1 месте на Dev.

https://dev.to/wes_walke/bootstrap-css-is-still-the-sht-but-we-can-make-it-better-1p6d

CSS Bootstrap
4
324
+ Читать

Связанное

4 Ответа

  1. Evg Evg 1 Июля 2022 (ред.)

    Прочитал. Ругается. Хотят улучшить Bootstrap используя Bootstrap, — занятно. А почему PR не предложить в компоненты, для улучшения их? smile

    Bootstrap — инструмент. Вот лежит рядом молоток, знаю я его, могу многое наговорить гадкого, или похвалить. Мне все равно, молоток от этого не изменится, чувств к нему не питаю. Так хорошее или плохое про молоток писать? Легко, в любую сторону, только это не имеет смысла.

    Автор предложил некоторые «улучшения». Bootstrap же позволяет сделать это. Можно вообще собрать его, и компоненты. А чего за них так жестко держимся? Можно взять Bootstrap и сделать свои, если уж так захотелось. А можно вообще Bootstrap не использовать если он такой плохой.

    Все больше убеждаюсь, как посмотреть. С какой стороны. ) Можно книгу написать, как он реально помогает и книгу, как он реально мешает. Любой каприз, смыл был бы только. :/

    3
    Ответить
    1. German German 1 Июля 2022 (ред.)

      Там предложения, например, про Cancel, которые года 3 назад по UX в статьях были.

      Ответить
  1. Yori Yori 2 Июля 2022 (ред.)

    В любом фреймворке есть проблемы, можно посмотреть на два, которые находятся на разных полюсах: Bootstrap и Tailwind.

    Используя компоненты, в Bootstrap: class="btn btn-primary"

    https://bootstrap-4.ru/docs/4.0/components/buttons/

    Мы можем получить повторы и избыточность в css.

    А описывая кнопку, например, в Tailwind:

    class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"

    https://tailwind-elements.com/docs/standard/components/buttons/

    Мы получаем избыточность в html и полный ужас для чтения.

    Ещё часто встречаю, например, w30. Подобные сокращения. 30 — это пиксили, а w означает width. Таким образом, для программиста название w30 было способом указать, что тут используется width: 30px. Это надо же было додуматься!

    w30 используются и на этом сайте.

    2
    Ответить
    1. Evg Evg 2 Июля 2022

      Хи, хи.. ) удалить, безобразие )) Сегодня прочитал под книгой Ричардсон К. «Микросервисы. Паттерны разработки и рефакторинга» комментарии:

      Библия занудства

      Улыбнуло. Можно докопаться, поумничать :/

      Слитно если w30 — пиксели, а если так: w-30, то это проценты. Тут приходилось к чему-то приходить в рамках css. Стандарты какие-то. width30 и width-30 можно, но и в этом случае, не нравится название. К тому же, есть подход связанный с понятиями «заплатки». Тут: class="w30"  — одиночно или нет стоящий в коде можно спросить, что за частный случай требующий исправление ситуации с width 30px.

      Короче, все это известно, и понятно. Можно ковыряться на таком уровне, а можно нет. Визуально ничего не поменяется. Да и не только.

      Ответить