Как да станете магистър по CSS в 5 прости стъпки

Както знаете - наскоро напуснах зоната си на комфорт, затворих Android Studio и се потопих направо в страшно, грубо море, наречено Web Development. Неразделна част от изграждането на уеб приложения е работата с CSS. За тези, които не са запознати с Cascading Style Sheet - това е начинът, по който уеб разработчиците проектират своите уеб страници, придават му някакъв живот и структура, добавят анимации и губят здравина, докато го правят.

В тази публикация ще се опитам да опиша какво е необходимо за този, който иска, поради причина, която не мога да разбера, да стане магистър в CSS в 5 прости стъпки:

1. Изгубете интуицията си

Така че просто трябва да добавите още един бутон в края на формуляра, колко трудно може да се получи, нали? МОЛЯ, НЕ КАЖЕТЕ „ПРАВО”!

Например, CSS не харесва дясната страна, винаги ще предпочита лявата. Защото когато добавите float: нали; нещо нередно трябва да се случи. Някои елементи ще променят позициите си; някои дяволи ще отидат един над друг; някои стари версии на IE ще покажат страницата ви с главата надолу. Защо? Не знам.

Как да го решим? Вероятно трябва да добавите overflow: скрит към родителския елемент (или добавяне на манекен div за изчистване на плаващ, разбира се). Защо? Отново, не знам.

Ето как работи CSS, смятате, че трябва да работи по един начин, но обикновено грешите.

Моят жизнен цикъл на сесията за кодиране на CSS (източник: технологичен живот като графика)

2. Практикувайте редовно медитацията

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

И така, какво препоръчвам - преди всеки ден да разберете, че ще работите върху стилизирането на страницата си, отделете няколко минути и оставете тялото и ума си да се отпуснат. Медитирайте с това предвид: „това ще бъде трудно, това ще бъде грубо, но това е само софтуер и аз няма да позволя на тази недетерминирана система да ми стане на нерви.“

Това, съчетавайки се с премахването на остри предмети от бюрото ви, може да направи живота ви (и живота на вашия екип) много по-спокоен.

източник: гифи

3. Не обновявайте страницата си. Някога.

Когато работите с CSS, свиквате да работите направо в браузъра, така че можете лесно да играете със свойствата на елементите си и да получите незабавна обратна връзка.

Но докато неопитен разработчик ще загуби всичките си промени при случайно опресняване на страницата, CSS майсторът ще знае, че бутонът за опресняване е забранен. Особено не преди да покажете резултата на продуктовия мениджър.

Имам теория, че е създадено приложението за една страница.

4. Абонирайте се за някои бюлетини.

Уеб разработката е среда за бърза промяна на темповете. Рамките се променят бързо, всяка седмица има нова лъскава библиотека и всяка концепция се въвеждат седмично.

Най-добрият начин да бъдете над новите инструменти и идеи е да се абонирате за един или повече бюлетини.

По този начин ще можете да кажете неща като: „О, все още използвате Flexbox? Просто използвам CSS решетката сега; глупости “, когато вашият PR напълно обърка оформлението на страницата и не знаете защо.

източник: huangxuan

5. Работете върху уменията си за убеждаване.

Един ден вашият дизайнер ще дойде при вас с щура UX концепция, която абсолютно нямате идея как да ги приложите. Но вие сте CSS майстор и господарите не могат да признаят, че не знаят как да направят нещо.

И така, какво можете да направите? Просто го изгонете от него:

„О, не можем да го анимираме, защото това ще наруши достъпността на нашия сайт.“
„Плаващи гледки просто изглеждат зле на мобилните, повярвайте ми.“
„Материални карти? Все още ли сме през 2015 г. ?! “
„Pffff, като Facebook ?! Те поставят своя CSS в JS! Тези момчета са луди !! ”

Продължете с това, докато той не е наред със стандартния уебсайт за начален шаблон на Bootstrap.

източник: гифи

Следслов: тази публикация е саркастична и се възхищавам на всеки един от вас там, който може да подравни правилно текст точно до миниатюрата, точно както дизайнерът е искал да бъде.

Ако ви хареса тази публикация, моля натиснете бутона „препоръчайте“ по-долу и споделете тази история. Ще се радвам да чуя вашите коментари. Благодаря ти!

Първоначално публикувано в shem8.github.io на 25 август 2017 г.