Водич за писање бољег ЦСС-а

Писање бољег ЦСС-а не мора бити мукотрпно искушење. Неколико мањих прилагођавања вашег рада у вашој ЦСС датотеци кода могу имати велики утицај. У овом чланку ћемо погледати осам једноставних начина на које можете побољшати своје ЦСС вештине и написати чистији, ефикаснији и бољи ЦСС код.

01. Почните са ресетовањем ЦСС-а

ЦСС Ресетовање вам даје чисту основу за рад



ЦСС Ресетовање вам даје чисту основу за рад

Неки могу тврдити да коришћење а ЦСС Ресетовање је непотребно. Међутим, ЦСС Ресетовање вам омогућава да започнете са чистом подлогом, олакшавајући обликовање веб странице, са све предвидљивијим исходима.



ЦСС Ресетовање ресетује или замењује подразумеване стилове прегледача. Можете да напишете своје, да користите једну од многих ресетова доступних на мрежи или да користите комбинацију ове две.

02. Знајте када треба користити ЦСС скраћеницу

Стенографија би требало да смањи величину датотеке и помогне убрзавању времена учитавања



Стенографија би требало да смањи величину датотеке и помогне убрзавању времена учитавања

ЦСС скраћеница вам омогућава да поставите више својстава елемента у једном реду. Коришћење стенографије штеди простор и потребно је мање времена за учитавање. Међутим, не бисте га требали користити за све.

Понекад лонгханд пружа толико потребну јасноћу. Али што је још важније, када треба да подесите само једно или два својства - или једноставно морате нешто да заобиђете - дугорочно може заправо бити боље.

Треба запамтити још нешто: када користите стенографију, занемарена својства ће се ресетовати, што може имати нежељени ефекат.



најбоље понуде за црни петак преносиви рачунари 2015

03. Нека буде СУХО

Дон

Не понављај се

Сасвим вероватно најбољи савет за писање бољег ЦСС кода је следити методологију ДРИ. ДРИ значи „не понављај се“ - у суштини, немојте стално користити исте комаде кода.

Један од начина да се ствари СУХЕ у ЦСС-у је груписање ствари. Погледајмо пример.

Оригинални ЦСС

.menu li { color: red; } .menu li a { color: red; }

Рефакторирано и СУВО

.main li, .main li a { color: red; }

Као што видите, ово не само да ће смањити укупну величину ваше ЦСС датотеке - што ствара брже време учитавања - већ ћете имати користи и у области одржавања. Ако је боја имовину треба ажурирати, ажурирате је само за једно место.

Такође можете да користите ЦСС прилагођена својства да бисте остали суви. Прилагођена својства се креирају овако:

:root { --primary-color: red; }

А затим се може користити било где у вашем ЦСС коду, онолико често колико желите:

.main li, .main li a { color: var(--primary-color); }

04. Престаните са прекомерном употребом! Важно

Врло је мало прилика у којима требате да користите ! важно . То је једна од најчешће - ако не и највише - погрешно схваћених и превише коришћених декларација.

Немојте ме погрешно схватити, ! важно има своје место, али генерално га веб програмери користе у очају када ствари не изгледају добро. Да би поправили ствари, свом правилу дају мало већу тежину додавањем ! важно изјава за то.

Проблем је у томе што ово почиње да ствара домино ефекат који се брзо претвара у ноћну мору за одржавање, јер се све више и више ствари проглашава ! важно . Само користите ! важно када је то апсолутно неопходно.

05. Будите доследни

Без обзира на то како пишете ЦСС и којим редоследом додајете својства, нека буде доследан. Неки људи уређују своја својства по абецеди, док други користе логичнији приступ - на пример, организовање ствари према дужини или типу реда. Одлучујем се за прво, али у потпуности зависи од вас. Суштина је шта год да одаберете, држите се тога, па ћете касније лако пронаћи ствари.

06. Интелигентно именујте ствари

Користите стандардну конвенцију именовања за ваше бираче

Користите стандардну конвенцију именовања за ваше бираче

Ово се чини нимало паметно, али када именујете селекторе, немојте се превише закомпликовати. Будите језгровити и придржавајте се стандардне конвенције именовања.

разлика између рачунара за игре и радне станице

Неке ствари које бисте требали узети у обзир приликом доношења имена селектора:

  • Избегавајте презентацијске речи: То су они који укључују боју и локацију приказа (на пример, зелено-текст или горња трака менија )
  • Користите само мала слова: ЦСС разликује велика и мала слова, зато немојте стварати имена попут, Мени бар . Треба напоменути, међутим, да је случај камила ( Мени бар ) је прихватљива пракса, али у неким случајевима није пожељна
  • Одвојите више речи помоћу цртице: На пример, главни мени . Можете користити и футролу од камила ( главни мени ), али опет, ово често није пожељно
  • Не будите превише прецизни: На крају ћете користити више селектора за исти тип елемента. На пример, листа-један и листа-два могу се комбиновати, стварајући један ставке на листи

07. Додајте коментаре по потреби

Иако је тачно да добром коду нису потребни коментари, истина је и да је додавање коментара у код неопходно. Основно правило овде је да, ако изворни код има користи од коментара, додајте га; у супротном немој.

Ако се питате када би коментари могли бити потребни, ево неколико примера:

  • Коментарисани код: Ако из одређеног разлога коментаришете одређени део кода, оставите коментар који објашњава тај разлог. Ако то не учините, можда се нећете сетити зашто сте то уопште коментарисали
  • Хитни поправци: Ако додате „хитну исправку“, можда би било добро додати коментар који то објашњава
  • Подсетници: Вероватно у датом тренутку радите на више пројеката. Ако вам скрене пажњу пре него што будете имали прилику да нешто довршите, коментаре можете користити као подсетник за оно што вам још преостаје да урадите
  • Објашњења: Ако је одељак кода нејасан и сматрате да би објашњење помогло да се то рашчисти, додајте коментар - то је тако једноставно

08. Истражите Флекбок

Флекбок је најновија промена игара у веб дизајну

Флекбок је најновија промена игара у веб дизајну

Када је реч о поравнавању елемената на страници, модул Флексибилни распоред оквира (или Флекбок) пружа вам потпуну контролу. Користећи флек контејнере и флек предмете можете прецизно да дефинишете како ствари изгледају. Флекбок вам такође омогућава да ставите предмете вертикално на страницу, што није било могуће са пловцима.

Мало је зезнути око главе, али то вреди. Почните читајући наш Водич веб дизајнера за Флекбок .

Опширније: