Блог

У меня есть большой проект, структурирующий свою CSS-архитектуру с помощью ITCSS. В целом, мне это нравится. Однако у меня есть одна проблема при стилизации форм.

Я оформил различные элементы формы в своем слое elements:

в forms.scss:

 input[type="text"], input[type="password"] {
  // sexy element styles
}
  

Однако, если у меня есть компонент, которому требуется другой стиль:

в foo_component.scss:

 .c-foo__text, .c-foo__password {
  // sexy component styles
}
  

Из-за избирательности типа ввода в forms.scss стили моих компонентов в foo_component.scss не переопределяют стили элементов в forms.scss .

Текущий рефакторинг, о котором я думаю, меняется forms.scss на объект:

рефакторинг form_object.scss:

 .o-form__text, .o-form__password {
  // sexy object styles that will be overwritten by the lower component
}
  

Мне было интересно, является ли это правильным соглашением или есть лучшее решение?

Основная проблема вызвана тем фактом, что вы объявляете очень специфичный стиль ( input[type="text"] ) на forms.scss довольно высоком уровне в графике специфичности.

В ITCSS мы начинаем с самых общих стилей и заканчиваем самыми явными.

Более того, давайте посмотрим на слои перевернутой пирамиды:

Я считаю, что в идеальном случае вам следует применить свою логику на уровнях Generic, Base и Components.

Итак, основываясь на всем этом, имея только ограниченную информацию, которой вы поделились, я бы посоветовал вам реорганизовать ее таким образом:

1. Стиль формы в общем слое: переместите сюда любые стили сброса, связанные с формой / вводом. Используйте только глобальные сбросы (например, normalize.css или reset.css ). Это стили ground zero. Вы могли бы использовать определенный селектор, подобный input[type="text"] , но только для сброса стиля, а не для добавления темы или чего-либо связанного.

2. Здесь представлен стиль формы на базовом уровне: неклассированные элементы формы. Примените здесь общие form или input стили, которые являются общими для всех элементов. Не используйте селектор like input[type="text"] для оформления чего-либо, что вы хотели бы изменить в другом элементе. Размещайте здесь только общие стили.

3. Оформление формы на уровне компонентов: вот где должны быть размещены ваши стили пользовательского интерфейса. Подумайте о том, чтобы переместить // sexy element styles , о котором вы здесь говорите, присвоив им класс, как, .form-control скажем. Под этим классом добавьте другие, более специфические модификаторы класса / пользовательского интерфейса.

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

В любом случае, если что-то еще не удается, вы всегда можете обратиться к слою Trumps 🙂