Руководство высокого уровня для дизайнеров и разработчиков, которые пишут CSS, но хотят быть более стратегическими в построении систем CSS с умеренным или большим размером
Я потратил много времени на работу с системами CSS. Большое количество моего воздействия произошло во время работы в небольшом агентстве веб-разработки в качестве инженера и дизайнера интерфейса. Будучи главным образом ответственным за все, что HTML, CSS и презентация JS на десятках ранее смоченных кодовых блоков, научили меня быть гибкими и гибкими в грязной системе. Он также научил меня, как быть адаптируемым в умиротворенных средах, иногда переключаться между пятью совершенно разными кодовыми базами за один день и оставаться в соответствии с их отдельными шаблонами.
Несколько раз с годами я набрал некоторую комбинацию слова «идеальная архитектура структуры CSS» в Google, которые ищут руководство для создания поддерживаемой и масштабируемой среды. Моя работа в этих широких средах CSS с одинаково разнообразной командной динамикой заставила меня много подумать о том, как выглядит «идеальная» система CSS для проекта и компании.
Недавно у меня была возможность создать новую систему CSS для каталога партнеров Gusto. Каталог помогает пользователям найти бухгалтеров, бухгалтеров и других, которые используют платформу Gusto Partner. Создание цифрового рынка — немалая задача, даже в меньших масштабах, и участие в массовых совместных усилиях. Моя область внимания на этапе разработки была в первую очередь структурирована нашей новой системой CSS. Это выявило некоторые глубокие вопросы о том, какие шаблоны мы должны использовать и как этот проект мог бы служить прототипом для более масштабных рефакторов на горизонте. Это заставило меня снова подумать о «идеальной» системе CSS, что это значит, и если это даже возможно.
Отложите выделенный мозговой штурм и время исследований до кодирования
Возможно, вы уже много лет работаете в дезорганизованных системах и уже мечтали о том, что бы вы сделали по-другому, молча рассуждая о том, как использовать селектор id и один файл для оформления страниц. Возможно, это ваш первый проект, использующий Sass и компиляцию CSS. В любом случае, сделайте шаг назад и спросите себя, почему вы выбираете инструмент, соглашение об именах или структуру перед погружением в работу. Существует много мнений о лучших практиках CSS там, и он может получить подавляющее.
Некоторые вещи, которые вы хотите просмотреть для своего плана действий:
- Именование
- BEM, SMACSS и любые модификации тех, которые вы хотите включить в
- . Какое расширение языкового стиля в стиле CSS, которое вы хотите использовать
- Модули CSS с реакцией?
- Файловая архитектура
- Atomic CSS, ITCSS, ваша собственная причудливая структура
- Структуры CSS
- Bootstrap, Framework, a простая сборная сетка
- Рамки Javascript и альтернативные способы стилизации
- React, Angular, PostCSS, CSS Grid и т. д.
Получить бай-ин рано и подготовиться к компромиссу
Необходимость использования других разработчиков и дизайнеров для использования стандартизованных правил. При запуске проекта с самого начала создавайте разработчиков на своих CSS, JS и даже HTML-соглашениях. Встречайте на ранней стадии и часто, чтобы обсудить каждую библиотеку, структуру, ментальную модель и драгоценный камень, вы заинтересованы в том, чтобы серьезно относиться к обращению и относиться к ним серьезно. Проще говоря, если они абсолютно ненавидят BEM и отказываются писать, не используйте BEM. Вы можете исследовать работу вокруг этого с помощью перемычек, но вынуждая людей использовать соглашение об именах, которое они ненавидят, не облегчит вашу работу. Надеюсь, вы сможете убедить их, почему дополнительные символы подчеркивания полезны, но найти среднюю площадку, где все будут участвовать в некоторые из них являются приоритетом.
Например, объясняя мою архитектуру и соглашения об именах для Справочника партнеров другому разработчику, мы столкнулись с одним из этих компрометирующих моментов. Я попросил ее использовать BEM, семантическое обозначение, сильно полагаться на помощников и т. Д. Она согласилась, а затем предложила написать свойства CSS в алфавитном порядке. Я лично предпочитаю перечислять вещи с функциональной группировкой, но алфавитный порядок — это условное кодирование в Gusto. Взяв личное предпочтение в стороне, было легко скомпрометировать в свете более крупных систематических стандартов, которые я надеялся достичь.
Держите свою землю в самые удачные моменты
Все, что компромиссная идеология говорит, выяснить, где вы носите свою ногу. Это проще в тех случаях, когда что-то нужно лишь иногда внедрять. Правила, которые соблюдаются часто — как соглашения об именах, — скорее всего, со временем исчезнут, если разработчики не будут куплены в эту концепцию. Именование имен файловой системы или сторонних поставщиков — хорошие кандидаты на высокие удачные моменты, за которые вы можете бороться, поскольку они модифицированы нечасто.
Примером может быть Bootstrap. Не поймите меня неправильно, интерфейсные рамки и библиотеки великолепны, однако они могут привести к чрезмерному раздуванию кода при использовании слишком либерально. Мы используем Bootstrap (прежде всего сетку) в наших кодовых файлах, потому что он широко известен и прост в работе с большинством разработчиков и дизайнеров. Можно утверждать, что компании с сторонними разработчиками должны использовать Bootstrap вообще, поскольку у него более 10 000 строк кода (150 000 символов!), И большая часть этого кода стиля не используется на фирменном сайте. Например, если стиль кнопки Bootstrap бессмыслен и повторяется, если вы кодируете собственную систему кнопок. Это отличный инструмент для разработчиков, которые хотят отполировать свои приложения, но в нашем случае использование всей библиотеки Bootstrap не требуется.
В начале справочника партнеров я выкрикнул сетку , медиа и файлы из Bootstrap 4 в наш каталог Sass. Несколькими неделями позже я увидел, что жучок Bootstrap был включен от благонамеренного разработчика, который не понимал, почему я только добавил только несколько файлов кода Bootstrap в репо. После дружеской, но тщательной беседы мы удалили драгоценный камень.
Выбор правильной ментальной модели
Часто разработчики используют ] таблица стилей часть каскадных таблиц стилей, таких как рок-звезды и даже каскад бит в пределах определенного файла. Тем не менее, обнаружение рассеяния ! Важных тегов подсказывает, что каскад макроуровня начинает разваливаться.
Кроме того, создание правильной организационной структуры для вашего CSS позволит сэкономить много головной боли, когда ваша система станет более надежной и сложно. Несколько популярных ментальных моделей в наличии — это атомная структура Брэда Фроста, базовая система организации файлов от Sass или вариант, которым я занимался в каталоге Partner: ITCSS — перевернутый треугольник CSS. Эти структурные системы по существу определяют общий каскад, чтобы убедиться, что наиболее специфические элементы наследуются от самых общих правил, приводя к DRY-коду и правильному наследованию.
Концептуализируя слои специфичности, полагаетесь ли вы на ментальную модель, например ITCSS или нет важны для масштабируемости. Сначала подумайте о самых широких инструментах или о том, что вы хотите иметь наименьший авторитет . Например, цветовые переменные вашего бренда должны быть доступны почти повсюду в остальной части кода. Это должно привести к тому, что в вашем сознании будет поставлен сигнал вверху каскада.
Настройка вашей системы
Мне нравится использовать существующую ментальную модель или так как это помогает будущим разработчикам находить обсуждения и документацию в онлайн-сообществе разработчиков интерфейса. ITCSS сам по себе был почти идеален для моих нужд, но я сделал несколько небольших настроек, чтобы пользовательский подход соответствовал моему проекту.
Определения слоев для этой слегка измененной структуры ITCSS:
- Продавец — файлы для стороннего кода.
- Настройки — препроцессоры, шрифты, переменные (не генерируют никакого вывода стиля)
- Инструменты — mixins, functions (не генерирует никакого стиля)
- Generic — сбрасывает или нормализует файлы
- Элементы — голые элементы HTML (H1 , a, p и т. д.)
- Компоненты — Большинство кодов идет здесь, чтобы учесть специфические компоненты пользовательского интерфейса
- Утилиты / помощники — утилиты и
Модификации ITCSS в деталях
- Добавление (вспомогательные классы), обладающие наибольшим авторитетом (показать / скрыть, цветные помощники и т. д.) Поставщик Layer Одна проблема, с которой я столкнулся с ITCSS и всеми примерами проектов, заключалась в том, что ни один из них не использовал сторонний стиль поставщика листы. Можно было бы утверждать, что они размещаются за пределами этой файловой структуры или в идеале пропускают их все вместе, но мы используем несколько таблиц стилей поставщика (например, сетку Bootstrap), и я хотел, чтобы они были рядом. Таблицы стилей сторонних поставщиков должны всегда иметь наименьший авторитет над каскадом. Ваш собственный код должен легко перезаписывать что-либо от поставщика без необходимости! Важных тегов. Поэтому я добавил каталог поставщика как самый верхний слой в моем перевернутом треугольнике.
- Префикс каталогов с номерами Это маленький, но делает всю систему более визуально легкой для объяснения новый разработчик, входящий в проект. Предоставляя номера каталогов слоев, каскад важности визуализируется на первый взгляд. Помните, как я сказал, что поставщик находится наверху перевернутого треугольника? Легко видеть, что с префиксным номером.
Самое важное в том, что вы создаете собственную систему или изменяете существующую систему, — это документировать ваши изменения. Не забудьте дать другим разработчикам головы, что есть небольшие изменения в этой ментальной модели или объяснить, как работает ваша блестящая новая модель.
Комментарии, комментарии, комментарии
Я думаю, что иногда люди забывают о важности комментирования в CSS, потому что просто писать CSS и трудно сломать. Помните, CSS прост, но это непросто. Сделайте вашу систему более понятной в README и встроенном комментировании. Запишите свою логику, дайте вкладчикам знать, как использовать систему. Да, для типографики есть переменный файл, но им не нужно часто использовать эти переменные, потому что у нас уже есть помощники, созданные для этого. Так почему бы не сказать, что в переменном файле? Это также особенно полезно, если вы используете код поставщика для чего-то. Использование Bootstrap для контрольных точек? Прокомментируйте, где вы будете писать новые точки прерывания CSS, чтобы разработчики не делали другой набор ненужных медиа-запросов.
Комментарии любезны будущим разработчикам и вашему будущему «я», используйте их.
Загрузка...
