Зашто једноставна зареза поједностављује кодирање
ЦСС, или Цасцадинг Стиле Схеетс, су прихватљиви начин индустрије веб дизајна да додате визуелне стилове на сајт. Са ЦСС-ом, можете контролисати изглед странице, боје, типографију , слику позадине и још много тога. У суштини, ако је то визуелни стил, онда је ЦСС начин на који ће те стилове довести на вашу веб страницу.
Док додате ЦСС стилове у документ, можда ћете приметити да документ почиње да траје дуже и дуже. Чак и мали сајт са само неколико страница може завршити са великом ЦСС датотеком - а врло велико веб странице са пуно и пуно страница јединственог садржаја могу имати врло велике ЦСС датотеке. Ово је уједначено од стране одговарајућих сајтова који имају пуно медијских упита укључених у табеле стилова како би променили начин приказа визуелних страница и странице поставили на различите екране.
Да, ЦСС датотеке могу бити дуготрајне. Ово није велики проблем када су у питању перформансе сајта и брзина преноса, јер ће чак и дуга ЦСС датотека вероватно бити прилично мала (пошто је стварно само текстуални документ). Ипак, свако мало се рачуна када се ради о брзини странице, тако да ако можете направити свој стилски стил, то је добра идеја. Овдје "кома" може доћи врло згодним у вашем листу стилова!
Цоммас и ЦСС
Можда сте се питали која улога игра запона у ЦСС селекторски синтакси. Као у реченицама, зарези доносе јасност - а не код - сепараторе. Зарезе у ЦСС селектору одвајају више селектора унутар истих стилова.
На пример, погледајте неколико ЦСС-а испод.
тх {цолор: ред; }
тд {цолор: ред; }
п.ред {цолор: ред; }
див # фирстред {цолор: ред; }
Са овом синтаксом говорите да желите ознаке, тд ознаке, ознаке пасуса са црвеном класом, а див таг са ИД-ом прво да сви имају црвени стил.
Ово је савршено прихватљив ЦСС, али постоје два значајна недостатака у писању на овај начин:
- У будућности, ако одлучите да промените боју фонта ових особина у плаво, потребно је да извршите ту промену четири пута у свом листу стилова.
- Додаје много додатних знакова у свој стилни лист који вам није потребан. Ови 4 стилова можда неће изгледати као оверкилл, али ако наставите са радом преко читавог стила, линије ће се сабирати и тај лист ће бити много већи него што је потребно.
Да бисмо избегли ове недостатке и да усмјеримо вашу ЦСС датотеку, покушаћемо да користимо записе.
Коришћење комада за одвојене селекторе
Уместо писања 4 одвојених ЦСС селектора и 4 правила, можете комбиновати све ове стилове у једну особину правила тако што ћете појединачне селекторе раздвојити са зарезом. Ево како би то било учињено:
тх, тд, п.ред, див # фирстред {цолор: ред; }
Знак за зарезом у основи делује као реч "и" унутар селектора. Дакле ово се односи на т х тагове и тд ознаке и ознаке пасуса са црвеном класом и ознаком див са ИД прво. То је управо оно што смо имали раније, али умјесто да имамо 4 ЦСС правила, имамо једно правило са више селектора. То је оно што запета ради у селектору, омогућава нам да имамо више селектора у једном правилу.
Не само да овај приступ чини чистијим, чистијим ЦСС датотекама, већ и олакшава будуће исправке. Сада, ако желите да промените боју са црвене на плаву, морате променити само једну локацију уместо преко првобитних 4 правила стила која смо имали! Размислите о овим уштедама времена кроз читаву ЦСС датотеку и можете видети како ће ово уштедети и време и простор у дугом руну!
Варијација синтаксе
Неки људи бирају да ЦСС постане читљивији тако што одвајају сваки селектор на својој линији, умјесто да пишу све на једној линији као горе. Тако би се то учинило:
тх,
тд,
п.ред,
див # први
{
боја црвена;
}
Имајте на уму да ставите зарезе након сваког селектора и онда користите "ентер" да бисте прекинули следећи селектор на своју линију. НЕМОЈТЕ додати зарезе након финалног селектора.
Користећи записе између ваших селектора, креирате компактнији стилски стил који је лакше ажурирати у будућности и то је лакше за читање данас!
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 5/8/17