Дізнайся це одне дивне? Хитрість для налагодження CSS

Дизайнери ненавидять його! ?

Дізнайся це одне дивне? Хитрість для налагодження CSS

* Не наживка *

Перш ніж перейти до статті, я просто хочу поділитися тим, що будую продукт, і я хотів би зібрати деякі дані про те, як краще обслуговувати веб-розробників. Я створив коротку анкету для перевірки до або після прочитання цієї статті. Будь ласка, перевірте це - спасибі! А тепер повернімось до нашого регулярного програмованого планування.

Привіт! ? Я Зайдек! Коли я вперше вирішив навчитися створювати веб-сайти, це було набагато болючіше, ніж передбачалося. В кінці кінців, я досвідчений дизайнер графічний і програміст - як можуть бути сайти т капелюхи важко?

У цій статті я детально описую рішення, які призвели до створення налагоджувача CSS.

Я також викладав безкоштовний курс HTML / CSS на Scrimba, де викладаю, як створювати прекрасний блог з нуля *. Натисніть тут, щоб зареєструватися! ?

Scrimba.com - це інтерактивна інтерфейсна платформа, де веб-сайти записуються як події, а не як відео - і їх можна редагувати! ?

Що таке налагоджувач?

Існує чудова цитата Дональда Ннута про налагодження. Перефразовуючи, це звучить приблизно так.

Хтось: «Яка найкраща мова програмування?» Дональд Кнут: «Яка з них має найкращий налагоджувач?»

Я оцінив цю ідею лише до CSS. Мови програмування мають таку розумність щодо них, де логіка перевершує думку. Але CSS відрізняється від того, що CSS "відчуває себе" самовпевненим.

То що ми можемо зробити? Що ж, ми можемо послухати слушних порад Дональда Кнута і скористатися налагоджувачем!

Там, де мова програмування є інструментом, налагоджувач - це інструмент, який ми можемо використовувати для розуміння нашого інструменту - нашого коду. Не всі комп’ютери люблять налагоджувачі, і я це розумію.

Не змушуйте комп’ютер робити те, що ми не розуміємо. Я думаю, що в цьому є заслуга, але те, про що я тут кажу, - це виявлення структури, де вона в іншому випадку була невидимою.

Візьміть наступне:

Що ми можемо зробити, щоб побачити структуру нашого веб-сайту? Ось два рішення, які мені відомі: ми можемо створити одноразові правила CSS, щоб підкреслити елемент, або ми можемо використовувати Chrome, Firefox або Safari's Debugger Tools. Але це все - таки більш-менш одноразове рішення. Нам потрібне загальне рішення.

Наш налагоджувач

Нещодавно я розробляв цей заголовок, і це було не просто. Метою було навести зображення на багаторядковий текст. Має бути просто, правда?

Ну 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 Шредінгера, це проста математика. 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! ?