От автора: вопросы и ответы по фреймворку Susy и другим инструментам с Мириам Сюзанн. Мириам – сооснователь OddBird, а также автор книги Jump Start Sass на сайте SitePoint. Она является создателем фреймворка Susy, а также активно поддерживает другие инструменты и проекты с открытым исходным кодом.
На прошлой неделе Мириам присоединилась к нашему форуму на SitePoint и провела живую сессию в формате вопрос-ответ. Она отвечала на различные вопросы по Susy, другим инструментам, а также говорила, как решить, какие инструменты вам нужны при создании макетов, а какие нет.
Давайте пройдемся по этому диалогу и выделим некоторые вопросы!
Ваши вопросы
Вопрос: что вы рекомендуете делать в первую очередь при выборе фреймворков, библиотек, инструментов и т.д., которые вам понадобятся для создания CSS макетов и стилизации?
Мириам Сюзанн: «Всегда есть компромисс между скоростью/осведомленностью об инструменте и дополнительными зависимостями. Если вы работаете над личным проектом, пользуйтесь чем-то уже знакомым. Побалуйте себя. В остальных случаях начните с самых маленьких и самых абстрактных инструментов и работайте с ними. Bootstrap накладывает большие обязательства на вас, чего нельзя сказать про масштабируемые наборы инструментов. У меня есть пара инструментов, которые я загружаю сразу в любой проект, если тот больше одной страницы. Дальше я отталкиваюсь от потребностей. Если вы понимаете, что этот инструмент вам необходим, добавьте его сразу. Если вы думаете, что это может подождать, добавьте его потом, если понадобится.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНужно всегда балансировать, нельзя делать все правильно. Будьте готовы к тому, что вам придется поменять свое мнение. Рефакторинг – вся суть итерационного процесса.»
Вопрос: почему Susy?
Мириам Сюзанн: «В 2009 году было намного труднее создавать жидкие макеты на сетчатой системе. Браузеры воспринимали все по-разному, а у нас были только обтекания, не было и свойства border-box. Я пользовалась техникой, которую увидела у Натали Даун в ее лекции CSS системы. Отличная лекция, именно она вдохновила меня.
Система Натали превосходна, но в ней много математики. Математика простая, но она часто повторяется. А без Sass результат похож на бессмысленный набор цифр. Мне это не понравилось, и на одном из наших рабочих мероприятий я рассказала об этом. Мне показали Sass, который в то время только начинал набирать популярность. Той же ночью я написала фреймворк Susy. Он был небольшой и просто помогал мне с повторяющейся математикой. Также я добавила в него несколько хелперов, которые исправляли баги браузера. Этого мне было достаточно.
На тот момент можно было выбрать какую-нибудь огромную CSS библиотеку с заранее прописанными сетками, но меня это не интересовало. Susy, насколько я знаю, была первой попыткой добавить системы сеток в Sass на нативном уровне. На чистом CSS написать Susy было нереально.
Если честно, сейчас я почти не работаю с Susy. Этот фреймворк не решает те проблемы, с которыми я сейчас постоянно сталкиваюсь. Но я надеюсь, что данный фреймворк все еще будет полезен тем, кто до сих пор работает с сетками на основе обтеканий и старыми браузерами.»
Вопрос: в чем сходства и различия в Susy, border-box и flexbox?
Мириам Сюзанн: «Можно использовать все три инструмента сразу! Они решают немного разные задачи:
Flexbox – это то, что я называю «техникой макетирования» (как свойство float, inline-block, таблицы и т.д.). У всех этих техник есть преимущества и недостатки. Однако только flexbox был спроектирован для работы с макетами, что делает его моим любимым инструментом, несмотря на возникающие проблемы. В скором времени в CSS появятся макеты сеток, тогда у нас уже будет выбор. Советую научиться работать с каждым инструментом, чтобы использовать их там, где они необходимы. Одного инструмента никогда не хватит!
С помощью box-sizing можно по-новому задавать размер одного элемента. Хотите задать только размер контента, чтобы padding расширял блок? Используйте content-box. Если вы хотите задать внешний размер, чтобы контент подстраивался под него, используйте border-box. Такая гибкость – большой шаг вперед от того, что у нас было 7 лет назад. Опять же, научитесь обоим способам, чтобы быть более гибким.
Susy – простой калькулятор. Если вы понимаете, что ваша сетка требует много математических вычислений, используйте Susy. Во многих случаях я считаю, будет лучше сказать «может, сделать сетку попроще».»
Вопрос: можете поделиться какими-нибудь вычислениями, которые делает Susy?
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееМириам Сюзанн: «Первое вычисление Susy: $target-width / $context-width = $multiplier. Самый простой пример чего-то похожего – это использование percentage(1/5) для получения одной колонки из пяти. При добавлении разделителей чуть сложнее. Сумма уже не будет равна пяти, она будет немного больше.
Если хотите понять основы фреймворка, по ссылке вы найдете урезанную версию Susy.»
Вопрос: у вас есть инструмент, с которым вы работаете чаще других на данный момент?
Мириам Сюзанн: «Я сместила свой фокус назад, уделяя меньше внимания выходным данным (как например, руководство по стилям), и сосредоточилась на входных данных. Я медленно разрабатываю набор Sass хелперов, который полностью податлив, как Susy. Масштабируемые инструменты настолько абстрактны, что в своем большинстве у них даже нет выходных данных. Однако они помогают нам создавать шаблоны в коде, отслеживать их в каком-то одном месте и автоматически генерировать руководства по стилям на основе этой информации.»
Вопрос: что нужно учитывать в первую очередь при создании инструмента?
Мириам Сюзанн: «Мне нравится этот вопрос. Мне нравится, когда люди хотят создать новый инструмент для себя. Я считаю, что процесс создания инструмента – это отличный способ изучить код. Неважно сколько людей решило проблему, решить ее самому будет хорошим упражнением для мозга.
Я начинаю со следующих вопросов:
Какие участки кода бессмысленны? Какие участки кода не поймет тот, кто не писал его?
Какие проблемы я обязан решать снова и снова?
В каком месте я повторяюсь, в коде или процессе?
В каком месте я перестаю понимать, или мне становится скучно?
Инструменты всегда необходимо использовать, чтобы ваш код стал более читабельным и понятным. 12,456% ничего не значат, а вот span(1 of 6) – отличная причина работать с Susy. Если у вас есть непонятный код, подумайте, что может сделать его осмысленным. Еще один замечательный пример – clearfix. Если не спрятать его в миксин, clearfix превращается в мусорный хак. При вызове миксина с хорошим именем, вы делаете его существование обоснованным.
Я считаю, что в проектировании инструмента очень важно повторяться. Ничего страшного, если ваш первый инструмент будет немного небрежным и избыточным. Это хорошая площадка для начала! Попробуйте воспользоваться своим творением, определите неудобные части и исправьте их. Мне кажется, миксины мешают Susy, и я думаю решить как-то эту проблему. Любой инструментарий прошел через различные этапы, когда мы добавляем и удаляем функции, которые не работают так, как мы того хотели.
Ошибитесь в первый раз! Потом исправите!»
Спасибо, что присоединились к нам!
Спасибо всем, кто смог присоединиться к нам на сессии вопрос-ответ, а также спасибо за отличные вопросы. Отдельная благодарность Мириам Сюзанн за уделенное время! Все ответы можно почитать на форуме SitePoint.
Автор: Jeff Smith, Miriam Suzanne
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
