5 стъпки за драстично подобряване на вашите CSS знания за 24 часа
Кодирате от известно време и знаете как се движите около CSS файл. Със сигурност не сте майстор, но с достатъчно замах можете да стигнете до мястото, където искате да отидете. Чудите се дали все пак някога ще преминете тази точка, в която CSS е такава борба. Ще успеете ли някога да разрушите сложно оформление, без в крайна сметка да прибягвате до опити и грешки, за да видите какво работи и кое не?
Добрата новина е, че наистина можете да преминете през тази отчайваща точка, в която знаете достатъчно CSS, за да кодирате уебсайт, но ви липсва солидната основа, която ви позволява да кодирате без досада да не разберете точно как ще стигнете до мястото, където сте ' продължавате и тази точка е много по-близка, отколкото си мислите. Предлагам да има пет теми, които драстично ще повишат разбирането ви за CSS. Прекарайте известно време в четене за всеки през следващите двадесет и четири часа и ще промените начина, по който кодирате завинаги.
Разгледайте елементи Envato
1. Обвийте ума си около контекста за позициониране
Ако наистина искате да имате стабилно разбиране за това как да използвате CSS за преместване на HTML елементи до мястото, където искате да отидат, абсолютно трябва да се хванете на контекстите за позициониране. И нямам предвид просто непринудено разбиране, имам предвид дълбоко познаване на техните различия, поведение, странности и т.н.
Всъщност има пет стойности на позицията, които трябва да разберете. Ако не можете да назовете всичките пет, без да ги потърсите, определено сте основен кандидат за това малко образование. Ето ги: статични, фиксирани, относителни, абсолютни и наследствени.
Трябва да знаете и разбирате всичките пет, но големите две, които наистина ще променят начина, по който кодирате, са абсолютно и относително позициониране. Научаването да управлявате тези два контекста на позициониране отделно и след това да прескочите как работят заедно, ще промени фундаментално начина, по който виждате оформлението на CSS, обещавам. Това е откровение, което ще направи работата ви безкрайно по-лесна.
Ресурси, за да ви стигне до там
Ниското намаление на абсолютното спрямо относителното позициониране
Това е моето дълбоко гмуркане в темата за позиционирането на контекста. Накратко споменавам и обяснявам всичките пет, но наистина се съсредоточавам върху големите две: как се различават, как са различни и как работят заедно. Прочетете това парче и ще бъдете на път да позиционирате CSS без главоболие.
CSS позициониране 101
Това парче идва от благородния блог A List Apart, така че веднага знаете, че ще бъде едновременно задълбочено и невероятно образователно. Статията е публикувана през 2010 г., но информацията все още е напълно уместна и служи като чудесно въведение към всичките пет контекста за позициониране. Това не е много визуална статия, но има много прости примери за код, за да ви улесни във всяка концепция.
Научете CSS позициониране в десет стъпки
Това е фантастично кратък преглед на различните контексти за позициониране. Вместо една дълго навита статия, тази страница представя малка кутия с десет раздела. Всеки раздел има миниатюрен кодов фрагмент и изречение или две, обясняващи кода. В дясно е примерно оформление на живо, което се актуализира с всеки раздел. Този формат е фантастичен за визуално свързване на кодови фрагменти с произвежданите от тях оформления и горещо препоръчвам да го разгледате, ако се борите с предимно текстови обяснения като това по-горе от ALA.
2. Master Floats
Когато научите за първи път CSS, поплавките изглеждат като една от най-прецаканите системи за оформление, която може да се представи. След като се научите да ги използвате на основно ниво, тогава трябва да научите всичко за това как родителите, съдържащи само плаващи деца, имат свита височина, което след това води до четиридесет и седем различни начина за решаване на проблема чрез изчистване и манипулации с препълване.
За щастие, в дългосрочен план, вие свиквате с концепциите зад плувки и те дори могат да станат толкова лесни за използване, че изобщо не им обмисляте много. Единственото, което стои между вас и тази цел, е солидна статия или две, която наистина се разкопава и подробно обяснява поведението и техниките на поплавъка от горе.
Ресурси, които да ви стигнат до там
Всичко, което никога не сте знаели за CSS плава
В тази статия обхващам почти пълната гама от теми относно floats в CSS. Започва с основна дискусия какво представляват плаващите и как работят. След това говоря за това как поплавките въздействат на полетата на участващите елементи, как поплавките стават странни с елементи с различна височина, деветте правила, които покриват поведението на поплавъка и, разбира се, срива на височината и как да го коригирам.
Всичко за поплавките
Крис Койер винаги е бил моят любим автор, когато става дума за теми, свързани с CSS, и въвеждането му в плаващите не разочарова. Ако търсите кратка, но ясна дискусия за това как да работите с поплавъци, това парче ви обхвана. Особено харесвам прости, атрактивни илюстрации, използвани в цялата статия.
Мистерията на CSS Float Property
Докато парчетата на Крис Койеър обикновено са кратки и точни, съдържанието в Smashing Magazine обикновено е доста обширно с множество примери и подходяща дискусия. Тази статия представя концепцията за поплавките, разказва ви всичко за това как да ги използвате и изчистите и след това стартира дискусия за това къде обикновено виждате, че поплавките се използват в реални сайтове. Ако трябва да видите как теорията оживява, тази е за вас.
3. Познайте вашите селектори
Един от ключовете за писането на добър чист CSS е да се запознаете добре с това кои CSS селектори са достъпни за вас, как работят и каква степен те се поддържат в различни браузъри. Звучи като достатъчно проста тема, но в действителност светът на CSS селекторите е доста сложен.
Тук има много различни интересни неща, за да научите, от използването на селектори за стойност на атрибут и насочване на ключови думи в имената на класове до това как универсалният селектор може да бъде полезен за отстраняване на грешки в кода ви. Дори и да мислите, че можете лично да стигнете, без да разберете куп фантастични селектори, истината е, че други кодери използват тези неща всеки ден и трябва да можете да разберете какво виждате, когато натиснете изглед на източника!
Ресурси, за да ви стигне до там
CSS селектори: Just the Tricky Bits
Това е забавна статия, която разглежда предимно по-сложните аспекти на CSS селекторите. Прескачам нивото на нивото на земята и прескачам право в обсъждане как концепцията на DOM се превежда към насочване към различни аспекти на вашия документ с CSS. Ще научите всичко за избора на деца и братя и сестри, как да веригирате селектори и много други.
30-те CSS селектора, които трябва да запомните
Джефри Уей е рок звезда от уеб разработчици и статии като тази доказват защо. Тази статия за Nettuts + обхваща огромен масив от CSS селектори в опростен и кратък формат, който поставя голям акцент върху поддръжката на браузъра. Удивително е, че Джеф дори кодира на живо примерни страници за всеки от тридесетте избрани.
CSS Селектори на атрибути: Как и защо трябва да ги използвате
Селекторите на стойности на атрибутите са един от най-мощните подмножества от CSS селектори и CSS3 наистина повишава тази мощност. Няма да повярвате колко многостранни могат да станат вашите селектори с малко магия за стойност на атрибута. След като прочетете тази статия, вие ще стегнете около фрази като „произволен селектор на стойност на атрибут на подреда“ като професионалист.
4. Научете концепции за кодиране на DRY
„Не повтаряйте себе си.“ Тази проста фраза има драстични последици, когато става въпрос за кодиране. Когато наистина се потопите в DRY практики на кодиране, резултатът е по-чист код, по-малко работа и нов красив работен процес, който е толкова оправомощен, колкото е страхотен.
За разлика от другите теми по-горе, които са доста тесни, тази е доста обширна тема, която обхваща всички видове различни практики, техники и идеи. Интересното е, че едно от нещата, които напоследък се фокусирах върху практиките на кодиране на DRY, е използването на CSS препроцесори.
Въпреки че мнозина твърдят, че препроцесорите водят до лоши практики на кодиране, реалността е обратната. Очевидно самите препроцесори помагат да се избегне ръчното повторение, но това надхвърля това. Проучването на резултатите от инструменти като LESS и SASS и целите за езиците като цяло ме накара да пиша по-добър чист CSS! След като овладеете понятия като @extend в Sass, няма как да не мислите за последиците, когато кодирате само CSS.
Ресурси, за да ви стигне до там
DRY CSS: Не повтаряйте CSS
В тази статия Стивън Брадли ви запознава с темата за DRY CSS и обхваща някои от основните й принципи и цели. Той свежда практиката до три прости идеи и ви показва как да реализирате тези идеи в истински работен процес. Концепциите до голяма степен са заимствани от презентация на Джеръми Кларк, обхващаща същата тема.
Въведение в обектно-ориентирания CSS (OOCSS)
Както споменах преди, идеите, присъщи на движението DRY CSS, са доста далечни и пряко свързани с концепции в други конструкции. OOCS е все по-популярна методология, която има за цел да ви помогне да създадете по-бързи, по-ефективни таблици стилове с превъзходна организация и по-малко повторения. В OOCS има два основни принципа: отделяне на структурата от кожата и разделяне на контейнерите и съдържанието. Тази статия от списание Smashing ще ви преведе през основните идеи и ще ви помогне да ги приложите към собствената си работа.
Въведение в SMACSS Насоки за писане на CSS
Спомняте ли си Стивън Брадли от първата статия за DRY CSS? Той също написа това парче, което обяснява проект, който е подобен на, но отделен от OOCS: SMACSS (проект на Джонатан Снук). Както и при OOCSS, SMACSS има две основни цели. Първият е да се увеличи семантичната стойност на раздел от HTML и съдържание, а вторият е да се намали очакването за конкретна HTML структура. Тази статия обяснява подробно и двете цели и предоставя полезни примери за код, за да можете да видите SMACSS в действие.
5. Познайте поддръжката на браузъра си
Петият и последен ключ за подобряването на вашия CSS е да знаете какво работи къде. CSS3 е твърде примамлив за повечето от нас да игнорираме, но твърдата истина е, че цял куп от тях не работи в определени браузъри (под „определени браузъри“, разбира се имам предвид IE).
Голямата тайна, която новаците на уеб разработчиците трябва да влязат в главата им, не е, че трябва да запомнят всяка отделна CSS функция и как всеки браузър, познат на човека, се справя с нея, вместо това, че има на разположение абсолютно невероятни ресурси, които ви дават тази информация свободно, просто трябва да знаеш къде да търсиш.
Ресурси, за да ви стигне до там
Поддръжка на браузъра за нокти в CSS3 и HTML5: безценни ресурси, които да използвате днес
В тази статия ви представям сравнително малкото сайтове, които имам отметки за проверка на поддръжката на браузъра. Тези ресурси са фантастични, визуални и ви дават нужната ви информация веднага, за да можете да се върнете към кодирането. Погледнете, за да видите какви са!
Поддръжка на браузъра за CSS3: Какво е текущото състояние?
Тази статия е написана преди повече от година, така че "текущото състояние" парче е спорно, но не е променено в това време, за да направи информацията в тази статия остаряла. Той служи като невероятно полезен преглед на различни свойства на CSS3, разделен на секции въз основа на това, което работи навсякъде и за какво трябва да внимавате. Ще ви отнеме само няколко минути, за да преминете и си струва да прочетете.
Значението на съвместимостта на крос браузъра: Съвети и ресурси
Ако наистина сте нов за CSS и се нуждаете от основно въведение в темата за съвместимостта на браузъра и защо е важно, тази статия от Noupe ви обхвана. Повече от просто продаване на идеята за съвместимост, тя изброява куп страхотни ресурси, които можете да използвате, за да осигурите максимална съвместимост. Особен интерес представлява списъкът с инструменти, които ще ви помогнат да тествате сайта си в различни браузъри.
Предполагам, че ще прочета всичко това за 24 часа?
Представих ви пет абсолютно критични теми, за които ще се занимавате и не по-малко от петнадесет статии, от които можете да научите принципите, които трябва да знаете. Това е всичко добре и добре, но в заглавието си обещах, че ще се оправите за един ден и не всеки има време да седне и да прочете петнайсет дълги статии!
Добрата новина е, че ви дадох три статии по всяка тема, така че да имате разнообразие, от което да избирате. Обясних подробно съдържанието на всеки от тях, за да можете да изберете това, което най-добре отговаря на вашите нужди. Не забравяйте да изберете статиите за четене не въз основа на това, което знаете, а това, което не знаете. Поставете си цел да попълните пропуските във вашите знания.
Моето предложение е да разгледате съдържанието по-горе и да изберете пет статии за четене (по една от всеки раздел). Дори това е много да се предприеме за един ден, но повечето от тях не са много повече от хиляда думи или много, много са по-малко. Уверен съм, че можете да го издърпате. Ако не можете, няма проблем. Променете целта си да подобрите вашите CSS умения за седмица и четете всеки един от петте си избрани статии всеки ден през следващите пет дни. Гарантирам, че дойде следващата седмица ще бъдете много по-добри в писането на ясен, сбит, съвместим и многократно използван CSS.
Какви други понятия препоръчвате?
Сега, когато прочетохте първите ми пет теми, които хората трябва да обмислят, за да подобрят своите CSS умения, искам да чуя от вас. С кои други теми смятате, че CSS кодерите обикновено се борят и какви ресурси препоръчвате за всеки, който иска да научи повече?
Снимки със снимки, предоставени с любезното съдействие на BigStock
