Использование nth-child или создание новых классов в CSS?

Question

Я только что начал свой первый проект, который создает панель администратора. Моя задача - создать HTML и CSS - своего рода базу дизайна для дальнейшего развития для разработчиков.
Мне было предложено сохранить CSS простые и классы как можно более наглядными (может быть длинными) и использовать Bootstrap.

Чтобы избежать создания ненужных классов, которые можно было использовать один или два раза, я решил пойти с: nth-child, так как я думал, что давать новый класс для каждого столбца слишком много. Кроме того, я создал несколько базовых классов, которые могут быть использованы для добавления 0px отступов и полей.

К сожалению, как я писал все больше и больше кода, я заметил, что некоторые CSS код выглядит следующим образом:

.print-history-advanced-search > [class*='col-']:nth-child(5) > .form-group > .form-horizontal > .form-group > [class*='col-']:first-child 

И это не единственная линия.

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

Есть ли какое-либо решение, которое я мог бы использовать, чтобы избежать создания классов, которые просто используются в одном или двух div, но также делают код CSS менее хаотичным и избегают очень длинных имен? Или, может быть, я должен просто отказаться от детей, вложить в них и работать только с классами?

Благодарим за помощь! Имейте славный день!

Answer 1

Если вы хотите написать хороший CSS, то я бы предложил BEM model - хороший маршрут, чтобы спуститься.

Основы;

• Нет элемент/селектор heirachy
• Нет использование элементов в селекторы
• стилей на основе класса только

BEM обозначает блок, Element, Модификатор - который, как формируются ваши имена классов , Заимствование примера с их сайта;

.form { } 
 
.form--theme-xmas { } 
 
.form--simple { } 
 
.form__input { } 
 
.form__submit { } 
 
.form__submit--disabled { }

<form class="form form--theme-xmas form--simple"> 
 
    <input class="form__input" type="text" /> 
 
    <input 
 
    class="form__submit form__submit--disabled" 
 
    type="submit" /> 
 
</form>

Вы можете видеть, что есть form блок, а затем form__input и form__submit элемент, а затем form__submit--disabled Модификатор.

Answer 2

В зависимости от ваших потребностей я бы рекомендовал использовать препроцессоры css, такие как SASS, LESS. Вы увидите, что по мере роста веб-сайта вы разработаете довольно длинный, прокручиваемый список различных элементов и правила CSS. Некоторые из правил могут частично или частично перекрывать друг друга (в этом случае обычно выигрывает более конкретное правило).

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

Существует много способов реорганизовать ваш код CSS, чтобы упростить навигацию и использование. Некоторые из самых простых методов являются наиболее эффективными и имеют наибольший пробег. Вот некоторые из самых быстрых из них:

1. Keep your spacing uniform: Поддерживать тот же интервал между правилами и внутри деклараций по всему файлу, так что это легче читать.
2. Use semantic or “familiar” class/id names: Вместо использования класса имя типа «bottom_menu», попробуйте использовать семантический тег «footer». Или , когда у вас есть изображение в вашем разделе «контакт», убедитесь, что вы используя класс на изображении, как «contact_image»
3. Keep it DRY (не повторяться): В идеале вы хотите повторить мало вашего кода. Вы нашли объявление «background-color: # 000», повторяющееся в вашем файле CSS? Рассмотрим , набрав его один раз и вместо этого, используя несколько селекторов в одном объявлении .
4. Положите свой опыт в соответствии с этими инструментами: запустите свой CSS через CSS Lint или W3C - это поможет правильно проанализировать ваш файл CSS, и выделить проблемные области. Ваши web browser’s developer tools являются также чрезвычайно полезными для определения конкретных элементов на вашем сайте и использования области в качестве песочницы для экспериментов с различными стилями и позиционированием . Посмотрите here для получения дополнительной информации