Рад са каскадним стиловима (ЦСС) може бити тежак за почетнике. Користећи ЦСС, можете структурирати, ажурирати и одржавати изглед ваше апликације. Али језик захтева вештине да се манипулише ХТМЛ страницама да би се добио жељени изглед.
Ево неколико грешака које треба избегавати када радите са ЦСС-ом. Они ће вам уштедети време и олакшати процес развоја.
1. Коришћење пк за величине фонта
Јединица "пк" представља пикселе. Можете га користити да изразите различите дужине на веб страници, од ширине и висине елемента до величине фонта.
Међутим, пк закључава ваш дизајн на фиксну величину за све екране. Слика у пк може заузети пуну ширину једног екрана, а само мали део другог. Ако желите пропорционалнији елемент, користите релативна мерења као што су рем, или проценти (%).
Најбоље релативно мерење за употребу је рем. Ова јединица се односи на величину фонта основног елемента коју читач често може да подеси у подешавањима претраживача. Можете видети утицај пк и рем на елемент у следећем примеру:
хтмл>
<ХТМЛ>
<глава>глава>
<тело>
<х1>Ово је наслов 1х1>
<х2>Ово је наслов 2х2>
<стр>Ово је параграф.стр>
<стр>Ово је други параграф.стр>
тело>
хтмл>Можете да стилизујете величине фонта у овом документу користећи пк јединице са следећим ЦСС-ом:
х1 {
фонт-сизе: 50пк;
}х2 {
фонт-сизе: 30пк;
}
стр {
фонт-сизе: 15пк;
}
Добијена страница изгледа прихватљиво када је гледате на великом екрану:
Али не изгледа представљиво на мањем екрану, као на телефону:
Затим примените рем на исти садржај. Наведите основну величину фонта на хтмл елементу и величину осталих елемената користећи ремс, као што је илустровано испод:
хтмл {
фонт-сизе: 16пк;
}х1 {
фонт-сизе: 3рем;
}х2 {
фонт-сизе: 2рем;
}
стр {
фонт-сизе: 1рем;
}
Обратите пажњу на разлику између великог и малог екрана. Са рем-ом, садржај се боље скалира без обзира на величину екрана. Елементи никада неће премашити постављену величину екрана. Зато је боље користити релативне дужине него пикселе.
На екрану десктопа:
На малом екрану, текст у рем јединицама је и даље читљив:
2. Стављање свих стилова у једну датотеку
Коришћење једне ЦСС датотеке за велики пројекат може створити неред. Имаћете датотеку са дугим редовима кода који ће бити збуњујући приликом ажурирања. Покушајте да користите различите датотеке за ЦСС стилове за различите компоненте.
На пример, можете имати различите датотеке за навигацију, заглавље и подножје. И још један за делове на телу. Раздвајање ваших ЦСС датотека помаже у структурирању ваше апликације и подстиче употребљивост кода.
3. Неприкладно коришћење Инлине ЦСС-а
У ванилла ЦСС-у можете писати стилове на ХТМЛ страницама као на ЦСС оквири као што су Боотстрап и ТаилвиндЦСС. Инлине ЦСС вам омогућава да примените јединствени стил на ХТМЛ елемент. Користи стилски атрибут ХТМЛ елемента.
Следећи код је пример уграђеног ЦСС-а.
<х2стил="боја: зелена;">Ово је зелени насловх2>
<стрстил="боја црвена;">Ово је црвени параграф.стр>
Текст ће изгледати овако:
Међутим, ХТМЛ са само уграђеним ЦСС-ом може бити неуредан. Пошто не постоји друга локација за ЦСС, сви ЦСС постоје у истој датотеци као и ХТМЛ. Изгледаће препуно. Уређивање такве датотеке је тешко, посебно ако то није ваш код.
Такође, са уграђеним ЦСС-ом, морате написати код за сваки елемент. Ово повећава понављање и смањује поновну употребу кода. Увек користите комбинацију екстерних стилова и уграђеног ЦСС-а да бисте стилизовали своје веб странице.
4. Претерано коришћење !важно
У ЦСС-у, !важно правило додаје већи значај својству/вредности. Он надјачава друга стилска правила за то својство на том елементу.
Требало би да имате само неколико !важно правила у вашем коду. Користите га само када је потребно. Нема смисла писати код, а затим га заменити. Ваш код ће изгледати неуредно и узроковати проблеме када се покрене на неким уређајима.
хтмл>
<хтмл>
<глава>глава>
<тело>
<стр> Ја сам наранџаста стр>
<стркласа="мој разред"> ја сам зелена стр>
<стрид="мој ИД"> Ја сам плава. стр>
тело>
хтмл>ЦСС:
#мој ИД {
боја позадине: Плави;
}.мој разред {
боја позадине: зелен;
}
стр {
боја позадине: наранџаста !важно;
}
Резултат је овако:
5. Непоштовање конвенција о именовању
ЦСС има конвенције о именовању које воде програмере како да напишу стандардни код. Ово је неопходно ако завршите отклањање грешака у ЦСС датотеци на будући датум.
Један од ових стандарда укључује коришћење цртица за раздвајање груписаних речи. Други је именовање селектора према ономе што ради. Тако да свако ко то гледа неће морати да погађа. Такође олакшава читање, одржавање и дељење кода. На пример:
Уместо тога:
.имаге1 { маргин-лево: 3%; }Напишите то овако:
.дечак-слика { маргин-лево: 3%; }Када погледате таблицу стилова, знаћете тачно за коју слику је код. Гоогле-ов водич за ХТМЛ/ЦСС стилове наводи много више конвенција које сваки програмер треба да зна.
Писање коментара је најпотцењенија вештина у програмирању. Многи људи забораве да напишу коментаре да објасне свој код. Али штеди време. Коментари су неопходни за читање и одржавање кода.
Пошто је ЦСС лабаво структуриран и свако може да развије сопствене конвенције, коментари су од виталног значаја. Коришћење добро структурираних коментара за објашњење вашег стилског листа је добра пракса. Можете писати коментаре објашњавајући делове кода и шта они раде.
/* видео елементима је потребан простор за дисање */
.видео {
маргин-топ: 2ем;
}
/* стилизовање одељка хероја */
.поздрав {
маргин-топ: 1ем;
}
7. Неуспешно дизајнирање унапред
Многи људи то раде, али је тешка грешка започети кодирање без плана. ЦСС одређује како изгледа структура вашег фронт-енд-а. Дизајн говори много о вашим вештинама програмирања.
Дизајн вашег сајта појашњава вашу визију и ресурсе који су потребни да вас тамо доведу. Имајте менталну слику свог пројекта. Затим га дизајнирајте на папиру или користите комплет алата за дизајн као што је Цанва да визуализујете оно што желите.
Када имате потпуну слику пројекта, саставите све своје ресурсе и почните са кодирањем. То ће вам уштедети време и вишак.
Зашто бисте требали размотрити ове препоруке
Ако развијате апликације на вебу, користићете ЦСС. Добар рад са ЦСС-ом захтева праксу и поштовање стандардних конвенција. Конвенције не само да чине ваш код читљивим већ и одржаваним.
Писање стандардизованог кода ће вам уштедети време и труд. Време које бисте потрошили на форматирање фронт-енда можете потрошити на сложеније функције. Такође осигурава да можете поново користити код и делити га са другима. Напишите бољи код пратећи постављене конвенције и постаните бољи програмер.
