Малко за CSS за начинаещи
Както писах по-рано, опитвам се да гриза гранит на науката в областта на оформлението и вече успявам да правя прости сайтове както на „голо“ оформление от нулата, така и шаблонни сайтове на CMS, със собствени настройки на стиловия лист. Сега искам да споделя своя опит и бележки, получени в процеса на самообучение, препоръки за инструменти, материали и ресурси, които ми помогнаха лично и може би ще помогнат на тези, които са едва в началото на пътуването.
Един от тези ресурси са различни уебинари на големи разработчици и ИТ компании, сред които, по мое мнение, училището за разработчици на Yandex заслужава специално внимание, чиито лекции периодично изучавам и правя бележки за себе си.
Въз основа на една от тези лекции за CSS инструменти, написах кратък преглед със съвети за начинаещи.
Също така сега има огромно количество специализирана литература, включително обучение. Лично аз се уча основно от книгите на Head First и първият ми опит в създаването на уебсайт беше следването на ръководството на тази публикация www.headfirstlabs.com/books/hfhtml. И вече, като допълнение, проучих книги като http://www.ozon.ru/context/detail/id/3881079, http://www.ozon.ru/context/detail/id/24493075.
Между другото, за всички книги винаги търсете най-новото издание и най-новите ръководства, технологиите все още се движат напред много бързо и те трябва да се следват бързо.
Теорията, разбира се, е полезна и без нея никъде, но без постоянна практика е трудно да се научите как да правите нещо наистина полезно.
2.2. Инструменти на браузъра или свойства на програмиста
Ако пясъчниците вършат чудесна работа при бъркане/игране/опитване, тогава, когато правите проекта си, тогава, разбира се, искате нещокоригирайте го в него и вижте как тези промени работят в браузъра. Всеки браузър има свои собствени инструменти. Ако някой не знае, тогава работи по следния начин: отворете която и да е страница, щракнете с десния бутон - след това „Преглед на кода“ и виждаме прозореца, който се отваря отдолу или отляво. Щраквайки върху произволен елемент отляво, го виждаме в прозореца на браузъра. Вдясно има всички свойства на css, приложени към този елемент и ако искаме бързо да видим и променим нещо, тогава го променяме директно в свойствата на разработчиците или напълно деактивираме свойството и гледаме резултата.
Това е много удобен инструмент и ако имате нужда от малко практика без собствен проект, тогава ние вземаме всеки уебсайт, отваряме свойствата на разработчиците и изучаваме кода, навираме в свойствата, завъртаме ги, променяме ги и виждаме как и какво се показва в прозореца на нашия браузър.
2.3. Редактори на код.
Тъй като CSS се развива дълго време и синтаксисът му отдавна е установен и няма толкова много актуализации, някои неща вече искат да се пишат по-бързо и по-лесно, поради това се появяват неща като препроцесори. Тоест, ако имаме хиляди редове със стилове и няколко отделни CSS файла, тогава поддържането на цялата тази икономика ще бъде доста проблематично. За да се реши този проблем, бяха създадени CSS препроцесори, които ни позволяват да създаваме стилове по-динамично. Предварителните процесори ни спестяват време и правят много рутинни неща вместо нас благодарение на техните функции, като например: вложени селектори, математически функции, препратки към родителския селектор и дори съобщения за грешка, които ни казват къде и защо е възникнала грешката в кода.
Най-известните от тях са SASS, LESS, Stylus, Roole. SASS е може би най-старият и най-широко използван. LESS е най-простият и има най-малко функции. Но за да започнем с препроцесорите,вероятно не си струва. Има смисъл да пишете чист CSS, вижте как работи (можете да използвате sandboxes, за да не се притеснявате в началото), но по-късно трябва да погледнете и да опитате препроцесори и да изберете този, който ви харесва и отговаря на вашите задачи.
Има огромен брой рамки, т.е. готови набори от CSS и HTML, написани, включително с помощта на препроцесори. Например "bootstraps" (най-известният от тях е Twitter Bootstrap) са набори от готови класове с CSS свойства за бързо създаване на определена страница, която изглежда нормално и стандартно. Когато включваме framework файлове в проект, можем да използваме дефинираните в тях класове за маркиране и фрагменти, които ще работят според вече описаните правила и ще имат зададен вид (например бутони, полета за въвеждане, таблици и др.). По този начин спестяваме време, например, за описване на местоположението на дизайнерските блокове, техните размери в зависимост от разделителната способност, външния вид на полетата на формуляра, бутоните и тяхното състояние. Има много рамки и също не е препоръчително да започнете с тях, тъй като кодът в тях е доста специфичен и пригоден за определени задачи. По-добре е да създадете свой собствен код и да се учите от грешките си, отколкото да копирате и поставяте код от готови рамки.