Некоторое время назад я написал Как выглядит отладка программы? о том, что делать при отладке (меняйте одну вещь за раз! проверяйте свои предположения!).
Но на прошлой неделе я отлаживал некоторые CSS, и я думаю, что этот пост отсутствует
кое-что важное: ваше отношение .
Теперь — я еще не очень хороший CSS-разработчик. Я никогда не писал CSS
профессионально, и я не понимаю много основных концепций CSS (я думаю,
наконец, впервые понял недавно, как работает позиция: абсолют ). И последнее
неделю я работал над самым сложным проектом CSS, который я когда-либо пытался.
Пока я отлаживал свой CSS, я заметил, что я делаю некоторые плохие вещи, которые я
нормально не будет! Я был:
- внесение случайных изменений в мой код в надежде, что он будет работать
- гуглил много вещей и пробовал их, не понимая, что они сделали
- если что-то сломалось, отменить мои изменения и начать заново
Эта стратегия была настолько эффективной, насколько вы можете себе представить (не очень
эффективно!), и это было из-за моего отношения к CSS! У меня было это
необычное для меня убеждение, что CSS был слишком сложным и невозможным для меня
понять. Итак, давайте немного поговорим об этом отношении!
Содержание статьи
проблема отношения: «это слишком сложно для меня понять»
Одна конкретная проблема, с которой я столкнулся, заключалась в том, что у меня было 2 элемента, сложенных друг на друга, и
Я хотел, чтобы Div A находился поверх Div B. Моя модель порядка укладки CSS на
Начало этого было в основном «если вы хотите, чтобы Thing A был на вершине Thing B,
измените z-index, чтобы он работал ». Таким образом, я изменил z-индекс Div A, чтобы быть 5
или что-то еще.
Но это не сработало! В Firefox div A был сверху, но в Chrome Div B был включен
Вверх. Argh! Зачем? CSS невозможно !!! (если вы хотите увидеть точную фактическую ситуацию, в которой я находился, я воспроизвел здесь вещь, отличную от firefox-and-chrome, после факта )
Я немного погуглил и обнаружил, что возможная причина z-index может не работать
потому что Div A и Div B фактически находились в разных «стековых контекстах». Если
это было правдой, даже если бы я установил z-индекс Div A на 999999, он все равно не
поместите его поверх Div B. (вот небольшой пример того, как выглядит эта проблема z-index, хотя я думаю, что моя конкретная ошибка имела некоторые дополнительные сложности)
Я подумал: «Чувак, эта сложная контекстная вещь кажется действительно сложной, почему это так?
отличается между Firefox и Chrome, я не смогу понять это
из". Так что я попробовал несколько случайных вещей, которые предложила куча постов в блоге,
который, как обычно, не работал.
Наконец, я отказался от этой стратегии «меняй случайные вещи и молись» и подумал: «Ну, что
если я просто прочитаю документацию по порядку размещения, может, это не так уж и плохо ».
Итак, я прочитал страницу MDN о порядке размещения, которая гласит:
Когда свойство z-index не указано ни для одного элемента, элементы располагаются в следующем порядке (снизу вверх):
1. Фон и границы корневого элемента
2. Потомки без позиционирования блоков, в порядке появления в HTML
3. Элементы, расположенные по наследству, в порядке появления в HTML
Это так просто! Это зависит только от порядка в HTML! Я положил Div A после
Div B в HTML (как брат), и он заставил все работать в обоих браузерах.
лучшее отношение: «давайте изучим основы и посмотрим, поможет ли это»
Вся эта проблема со сложением оказалась не такой уж сложной — все, что я
нужно было прочитать очень короткую и простую страницу документации, чтобы понять, как работает стек!
Конечно, компьютерные вещи не всегда такие простые (и даже в этом
в конкретном случае правила о том, что создает новую укладку
Контекст
довольно сложны.) Но мне не нужно было понимать эти более сложные правила, чтобы поставить Div A поверх Div B! Мне нужно было только знать намного более простые 3 правила выше.
Так что — успокойтесь на секунду, изучите несколько основ и посмотрите, поможет ли это.
вдохновляет наблюдение за людьми, которые знают, что они делают,
Другая область CSS, которая, на мой взгляд, была «слишком сложной» для меня, заключалась в следующем
вся должность: абсолютная и позиция: относительная бизнес. Я продолжал видеть
(а иногда и с помощью!) примеров, когда люди делали сложные вещи CSS с
позиция: абсолютная но я не понимаю, как они работали. Разве положение: абсолютное не означает, что элемент всегда находится на одном и том же месте на экране? Почему эти позиции: абсолютные вещи движутся, когда я прокручиваю, как остальная часть документа? (спойлер: нет, позиция : фиксированная .)
Но на прошлой неделе я в паре с кем-то, кто намного лучше, чем я, в некоторых
код, и я увидел, что они просто печатали в позиции : абсолютный и
позиция: относительный уверенно в своем коде, не смущаясь
Это!! Это может быть я?
Я просмотрел документацию по MDN о позиции : абсолют и там было сказано:
Элемент удален из обычного потока документов, и пространство не создано
для элемента в макете страницы. Он расположен относительно ближайшего
позиционный предок … Его окончательное положение определяется значениями сверху, справа, снизу и слева.
Итак, вещи с позицией : абсолютные расположены относительно их ближайших
позиционируемый предок! И вы просто используете top / bottom / right / left чтобы выбрать где!
Это так просто!
документация, которой вы можете доверять, имеет большое значение
Я думаю, что еще одним большим источником моего разочарования в CSS является то, что у меня не было
лучшее понимание того, где найти точную информацию и советы. Я знал, что MDN был надежным
справка, но MDN на самом деле не помогает ответить на такие вопросы, как «хорошо, но серьезно
как мне центрировать div ??? » и я обнаружил, что читаю много случайного переполнения стека
ответы / сообщения в блоге, в которых я не был уверен на 100%, были правильными.
На этой неделе я узнал о хитростях CSS, в которых много
БОЛЬШИХ статей, таких как Центрирование в CSS: Полное руководство, которое выглядит очень уважаемым и написано
в супер ясном виде.
вот и все!
Я действительно не знаю, почему я начал верить, что это «невозможно»
понять основные концепции CSS, так как я не верю, что о компьютерах в
Генеральная. Возможно, потому что я писал CSS на начальном уровне для очень
долгое время, но никогда не пытался сделать более сложный проект CSS, чем
«Давайте устроим несколько div в сетке с flexbox»!
Но это отношение помешало мне написать CSS, который я хотел
записывать! И как только я отпустил это и использовал мои обычные методы отладки, я был
в состоянии заставить намного больше работать так, как я хотел.
Загрузка...
