От автора: как ни странно, многие боятся начинать работу с CSS. Сначала в моей команде было два фронт-энд разработчика. Это был я и старший фронт-энд разработчик. Затем старший фронт-энд разработчик уволился, и я остался единственным фронт-энд разработчиком в команде. И это было хорошо. Я делал свою работу, и все было в порядке.
Мы провели несколько собеседований, но никто нам не подошел. Время шло, а потом меня поразило: я был единственным, кто что-то знал о нашем клиенте. Фактор автобуса был равен одному, что не очень хорошее число в этом случае. Почему? Если меня собьет автобус, проект окажется в плохой ситуации.
Затем я поговорил со своим боссом, и мы пришли к соглашению, что все мы должны отвечать за фронт-энд. Работа может быть выполнена в парном программировании. По крайней мере, пока мы не найдем подходящего кандидата. Я думал, что это отличная идея. Потому что я выдыхался.
Затем мы представили эту идею, и первой реакцией был страх других разработчиков. Страх был в основном связан с CSS.
Почему разработчики боятся CSS?
Я говорил с другими разработчиками о том, почему они боятся CSS. Первое, что упоминалось, это каскад. Что если они внесут изменения в один класс, это повлияет на пятьсот других элементов?
Следующим вопросом была поддержка браузеров. Что если они реализуют что-то, что не поддерживается некоторыми браузерами?
Последним аспектом было создание чего-то с нуля. Что, если они сделают что-то, что будет нестабильно и не будет выглядеть хорошо?
Каскад
Это один из самых больших страхов. Когда другие разработчики говорят об этом, я думаю, что они говорят о многих вещах. Это и важность, и специфичность, и исходный порядок, и то, как свойства наследуются от разных правил. Стиль может быть указан во многих разных местах, и он может взаимодействовать сложным образом. Вот почему CSS такой мощный, но это также и причина, почему он может быть запутанным и сложным. Каскадирование может быть дьявольской вещью, если вы не знаете правил того, как селекторы могут переопределять другие селекторы.
important
Это часто обсуждаемая тема. Все мы знаем, что (в большинстве случаев) плохо использовать этого маленького помощника. Это потому, что !important всегда побеждает.
Специфичность
Специфичность — это мера того, насколько специфичен селектор. Как, встроенный стиль является наиболее специфическим, а затем #id, а затем .class, а затем element. Специфичность может быть измерена миллионами разных способов. Если у вас есть сомнения, вы можете использовать калькулятор специфичности.
Исходный порядок
Исходный порядок заключается в том, что более поздние правила переопределяют более ранние правила. Если вы пишете селектор со свойством и значением, а затем позже пишете тот же селектор с тем же свойством — но с другим значением. Что будет потом?
Наследование
Наследование в CSS является и простым, и сложным. Это можно объяснить следующим образом: некоторые значения свойств, примененные к элементу, будут унаследованы дочерними элементами, а некоторые — нет. Разве это не звучит здорово? Такие свойства CSS, как font-size и color наследуются, а свойства margin и padding не наследуются. Я думаю, что вам придется использовать здравый смысл. Если бы margin наследовались, это вызвало бы огромный беспорядок! Вы можете использовать для справки MDN.
Поддержка браузерами
Если ваш клиент не является компанией, которая поддерживает только Internet Explorer 6, вам не стоит сильно волноваться. Большинство пользователей используют современные браузеры с великолепной поддержкой CSS. Если вы не уверены, стоит ли вам использовать определенное свойство, вы можете проверить его на caniuse. Если браузер не поддерживает это свойство, но вы действительно хотите его использовать, тогда большинство браузеров используют правило CSS @supports с тем же именем. Тогда вы можете создать резервное решение.
@supports (display: grid) { div { display: grid; }
}Создание чего-то с нуля
Это в основном касается общения дизайнеров и разработчиков. Общение не всегда проходит хорошо. Иногда амбиции дизайнеров могут быть слишком высокими относительно бюджета компании и навыков разработчиков — или того, что на самом деле возможно.
Дело в том, что мы, как разработчики, должны быть более интегрированы в процесс проектирования, чтобы мы все могли чувствовать себя комфортно. При этом, если разработчик чувствует себя комфортно с дизайном, то ему будет проще создать что-то с нуля.
Я надеюсь, что это важно. Я просто хочу сказать другим разработчикам, которые ежедневно не работают с CSS, что CSS это не магия. Спасибо за ваше время!
Автор: Steffen Pedersen
Источник: https://dev.to/steffenpedersen
Редакция: Команда webformyself.