Сломайте клеймо CSS
Проблемы CSS как веб-разработчика
Не бойтесь CSS
Каскадные таблицы стилей (CSS) — это язык для превращения веб-страницы из ночного кошмара дизайнера во что-то эстетически приятное. Это помогло создать яркую и удобную сеть, которую мы знаем и используем каждый день. Как веб-разработчик, я пишу много CSS, а также JavaScript и HTML. Это основные технологии Интернета и основы веб-разработчика. Мне нравится CSS, он не идеален, но я стал в нем компетентным, и всем легко им заниматься. Не все веб-разработчики изучают CSS. Многие считают, что им это не нужно. У CSS есть клеймо по двум причинам. Во-первых, это сложность изучения и эффективного использования CSS. Прочтите Почему разработчики избегают CSS, чтобы понять, почему вторая проблема является системной: разработчики не всегда уважают дизайн. CSS — не все любимый язык, но он так же неизбежен, как JavaScript для веб-разработчиков.
Основная концепция CSS заключается в выборе элементов HTML и применении к ним стиля. Хотя начать легко, это может стать более сложным с большими командами или старыми браузерами. Если вы программист и привыкли к большей гибкости, то CSS покажется вам очень ограниченной песочницей. Глядя на некоторые камни преткновения, мы можем преодолеть их и освоиться с CSS.
Перегруженная терминология
CSS может быть пугающим, если вы не знакомы с основными понятиями, но это не так сложно (в большинстве случаев). Если вы программист, первая проблема — понять перегруженную терминологию. Класс и идентификатор в CSS означают не то же самое, что и в JavaScript.
«Я использовал идентификатор, чтобы не сломать сайт»
Класс CSS — это селектор, который стилизует все с помощью этого класса. Дайте HTML атрибут класса, и вы сможете выбрать этот класс, чтобы применить правила, определяющие стиль элемента. Элемент может иметь несколько классов, которые будут объединять наборы правил и охватывать больше отдельных случаев. Это самый гибкий и прямой метод стилизации элементов, ваши элементы напрямую связаны с вашими правилами, определенными в CSS.
Распространенные ошибки
Распространенной ошибкой, которую я вижу у разработчиков при стилизации элементов, является присвоение элементу атрибута id для стилизации одного элемента.
Селектор id выполняет свою работу, вы выбрали и стилизовали определенный элемент, но это не масштабируемый подход. Проблема в том, что вы обходите основной принцип CSS, каскадную часть. Вы можете стилизовать только один элемент таким образом, вы не получаете удовольствия от повторного использования кода. Если вы хотите иметь несколько элементов с общим набором правил, то необходимо добавить уникальный id к каждому элементу и набору правил.
Специфичность селектора
Специфика проста в изучении, но из-за каскадной природы CSS может стать трудно управлять. Наследуемые свойства — мощная, но часто недооцениваемая функция, из-за которой у разработчиков возникают проблемы.
«Единственный способ — использовать !important, все должно быть в порядке».
Идея проста: примените набор правил к родительскому элементу HTML, и дочерний элемент унаследует некоторые из этих свойств для стиля. Элемент выбирается на основе его родительских элементов. Дочерние элементы наследуют свойства, чтобы избежать повторного определения каждого свойства.
Распространенные ошибки
Я вижу, что разработчики сталкиваются с двумя проблемами специфичности. Обратите внимание, что я сказал некоторые, говоря о свойствах, которые дочерний элемент унаследует от своего родительского элемента. Не все свойства наследуются, и что, если вы не хотите наследовать свойство?
Одна ключевая вещь, которую нужно изучить в CSS, — это то, что наследуется. Хотя это не всегда очевидно, но важно научиться понимать, где добавлять свойства и как это заметно влияет на элементы.
Пример унаследованного свойства: color. Родительский элемент с color: red; будет означать, что все дочерние элементы будут наследовать свойство цвета как красный, если только оно не переопределено более конкретным правилом.
Свойство, которое не наследуется, — это background-color. Все дочерние элементы родителя с этим набором свойств по-прежнему будут иметь прозрачный фон по умолчанию. Чтобы унаследовать свойство background-color родителя, создайте новое правило background-color: inherit;.
Еще одна ошибка, которую совершают неопытные веб-разработчики, — это чрезмерное использование !important. Это ключевое слово предназначено для использования в тяжелых ситуациях и почти всегда является полным взломом. Проблема часто решается с помощью CSS и выбора элемента другими способами. Специфичность — это навык, который развивается со временем, когда вы знаете, что специфичность следует следующему шаблону:
Тип › Класс › Идентификатор
Увеличение специфичности слева направо
Рассуждения о CSS становятся намного проще, когда вы знаете, как работает специфичность. Со временем вы узнаете, как лучше всего выбирать элементы HTML. Будет намного проще избежать использования хаков для принудительного применения свойства к элементу с !important.
Ограничения
Что касается языков, CSS имеет много ограничений. Он разработан с единственной целью — настроить представление HTML. Его направленность достойна восхищения, но эти ограничения могут показаться обременительными по сравнению с другими языками. Ограничения упрощают анализ CSS как для дизайнеров, так и для разработчиков, но могут затруднить разработку.
«CSS — это не настоящий язык программирования»
Есть общие функции, которых нет в CSS, что сбивает с толку новых разработчиков, изучающих CSS. Больше всего нареканий вызывает отсутствие переменных, ограниченные возможности повторного использования кода и отсутствие расширенных селекторов. Это может показаться большой проблемой, но это можно преодолеть. Ключ в том, чтобы понять симбиотические отношения между CSS, HTML и JavaScript, чтобы наверстать упущенное.
Общие ловушки
Жалобы, которые я слышу от разработчиков, обычно звучат так.
"Я не могу сделать это похожим на дизайн, потому что не могу выбрать этот элемент!"
Если вы не можете выбрать элемент, спросите себя, почему? Если это не очевидно, то, возможно, вам стоит подумать об изменении HTML. Позиционирование элементов в CSS не всегда интуитивно понятно или просто. Если вы не можете сделать то, что вам нужно, с одним элементом, обратите внимание на скромный тег <div>. Часто бывает необходимо группировать элементы с помощью тегов <div> для стилизации. Не бойтесь изменять структуру вашего HTML, чтобы упростить его стилизацию.
"Я хочу использовать один и тот же цвет для всех этих элементов, но не могу использовать переменные!"
В CSS нет переменных, потому что CSS предпочитает делиться свойствами через наследование. Это не так гибко, но во многих распространенных случаях предпочтительнее создать класс с заданным стилем и добавить этот класс ко всем необходимым элементам. Альтернативой является наследование свойства от родительских элементов. Ключ в том, чтобы принять ограничения CSS и изменить свой образ мышления.
"Как заставить эту кнопку делать X в CSS?"
Некоторые вещи в CSS просто не интуитивны или невозможны. С помощью CSS можно многое сделать, но иногда требуется помощь. Распространенным случаем является изменение внешнего вида кнопки в зависимости от различных состояний. В основном это делает CSS, но наиболее интуитивный и гибкий способ — использовать JavaScript. Вы можете управлять состоянием кнопки в JavaScript и обновлять класс в зависимости от состояния. Таким образом, вы даете CSS возможность делать то, что у него получается лучше всего, и соответствующим образом стилизовать элемент на основе класса.
Жизненно важно принять ограничения CSS, но знать его ограничения. Иногда необходимо дополнить CSS одной из других основных веб-технологий. Каждая технология имеет фокус, и лучше использовать ее сильные стороны, чтобы не плыть против течения.
Вывод
CSS вызывает много критики со стороны разработчиков, но в настоящее время он никуда не денется. Это неотъемлемая часть Интернета, необходимая для того, чтобы вдохнуть жизнь в веб-страницы и веб-приложения. Хотя это не всегда легко эффективно использовать, важно учиться и совершенствоваться. Худшая ошибка веб-разработчика — думать, что CSS не важен и на него не стоит тратить время. У CSS есть свои недостатки, но с ним не следует бороться. Найдите время, чтобы:
- Выясните, как лучше всего использовать CSS с HTML, чтобы получить наилучшие впечатления.
- Изучите все тонкости селекторов и специфики и избегайте распространенных ошибок, таких как добавление
!important, когда это не нужно. - Примите ограничения CSS и осознайте ограничения. Вместо этого делегируйте неподходящие задачи HTML или JavaScript.
Не нужно бояться CSS. Запачкайте руки и изучите CSS прямо сейчас, чтобы не бояться, что в следующий раз дизайнер захочет внести небольшие изменения.
Дополнительные мысли о CSS:
