Научете това странно? Трик за отстраняване на грешки в CSS

Дизайнерите го МРАЗЯТ! ?

Научете това странно? Трик за отстраняване на грешки в CSS

* Не кликбайт *

Преди да стигна до статията, просто искам да споделя, че изграждам продукт и бих искал да събера някои данни за това как да обслужваме по-добре уеб разработчиците. Създадох кратък въпросник, който да проверя преди или след четенето на тази статия. Моля, проверете го - благодаря! И сега, обратно към нашето редовно планирано програмиране.

Здравей! ? Аз съм Зайдек! Когато за пръв път тръгнах да се уча как да правя уеб сайтове, беше много по-болезнено от очакваното. В края на краищата, аз съм опитен графичен дизайнер и програмист - как е възможно да бъдат сайтове т шапка трудно?

В тази статия описвам подробно решенията, които ме накараха да създам CSS дебъгер.

Също така преподавах безплатен HTML / CSS курс по Scrimba, където преподавам как да създадете красив блог от * нулата *. Щракнете тук, за да се регистрирате! ?

Scrimba.com е интерактивна предна платформа, където уебсайтовете се записват като събития - не като видео - и могат да се редактират! ?

Какво е дебъгер?

Има страхотен цитат на Доналд Кнут за отстраняване на грешки. Перифразирайки, става дума за нещо подобно.

Някой: „Кой е най-добрият език за програмиране?“ Доналд Кнут: „Кой има най-добрия дебъгер?“

Не дойдох да оценя тази идея до CSS. Езиците за програмиране имат тази разумност за тях, когато логиката надхвърля мнението. Но CSS е различен, защото CSS „се чувства“ мнителен.

И така, какво можем да направим? Е, можем да послушаме добрите съвети на Доналд Кнут и да използваме дебъгер!

Когато езикът за програмиране е инструмент, дебъгерът е инструмент, който можем да използваме, за да разберем нашия инструмент - нашия код. Не всички comp-sci хора харесват дебъгърите и аз разбирам това.

Не карайте компютъра да прави това, което не разбираме. Мисля, че има заслуга в това, но това, за което говоря тук, е разкриването на структура, където иначе е била невидима.

Вземете следното:

Какво можем да направим, за да видим структурата на нашия уебсайт? Ето две решения, които познавам: можем да създадем еднократни CSS правила, за да подчертаем даден елемент, или да използваме инструментите за отстраняване на грешки на Chrome, Firefox или Safari. Но това все още е малко или много еднократно решение. Това, от което се нуждаем, е общо решение.

Нашият дебъгер

Не много отдавна проектирах този хедър и той не беше прост. Целта беше да се наведе изображение върху многоредов текст. Трябва да е просто, нали?

Ами CSS е антагонистът? тук. Това, което иначе би било просто в Photoshop, може да бъде пътуването на герой в CSS и това ме накара да експериментирам с outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Нищо прекалено специално - само нежно-бели линии. Това, което е нужно, обаче, е правило, което се прилага за всички елементи, толкова дълго, колкото ние използваме *, а не името на id, classили element.

И все пак въвеждането на * { … }беше дълбоко за мен. Помислих си: „Къде не бих искал това?“ Затова добавих още няколко реда и разработих по-официален дебъгер:

* { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Много подобрено! Тук създадохме схематично усещане за нашия уебсайт. Бях внимателен, за да не използвам плътни цветове, а вместо това избрах меки цветове или цветове с алфа канал, така че вложените елементи да изглеждат по-дълбоки в цвят, с по-сини сини и бели бели. Добавих и !importantзаради скандалните CSS Specificity Wars.

Това, което понякога може да се почувства като CSS прецакване при нас, е как и кога се прилага каскадата. Тоест, „Как става така, че понякога се прилагат стилове, а понякога не?“

Това не е CSS на Schrodinger, това е проста математика. CSS използва прост калкулатор, за да определи кои правила са по-специфични, а резултатът определя дали CSS се прилага или не.

Майката на всяка специфика е !important, която заменя всички вградени, идентификатори, класове и правила за елементи. Това е като Звездата на смъртта в сравнение с Империята. Въпреки факта, че употребата на не !importantсе препоръчва като цяло, той е идеален за отстраняване на грешки - защото няма да изпращаме уебсайта си с включен. Вместо това използваме дебъгера само при проектирането и разработването на нашия уебсайт.

Колкото повече използвах дебъгъра, толкова повече осъзнавах, че използването *:not(path):noth(g)като селектор е предпочитано. По този начин не бих получил странични редове от векторна графика. Също така забелязах, че деактивирането box-shadowе по-чисто, тъй като дебъгерът не се нуждае от усещане за дълбочина.

И така, ето последният дебъгер:

*:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
 box-shadow: none !important;}

Мисля, че ние хората мразим това, което не разбираме. И CSS не е изключение. Погрешно е характеризирано, защото е неразбрано. Предлагам: помислете за CSS като нож с две остриета. Може да се използва както за конструиране, така и за деконструиране на уебсайтове . Да, CSS не е Photoshop, но това не означава, че не може да прави неща, които Photoshop не може. Създаването на наш собствен дебъгер е едно нещо, което можем да направим.

Как да използвам този дебъгер?

  1. Отидете на zaydek.github.io/debug.css
  2. Bookmark “Debug CSS” (source code here)
  3. Click the bookmark to toggle it *on* and *off* ?

Don’t forget the free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?