Як підібрати правильний набір CSS інструментів і фреймворки

29

Від автора: питання і відповіді по фреймворку Susy та іншим інструментам з Міріам Сюзанн. Міріам – співзасновник OddBird, а також автор книги Jump Start Sass на сайті SitePoint. Вона є творцем фреймворку Susy, а також активно підтримує інші інструменти та проекти з відкритим вихідним кодом.

Минулого тижня Міріам приєдналася до нашого форуму на SitePoint і провела живу сесію у форматі питання-відповідь. Вона відповідала на різні питання по Susy, іншим інструментам, а також говорила, як вирішити, які інструменти потрібні вам при створенні макетів, а які ні.

Давайте пройдемося по цьому діалогу і виділимо деякі питання!

Ваші запитання

Питання: що ви рекомендуєте робити в першу чергу при виборі фреймворків, бібліотек, інструментів і т. д., які вам знадобляться для створення CSS макетів і стилізації?

Міріам Сюзанн: «Завжди є компроміс між швидкістю/обізнаністю про інструмент та додатковими залежностями. Якщо ви працюєте над власним проектом, користуйтеся ніж-то вже знайомим. Побалуйте себе. В інших випадках почніть із самих маленьких і самих абстрактних інструментів і працюйте з ними. Bootstrap накладає великі обов’язки на вас, чого не можна сказати про масштабовані набори інструментів. У мене є пара інструментів, які я завантажую відразу в будь-який проект, якщо той більше однієї сторінки. Далі я відштовхуюся від потреб. Якщо ви розумієте, що цей інструмент вам необхідний, додайте його відразу. Якщо ви думаєте, що це може почекати, додайте його потім, якщо знадобиться.

Потрібно завжди балансувати, не можна робити все правильно. Будьте готові до того, що вам доведеться поміняти свою думку. Рефакторинг – вся суть ітераційного процесу.»

Питання: чому 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?

Міріам Сюзанн: «Перше обчислення Susy: $target-width / $context-width = $multiplier. Найпростіший приклад чогось подібного – це використання percentage(1/5) для отримання однієї колонки з п’яти. При додаванні роздільників трохи складніше. Сума вже не буде дорівнює п’яти, вона буде трохи більше.

Якщо хочете зрозуміти основи фреймворку, за посиланням ви знайдете урізану версію Susy.»

Питання: у вас є інструмент, з яким ви працюєте частіше інших на даний момент?

Міріам Сюзанн: «Я посунула свій фокус тому, приділяючи менше уваги вихідних даних (як наприклад, керівництво по стилям), і зосередилася на вхідних даних. Я повільно розробляю набір Sass хелперів, який повністю податливий, як Susy. Масштабовані інструменти настільки абстрактні, що у своїй більшості у них навіть немає вихідних даних. Однак вони допомагають нам створювати шаблони в коді, відстежувати їх в якомусь одному місці і автоматично генерувати керівництва по стилям на основі цієї інформації.»

Питання: що потрібно враховувати в першу чергу при створенні інструменту?

Міріам Сюзанн: «Мені подобається це питання. Мені подобається, коли люди хочуть створити новий інструмент для себе. Я вважаю, що процес створення інструменту – це відмінний спосіб вивчити код. Неважливо скільки людей вирішило проблему, вирішити її самому буде хорошим вправою для мозку.

Я починаю з наступних питань:

Які ділянки коду безглузді? Які ділянки коду не зрозуміє той, хто не писав його?

Які проблеми я зобов’язаний вирішувати знову і знову?

В якому місці я повторююсь, в коді або процесі?

В якому місці я перестаю розуміти, або мені стає нудно?

Інструменти завжди необхідно використовувати, щоб ваш код став більш читабельним і зрозумілим. 12,456% нічого не значать, а ось span(1 of 6) – відмінна причина працювати з Susy. Якщо у вас є незрозумілий код, подумайте, що може зробити його осмисленим. Ще один чудовий приклад – clearfix. Якщо не заховати його у міксин, clearfix перетворюється в сміттєвий хак. При виклику міксина з гарним ім’ям, ви робите його існування обґрунтованим.

Я вважаю, що в проектуванні інструменту дуже важливо повторюватися. Нічого страшного, якщо ваш перший інструмент буде трохи недбалим і надлишковим. Це хороший майданчик для початку! Спробуйте скористатися своїм творінням, визначте незручні частини і виправте їх. Мені здається, міксини заважають Susy, і я думаю вирішити цю проблему. Будь інструментарій пройшов через різні етапи, коли ми додаємо і видаляємо функції, які не працюють так, як ми того хотіли.

Помиліться в перший раз! Потім виправите!»

Спасибі, що приєдналися до нас!

Спасибі всім, хто не зміг приєднатися до нас на сесії питання-відповідь, а також дякую за відмінні питання. Окрема подяка Міріам Сюзанн за приділений час! Усі відповіді можна почитати на форумі SitePoint.