Как да намерите правилния набор от CSS инструменти и рамки

Миналата седмица Miriam се присъедини към нашия форум в SitePoint за сесия с въпроси на живо. Тя отговори на различни въпроси за Сузи, други инструменти, а също така говори за това как да решите кои инструменти са ви необходими, когато създавате вашите макети и кои не.

Нека да преминем през този диалог и да подчертаем някои въпроси.!

Вашите въпроси

Въпрос: какво препоръчвате да направите първо, когато избирате рамки, библиотеки, инструменти и т.н., които ще ви трябват, за да създадете CSS оформления и стил?

Мириам Сузани: „Винаги има компромис между осведомеността за скоростта/инструмента и допълнителните зависимости. Ако работите по личен проект, използвайте нещо, което вече знаете. Поглези се. В противен случай започнете с най-малките и абстрактни инструменти и работете с тях. Bootstrap ви поставя много отговорности, което не може да се каже за мащабируеми кутии с инструменти. Имам няколко инструмента, които зареждам незабавно във всеки проект, ако е повече от една страница. Освен това изхождам от нуждите. Ако разбирате, че имате нужда от този инструмент, добавете го веднага. Ако смятате, че може да изчака, добавете го по-късно, ако е необходимо.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Винаги трябва да балансирате, не можете да направите всичко както трябва. Бъдете готови за факта, че трябва да промените решението си. Рефакторингът е целият смисъл на итеративния процес. "

Въпрос: защо Сузи?

Мириам Сузани: „През 2009 г. беше много по-трудно да се създадат течни оформления в мрежа мрежа. Браузърите възприемаха всичко по различен начин, но ние имахме само обвивки и нямахме свойството border-box. Използвах техника, която видях от Натали Даун в нейната лекция за CSS системи. Страхотна лекция, тя ме вдъхнови.

Системата на Натали е отлична, но има много математика. Математиката е проста, но често се повтаря. И без Сас резултатът е като безсмислена колекция от числа. Не ми хареса и на едно от нашите работни събития говорих за това. Показаха ми Сас, който по това време едва започваше да набира популярност. Същата вечер написах рамката на Susy. Беше малко и просто ми помогна с повтаряща се математика. Към него добавих и няколко помощници, които отстраняват грешки в браузъра. Това ми беше достатъчно.

По това време беше възможно да се избере някаква огромна CSS библиотека с предварително дефинирани мрежи, но това не ме интересуваше. Доколкото знам, Susy беше първият опит за добавяне на мрежови системи към Sass на родно ниво. Невъзможно беше да се напише Сузи в чист CSS.

За да бъда честен, в момента почти не работя със Сузи. Тази рамка не решава проблемите, с които се сблъсквам постоянно. Но се надявам, че тази рамка все още ще бъде полезна за тези, които все още работят с обгърнати мрежи и по-стари браузъри. "

Въпрос: какви са приликите и разликите в Susy, border-box и flexbox?

Мириам Сузани: „Можете да използвате и трите инструмента едновременно! Те решават малко по-различни проблеми:

Flexbox е това, което наричам "техника на оформление" (като float, inline-block, таблици и т.н.). Всички тези техники имат предимства и недостатъци. Въпреки това, само flexbox е проектиран да работи с оформления, което го прави любимият ми инструмент въпреки предизвикателствата, които възникват. Оформленията на мрежата скоро идват в CSS, така че ще имаме избор. Съветвам ви да се научите как да работите с всеки инструмент, за да можете да ги използвате там, където са необходими. Един инструмент никога не е достатъчен!

Оразмеряването на кутията може да се използва за преоразмеряване на един елемент. Искате ли просто да оразмерите съдържанието, така че подложката да разшири блока? Използвайте кутия със съдържание. Ако искате да зададете външен размер, така че съдържанието да се побере в него, използвайте border-box. Тази гъвкавост е голяма крачка напред от това, което имахме преди 7 години. Отново се научете и двамата да бъдат по-гъвкави.

Сузи е прост калкулатор. Ако установите, че вашата мрежа изисква много математика, използвайте Susy. В много случаи мисля, че би било по-добре да кажем „може да направим мрежата по-проста“.

Въпрос: можете ли да споделите някои от изчисленията, които прави Сузи?

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Мириам Сузани: „Първото изчисление на Сузи: $ target-width/$ context-width = $ multiplier. Най-простият пример за нещо подобно е използването на процент (1/5), за да се получи една колона от пет. Добавянето на разделители е малко по-сложно. Сумата вече няма да е равна на пет, а ще бъде малко повече.

Ако искате да разберете основите на рамката, ето една съкратена версия на Susy. "

Въпрос: имате инструмент, с който работите по-често от други в момента?

Мириам Сузани: „Преместих фокуса си назад, като обърнах по-малко внимание на резултата (като ръководството за стил) и се фокусирах върху входа. Бавно разработвам набор от помощници на Sass, които са напълно податливи като Susy. Мащабируемите инструменти са толкова абстрактни, че повечето от тях дори нямат изход. Те обаче ни помагат да създаваме шаблони в код, да ги проследяваме на едно място и автоматично да генерираме ръководства за стил въз основа на тази информация. "

Въпрос: какво да се има предвид преди всичко при създаването на инструмент?

Мириам Сузани: „Харесва ми този въпрос. Обичам, когато хората искат да създадат нов инструмент за себе си. Намирам процеса на създаване на инструмент за чудесен начин да науча код. Без значение колко хора решават даден проблем, решаването му сами е добро мозъчно упражнение.

Започвам със следните въпроси:

Какви парчета код са безсмислени? Кои части от кода няма да бъдат разбрани от някой, който не го е написал?

Какви проблеми трябва да решавам отново и отново?

Където се повтарям, в код или процес?

Къде да спра да разбирам, или да ми омръзне?

Намирам за много важно да се повторя в дизайна на инструмента. Добре е, ако първият ви инструмент е малко небрежен и излишен. Това е добро място за начало! Опитайте се да използвате творението си, идентифицирайте неудобните части и ги поправете. Струва ми се, че миксините пречат на Сузи и мисля да разреша този проблем по някакъв начин. Всеки набор от инструменти премина през различни етапи, когато добавяме и премахваме функции, които не работят по начина, по който искахме.

Направете грешка за първи път! След това го оправете! "

Благодарим ви, че се присъединихте към нас!

Благодарим на всички, които успяхме да се присъединим към нас за сесията с въпроси и отговори, а също и благодарности за страхотните въпроси. Специални благодарности на Miriam Suzanne за отделеното време! Всички отговори могат да бъдат прочетени на форума на SitePoint.

Автор: Джеф Смит, Мириам Сузани

Редакционен персонал: Команда Webformyself.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3