Как переопределить\редактировать CSS-стили базы Zurb Foundation?

Это мой первый раз, используя Zurb Foundation для веб-проекта. Тем не менее, я не уверен, нужно ли переопределять их стили со своей собственной в отдельной таблице стилей или непосредственно редактировать foundation.css.

Например, это их nav css (внутри foundation.css):

.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}

Если я хочу изменить background и margin-top, просто отредактируйте .nav-bar из foundation.css или создайте мою собственную таблицу стилей (поставьте style.css ниже foundation.css) и переопределите ее так:

.nav-bar {
    background: #999;
    margin-top: 0;
}

Это хорошая практика? Если нет, то какой был бы лучший способ сделать это?

Ответ 1

Лучшей практикой является переопределение таблицы стилей с помощью пользовательского файла .css, как вы описали. Таким образом, если обновление выпущено, например, исправление ошибки, то вы просто замените файл foundation.css.

Если вы напрямую отредактируете файл foundation.css и хотите обновить фреймворк, вам нужно будет вручную сделать обновления самостоятельно.

Ответ 2

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

app.css и app.js

Это файлы Zurb, предварительно созданные для вас, поэтому вы можете начать отменять свои стили!

Не рекомендуется прикасаться к основаниям .js или foundation.css. Вы не сможете обновиться для будущих вариантов, или вы можете тормозить то, что вы не хотите тормозить. Счастливое кодирование!

Ответ 3

Собственно, вы можете просто использовать файл foundation.css. Если вы создаете пользовательскую установку Foundation CSS, вместо того, чтобы использовать установку CSS по умолчанию, настройки, которые вы указываете, находятся в этом файле. Если бы Zurb собирался изменить этот файл для исправления ошибок и обновлений, этот файл должен быть одинаковым для всех установок, не так ли?

Документация Zurb говорит, что "foundation.css - это файл CSS, который вы можете использовать на своих страницах, если вам не нужно выделять фактический базовый CSS".

Ответ 4

На самом деле лучший способ переопределить стили в Foundation (или любой основной структуре) - использовать их версию SASS и/или Compass. (или МЕНЬШЕ для тех, кто, к сожалению, пытается стирать Bootstrap)

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

Да, это немного кривая обучения, чтобы все было настроено, но это сэкономит вам часы в долгосрочной перспективе.