Является ли использование пользовательского CSS в классах начальной загрузки плохой привычкой?

Скажем, у меня в index.html есть следующее, и я - используя Bootstrap:

<head>
bootstrap stylesheet
main.css stylesheet
...


<button class = "btn btn-primary">Button</button

Btn-primary - это класс, делающий кнопку синей.

Скажем, я хочу изменить все свои основные кнопки на красные.

Это плохо, что я иду прямо в класс Boostrap или мне следует сделать свой собственный? В main.css:

btn-primary{ background: red; }

ПРОТИВ

btn-red{ background: red; } //applying that class to the button in question obviously

Я спрашиваю только о хорошая практика.

Я знаю, что оба работают.

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

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
125
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошая практика повлечет за собой отказ от редактирования кода фреймворка в файлах, предоставляемых фреймворком.

В своей практике я использую файл override.css (или раздел файла), чтобы специально переопределить стили фреймворка.

бывший:

/* Bootstrap.css */
.btn-primary {
    background-color: not-red;
}

/* Override.css - load this after Bootstrap.css */
.btn-primary {
    background-color: red;
}

** Обратите внимание, что это упрощенная версия, и что иногда структура будет иметь более конкретные селекторы, чем просто стиль класса, например form .btn-primary для кнопок <form>. В этом случае вы можете отказаться от спецификации фреймворка или использовать !important в своем стиле.

Если Bootstrap обновит свой фреймворк, мне будет просто обновлять и сохранять свои стили. Это также решает проблему избыточных классов, поскольку вы по-прежнему можете использовать классы Bootstrap со своими собственными стилями.

Не забывайте dot. перед именем класса, также иногда вам следует добавить !important; после свойства, чтобы убедиться, что вы заменили свойство своим собственным значением.

Ashraf 27.09.2018 05:35

@Ashraf спасибо за исправление! Я бы сказал, что использование !important; носит косвенный характер, поскольку он вам не всегда нужен, если только селекторы фреймворка не являются более конкретными, чем ваш. Об этом определенно стоит упомянуть :)

Frish 27.09.2018 05:42

Ааааи, вы сказали «иногда», так что действительно вы это знаете!

Frish 27.09.2018 05:45

Понятно, нет проблем с использованием в моем собственном override.css класса с тем же именем из фреймворка, как в override.css: .btn-primary{ color:red;}. Думал, что людям это может не понравиться: p Большое спасибо!

doofz 27.09.2018 13:44

Другие вопросы по теме

Похожие вопросы

Не удается заставить навигационную панель перестать показывать горизонтальную полосу прокрутки
Как сделать так, чтобы пользовательские сообщения появлялись в разделе консоли, когда люди открывают инструменты разработчика на моем сайте?
Делает ли css text-transform capitalize другие буквы строчными?
Как создать адаптивную карусель Bootstrap со статическим текстом заголовка героя, содержащимся в элементе контейнера?
Повернуть и разместить элемент заподлицо с краем родительского элемента, независимо от длины содержимого
Глобальная переменная не обнаруживается при использовании jquery, но ошибки нет
Почему мой div, расположенный (абсолютный) над изображением, скользит вверх, когда я уменьшаю ширину экрана?
Масштабировать весь элемент при изменении размера окна или доступе к нему на мобильном устройстве
Включить кнопку, если все 2-х мерные переключатели отмечены / выбраны
Align-items: center; не работает в усеченном меню