«2015 год — это год, когда все отойдут от рамок».
Я действительно не знаю об этом. Я просто хотел связать вас всех приманкой. Помимо шуток, вы заметили тонкое движение в передней части сцены, где все отходят от рамок? Например, Susy , инфраструктура сетки Sass отошла от зависимости от Compass, и разработчикам предлагается всегда спрашивать , нужен ли вам jQuery .
Веб-компоненты сегодня в моде. По мере продвижения в мир, где компоненты являются первоклассными гражданами веб-приложения, мы остро нуждаемся в платформах, способных справиться с этой новой разработкой.
Пределы начальной загрузки и основания
Если вы являетесь разработчиком внешнего интерфейса, есть большая вероятность, что вы знакомы либо с Bootstrap, либо с Foundation наизнанку. Такие популярные CSS-фреймворки могут ограничивать нас при разработке с помощью веб-компонентов. Не то чтобы они плохие или что-то еще. Они просто поставляются со слишком многими встроенными стилями. Учитывая силу теневого DOM, это, вероятно, не то, что вы хотите. Эти структуры имеют репутацию стремления быть всем для всех. С другой стороны, управляемые компонентом CSS-фреймворки выступают в качестве отправных точек для проектирования и служат основой для разработки веб-компонентов. Они не стремятся быть чем-то большим.
Bootstrap в некоторой степени произвел революцию в том, как мы пишем интерфейсный код. Это дает нам отличные компоненты пользовательского интерфейса вместе со структурой для масштабируемых и поддерживаемых таблиц стилей. Он отлично подходит для работы с большими командами в принятом формате CSS. Проблема в том, что в нем много кода. Это прекрасно, если вы не хотите ничего строить с нуля. Однако его настройка не так эффективна. Можете ли вы настроить его? Конечно. Это легко? Под вопросом.
«Сейчас вы работаете, несмотря на — а не из-за — фреймворк CSS».
— Гарри Робертс
Фонд эффективно боролся с этой проблемой. Это было построено, чтобы быть настраиваемым с нуля. Фактически, команда была одержима идеей сделать тему по умолчанию очень простой, гарантируя, что все сайты, созданные с ее помощью, не будут выглядеть одинаково. Но некоторые из компонентов Foundation тесно связаны с разметкой, которая ограничивает разметку, которую вы можете использовать, выходя за рамки простой CSS-среды. Они активно работают над улучшением в этом направлении .
UI Kits vs. Frameworks
В начале этого года Гарри Робертс выступил с докладом ( см. Слайды ), в котором обсуждается тонкая грань между наборами пользовательского интерфейса и фреймворками CSS. В этом выступлении, говорит он, CSS-фреймворк убирается с вашего пути. Это идет без включенных стилей. Он поставляется без ограничений по разметке, структуре HTML или классам.
Комплект пользовательского интерфейса, с другой стороны, представляет собой законченный продукт, который предоставляет весь пакет прямо из коробки: дизайн, структура, стандарты, шаблоны и плагины JavaScript в одной аккуратно упакованной коробке. Это инструменты для быстрого прототипирования и быстрого отрыва от земли. Чаще всего вы в конечном итоге перезаписываете правила и обходите определения структуры, если хотите, чтобы они выглядели иначе, чем они были построены.
Чтобы представить это в перспективе, как недавно обсуждала Адди Османи , на одной странице примера проекта, созданного с помощью Bootstrap, может быть до 91% неиспользованного CSS.
Итак, вопрос: какие фреймворки будут мешать вам и позволят вам писать свой код вместо того, чтобы писать его для себя?
1. Pattern Lab
Pattern Lab, созданная Брэдом Фростом и Дейвом Олсеном, построена с использованием концепции атомного дизайна . Это ловкий подход к разработке сайтов, начиная с нуля и продвигаясь вверх. Это не столько фреймворк, сколько методология создания веб-сайтов и приложений.
Pattern Lab поощряет разработку веб-сайтов с акцентом на компоненты. Начните с базовой разметки и переходите к более сложным компонентам. Эта структура поставляется без предположений о стилях. Это мешает вам и позволяет вам работать над вашим CSS.
Он содержит рекомендации по структурированию вашего CSS-авторинга, а также набор инструментов, которые помогают во всем процессе разработки. Например, инструмент, который случайным образом изменяет размер экрана, чтобы увидеть, как ваш дизайн работает на разных размерах экрана, и инструмент аннотации для быстрой совместной работы.
Но самое приятное то, что он не зависит от препроцессора. В отличие от многих решений, он не имеет никакого отношения к тому, какой препроцессор вы используете; используйте все, что вам нравится, просто следуйте принципам. Он также поставляется с нулевым стилем и позволяет вам создать руководство по стилю вместо того, чтобы навязывать его вам.
2. Костюм CSS
SUIT CSS Николаса Галлахера, по определению, представляет собой методологию разработки компонентов на основе компонентов. Это обеспечивает набор руководящих принципов, которые учитывают реализацию и состав слабосвязанных независимых единиц.
Компоненты — суть этой структуры. Он нацелен на разработку интерфейсных систем, в которых компоненты можно компоновать и настраивать. Он содержит рекомендации по созданию компонентов, которые хорошо инкапсулированы и могут быть изменены через интерфейс.
SUIT CSS — это зрелая структура, построенная на прочных принципах. Документация — отличное место, чтобы узнать о ней больше, а также узнать больше о принципах интерфейса в целом.
Он также поставляется с набором пакетов, которые вы можете добавить в рабочий процесс. Он хорошо работает с npm (менеджер пакетов узлов) и включает в себя возможность автофиксации, тестирование инкапсуляции и настраиваемый и расширяемый препроцессор. Окунитесь в него или откиньтесь на спинку кресла и прочитайте некоторые принципы, на которых он основан, которые дают вам отличное понимание, даже если вы не решите его использовать.
3. inuitcss
CSS inuit не является набором пользовательского интерфейса. Он не навязывает никакого дизайна и не содержит тысяч компонентов или строк кода CSS. Это фреймворк, созданный с учетом масштабируемости и представляющий собой небольшой пакет, который можно масштабировать по мере необходимости.
«Inuitcss обеспечивает прочную архитектурную основу, на которой вы можете создать веб-сайт или приложение любого размера или стиля».
Еще раз, самый важный аспект inuitcss заключается в том, что он быстро убирается с вашего пути. Он разработан, чтобы быть независимым от стиля и формирует хорошую основу, на которой вы можете построить свой CSS.
Например, нумерация страниц в inuitcss идет только с полями и отступами вместо полностью разработанного компонента. Это позволяет вам определять свои собственные стили без необходимости настраивать структуру или, что еще хуже, переопределять ее.
В настоящее время inuitcss проходит модернизацию, и доступен набор пре-альфа-модулей из следующей версии.
Еще один аспект, который мне нравится в inuitcss, заключается в том, что он позволяет вам удобно размещать компоненты пространства имен. Легко перенести фреймворк в существующий проект и начать рефакторинг адского существующего кода.
Это огромная победа против любой основы. Напротив, откройте Bootstrap или Foundation и, скорее всего, первая строка представляет собой фрагмент кода, который влияет на все (я смотрю на вас, размер коробки!). Эти фреймворки не могут жить в тандеме с существующим стилем, или, может быть, трудно оставить один из них в проекте и ожидать, что все останется прежним. inuitcss делает это тоже, но его необязательно и легко отключить.
4. Чистый CSS
Чистый CSS, на мой взгляд, находится где-то между инструментарием пользовательского интерфейса и фреймворком. Он предоставляет базовый набор стилей, но позволяет вам перенять его оттуда. По замыслу, он предназначен для того, чтобы не мешать вам и позволять вам создавать свой CSS без необходимости переопределять существующие правила.
«Pure имеет минимальные стили и призывает вас писать свои стили приложений поверх него. Он предназначен для того, чтобы убираться с вашего пути и позволяет легко переопределять стили ».
Вывод
Веб-компоненты революционизируют интерфейсную сцену. Наши текущие любимые инструменты могут быть не самыми лучшими при работе с этими новыми возможностями. Возможно, вам пора заглянуть за ваши любимые рамки и попробовать что-то новое. Я надеюсь, что эта статья предоставила вам достаточно вариантов для рассмотрения.
Требуется много ясности, чтобы использовать правильный инструмент для любой проблемы. Выбирай с умом. Как всегда, не уклоняйтесь от прокручивания своих собственных.