Скажем, у меня в 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
Я спрашиваю только о хорошая практика.
Я знаю, что оба работают.
Я просто хочу знать, использую ли я классы начальной загрузки для этого, я делаю что-то, что обычно не очень хорошо принимается.
Хорошая практика повлечет за собой отказ от редактирования кода фреймворка в файлах, предоставляемых фреймворком.
В своей практике я использую файл 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 со своими собственными стилями.
@Ashraf спасибо за исправление! Я бы сказал, что использование !important;
носит косвенный характер, поскольку он вам не всегда нужен, если только селекторы фреймворка не являются более конкретными, чем ваш. Об этом определенно стоит упомянуть :)
Ааааи, вы сказали «иногда», так что действительно вы это знаете!
Понятно, нет проблем с использованием в моем собственном override.css
класса с тем же именем из фреймворка, как в override.css: .btn-primary{ color:red;}
. Думал, что людям это может не понравиться: p Большое спасибо!
Не забывайте
dot.
перед именем класса, также иногда вам следует добавить!important;
после свойства, чтобы убедиться, что вы заменили свойство своим собственным значением.