Глобальные элементы охвата в рамках ITCSS
Я занимаюсь разработкой фронт-энда в течение 15 лет. Возможно, я застрял на моем пути, но в моей области переднего плана архитектура и порядок, в котором разрабатываются элементы с заданными областями, просты: отложить в сторону библиотеки шаблонов и более тонкие модульные детали.
- Разработка заголовка / основного / нижнего колонтитула - сначала сделайте это, убедитесь, что он эффективен в разных браузерах и прекрасно работает на мобильных устройствах.
- Разрабатывайте все в рамках основного тега - модульных компонентов.
Я нахожусь в процессе доработки нового шаблона, и самое близкое, что я могу найти, которое подходит моей идеологии, - это сочетание SMACSS, OOCSS и ITCSS. Но ради того, чтобы мои проекты были дружественными для других разработчиков, я выбрал ITCSS в качестве базовой архитектуры фреймворка, и все остальное постепенно превратится в OOCSS. Хорошо.
Одна часть, над которой я столкнулся с трудностями, это то, как / где разместить мои партиалы для элементов в глобальной области видимости, поэтому заголовок, главный нижний колонтитул.
Многие разработчики предпочитают использовать их только один раз на протяжении всей разметки, поскольку это обеспечивает более чистый и более удобный способ управления внешним интерфейсом. Итак, что касается структуры ITCSS, какой уровень они могут быть включены?
На мой взгляд, они могут быть распределены по нескольким слоям, например. Укажите поведение пользовательского интерфейса заголовка в "объектах", но тогда, если мы используем заголовок только один раз, тогда имеет смысл поместить его в "элементы" - но тогда где мы добавим к нему более декоративные стили? Компоненты? Я хочу зарезервировать слой "компоненты" для элементов в рамках основного тега.
Таким образом, наш заголовок распределен по 3 различным слоям - сбивает с толку / раздражает. Является ли ITCSS путь вперед?
1 ответ
Я отвечаю на свой вопрос, потому что думаю, что мир должен это услышать. Я могу быть не прав во всем. Это первые дни, но этот зверь должен летать.
У меня были проблемы (логически и этически), когда я решал, где разместить элементы глобальной области действия в моей архитектуре ITCSS. Мне не понравилась идея смешивания заголовка, основного, нижнего колонтитула и т. Д. - наряду с более модульными компонентами - для меня это не имело никакого смысла, и мне еще больше не понравилась идея разделения этих элементов на различные слои.
Итак, я придумал...
FakeCSS - смесь SMACSS/ITCSS/OOCSS
Что это такое и почему я это сделал
Ниже у нас есть порядок слоев. Это основано на принципах ITCSS и SMACSS, в соответствии с которыми мы разделяем стили в соответствующие стеки и размещаем их в порядке специфичности.
Круто, спасибо Гарри, это был ответ, который искали большинство из нас. Тем не менее, я решил отказаться от концепции OOCSS, что в значительной степени отражено в ITCSS, потому что я полагал, что слишком большое разделение противоречит нескольким основным принципам. Примером этого может быть элемент заголовка. Если вы намерены использовать его только один раз в своей разметке (как это делают многие из нас), то было бы лучше держать этот элемент аккуратно в одном месте в вашей архитектуре CSS.
Вместо того, чтобы рассматривать заголовок как элемент, а также как объект и компонент (отделить структуру от оболочки тремя различными способами), просто поместите его в один слой "макета", чтобы избежать срывов вокруг места, которое может расстроиться, потому что вы потратили целую вечность, уставившись на неправильный файл. Это не значит, что OOCSS полностью заброшен, просто всякий раз, когда он появляется, он появляется органически.
Почему вы должны использовать это
Это легко, это работает. Это может не подойти экстремистам, но для небольших и средних проектов это прекрасно сработает, и оно достаточно организовано для тех, кому небезразлично.
Так что сделай жизнь проще и зайди в FakeCSS.
- Конфиг - цвета, интервалы, точки останова, настройки
- Инструменты - миксин, функции, семья
- База - сброс, шрифты, тело
- Утилиты - иконки, анимация, помощники
- Продавцы - флекслайдер, сликслайдер, датапикер
- Объекты - раздел, сетки, боковые панели, рисунки, видео, оверлей
- Шаблоны - заголовки, списки, ссылки, кнопки, формы, абзацы
- Макет - заголовок, основной, навигационный, нижний колонтитул
- Модули - хлебные крошки, вкладки, гармошки, нумерация страниц, герой, карусель, печенье,
- Страницы - дом, контакты, поиск, 404