Q & A о Сьюзи и других инструментах, с Мириам Сюзанной.
О Мириам Сюзанне и вопросах и ответах
Мириам является соучредителем OddBird и автором Jump Start Sass на SitePoint. Она является создателем Susy , а также создателем и участником других инструментов и проектов с открытым исходным кодом. На прошлой неделе она смогла присоединиться к нам в Сообществе SitePoint для живой сессии вопросов и ответов, и ответила на всевозможные вопросы о Сьюзи, наборах инструментов и решениях, какие инструменты необходимы для ваших макетов.
Давайте подробно рассмотрим некоторые из многочисленных вопросов, на которые Мириам смогла ответить за нас!
Ваши вопросы
Вопрос: Каковы ваши рекомендуемые первые шаги в определении того, какие рамки, библиотеки, наборы инструментов (и т. Д.) Следует использовать для макетов и стилей CSS?
Мириам Сюзанна: Всегда есть компромисс между скоростью / привычностью наборов инструментов и дополнительным багажом зависимостей. Если вы работаете над личным проектом, идите со знакомством. Побаловать себя. В противном случае начните с самых маленьких и самых абстрактных наборов инструментов, а затем приступайте к работе. Bootstrap — это большое обязательство. Снасти-шкала нет. У меня есть несколько наборов инструментов, которые я загружаю в начале любого проекта, который больше, чем одна страница, и затем я ухожу оттуда. Если вы знаете, что вам это нужно, добавьте это прямо сейчас. Если вы думаете, что вам это может не понадобиться, подождите, пока не сделаете
Это всегда уравновешивающее действие, и нет способа «сделать это правильно» каждый раз. Будьте готовы передумать позже. Рефакторинг — это не ошибка, а весь смысл итеративного процесса.
Q: Почему Сьюзи?
Мириам Сюзанна: В то время, в 2009 году, было гораздо сложнее создавать текучие макеты на сетке. Было больше несоответствий в браузере, у нас были только плавающие объекты, и у нас не было размеров border-box Я использовал технику, которую я выбрал из выступления Натали Даунс по системам CSS . Это отличный разговор, если вы хотите увидеть, откуда пришло все мое вдохновение.
У нее отличная система, но она требует много математики. Математика не сложная, но очень повторяющаяся — и без Sass результаты выглядят как бессмысленные числа. Мне это не понравилось, поэтому я пожаловался на одно из наших рабочих ретритов, и кто-то показал мне Sass — который только начал набирать небольшую популярность в то время. Я написал Сьюзи той ночью. Это было крошечным, и только помогло мне с повторяющейся математикой. Я также встроил несколько помощников, чтобы справиться с ошибками браузера. Это все, что я хотел.
Другими вариантами с открытым исходным кодом в то время были огромные библиотеки CSS с предопределенными сетками, и меня это не интересовало. Насколько я знаю, Сьюзи была первой, кто естественным образом переместил грид-системы в Sass. Нет никакого способа построить Susy в чистом CSS.
Честно говоря, я больше не использую Сьюзи. Это не решает проблему, с которой я сталкиваюсь регулярно. Но я надеюсь, что это все еще полезно для людей, которые имеют дело с плавающими сетками и старыми браузерами.
В: Каковы сходства и различия в использовании Susy против калибровки рамки-границы и гибкой коробки?
Мириам Сюзанна: Вы можете использовать все три вместе! На самом деле они решают несколько разные проблемы:
- Flexbox — это то, что я называю «техникой разметки» (аналогично float, inline-block, таблицам и т. Д.). Это способ, которым браузер понимает создание областей на странице и управление их перемещением. Все эти методы имеют свои преимущества и недостатки. Но flexbox был единственным, предназначенным для обработки макетов. В настоящее время это делает его моим любимым, несмотря на проблемы. Вскоре мы также получаем макеты сетки в CSS, так что это будет другой вариант. Я рекомендую изучить, как они все работают, так что вы можете использовать каждый, где это имеет смысл. Одного инструмента никогда не бывает достаточно!
- Размер коробки помогает вам по-новому описать размер отдельного элемента. Вы хотите определить содержание и позволить расширению отступа? Если так, используйте контент-бокс. Если вы хотите описать внешний размер и позволить контенту корректироваться, используйте border-box. Наличие такой гибкости огромно, и это большое обновление по сравнению с тем, что было у нас семь лет назад. Опять же, узнайте, как работают оба варианта, чтобы вы могли быть более гибкими.
- Сьюзи просто калькулятор. Если вам нужно много математики, чтобы получить нужную сетку, используйте Susy. Или, во многих случаях, я думаю, что было бы лучше сказать «возможно, ваши сетки не должны быть такими сложными».
Q: Можете ли вы поделиться некоторыми вычислениями, которые Сьюзи делает за кулисами?
Мириам Сюзанна: Основной расчет Сьюзи таков:
$target-width / $context-width = $multiplier
Самое простое, это то же самое, что использовать percentage(1/5) Всего на самом деле не 5 — это нечто большее.
Если вы интересуетесь основами, загляните в ветку Susy 3ish, где мы урезали Susy до самого необходимого.
В: Есть ли инструментарий, над которым вы сейчас работаете преимущественно?
Мириам Сюзанна: Я переместила фокус на шаг назад, меньше концентрируясь на последовательном выводе (руководство по стилю, которое мы хотим создать), и больше внимания уделяя последовательному вводу . Я медленно собирал набор помощников Сасса, которые, как и Сьюзи, абсолютно неубедительны. Наши инструменты Accoutrement настолько абстрактны, что по большей части не имеют никакого вывода. Но они полезны для того, чтобы помочь нам определить шаблоны в коде, отслеживать эти шаблоны в одном месте и автоматически генерировать руководства по стилю на основе этой информации.
Q: Какие вещи вы должны учитывать, прежде всего, когда начинаете создавать инструментарий?
Мириам Сюзанна: я люблю это.
Я люблю, когда другие люди заинтересованы в создании инструментария для себя. Я думаю, что создание инструментария — отличный способ изучить код. Неважно, сколько людей решили проблему, решить ее самостоятельно — полезное упражнение.
Вот где я начну:
- Что не имеет смысла в моей кодовой базе? Что не читается тем, кто этого не написал?
- Какие проблемы мне приходится решать снова и снова?
- Где я повторяюсь, в коде или в моем процессе?
- Где я расстраиваюсь или скучаю?
Всегда следует использовать наборы инструментов, чтобы сделать ваш код более читабельным и более значимым. Отличная причина использовать Susy, потому что 12.456%span(1 of 6) Если у вас есть код, который не имеет смысла, выясните, что бы придало ему смысл. clearfix Не пряча его в миксине, ваш clearfix Когда вы вызываете хорошо названный миксин, вы добавляете ясность относительно того, почему этот код существует.
Я также думаю, что важно быть итеративным в дизайне вашего инструмента. Вполне нормально, что ваше первое решение будет неаккуратным и чрезмерно разработанным. Это отличное место для начала! Затем попробуйте использовать его, выясните, какие части мешают вам, и исправьте их. Я думаю, что миксины мешают Сьюзи, поэтому я планирую что-то с этим сделать. Accoutrement все прошли через различные стадии, так как мы добавляем и удаляем функции, которые не совсем помогают, как мы ожидали.
Сначала поймите неправильно! Убери это позже!
Спасибо, что присоединились к нам!
Спасибо всем, кто смог присоединиться к нам за вопросы и ответы, а также за превосходный набор вопросов, которые были там заданы. И особенно спасибо Мириам Сюзанне, что нашли время присоединиться к нам! Если вам интересно узнать больше, ознакомьтесь с полным обсуждением в Сообществе SitePoint .
Следите за обновлениями событий от SitePoint в ближайшее время!