От автора: сегодня расскажу, как работают в CSS if и for. Я продолжаю рассматривать CSS, как язык программирования. Вопрос, является ли он таковым или нет, в данный момент очень горячая тема, но мне не очень интересен ответ.
Вместо этого я хотел бы знать, может ли описание определенных структур CSS в терминах программирования помочь вам лучше или быстрее изучать CSS или это мешает. Другими словами, есть ли образовательная ценность в том, чтобы рассматривать CSS как язык программирования? Скажите, пожалуйста, является ли приведенное ниже объяснение полезным или запутанным для вас.
Оператор if
Область, где язык программирования CSS менее развит, чем JavaScript — это управляющие структуры — или так может показаться. Тем не менее, CSS имеет операторы if. Вот несколько примеров:
|
1 2 3 4 5 6 |
@media all and (max-width: 900px) { } @supports (display: flex) { } |
Они означают «если область просмотра макета имеет максимальную ширину 900 пикселей» и «если движок CSS принимает» display: flex. Нет сомнений в том, что это фактические операторы if: блоки кода применяются только в том случае, если удовлетворяется условие. (Кроме того, спецификация для @media и @supports называется Условными правилами CSS. Это просто: at-правила должны использоваться как операторы if.)
Но давайте рассмотрим — если можно так выразиться — более сомнительный пример. Является ли следующее также оператором if?
|
1 2 3 |
menu a { color: red; } |
«Если в меню есть ссылка, выделить ее красным цветом». Несколько человек, у которых я брал интервью для книги, были убеждены в том, что селекторы — это тоже операторы.
Вы согласны? Согласен ли я? Я не уверен, хотя и вижу в этом определенный смысл: можно рассматривать селекторы и так. Согласны ли вы с этим, вероятно, зависит от вашего определения оператора if.
Цикл for
Давайте для рассмотрения циклов немного усложним ситуацию. На первый взгляд может показаться, что в CSS их нет. Тем не менее, как насчет того же кода, который мы видели выше?
|
1 2 3 |
menu a { color: red; } |
В некотором смысле, селектор, подобный приведенному выше, можно считать примитивным циклом for. Браузеру велено перебрать все элементы <a> внутри элемента <menu> и применить к ним красный цвет.
Является ли селектор циклом for? Может ли он быть оператором if и циклом for одновременно? Опять же, это зависит от ваших определений циклов for и операторов if. Я хотел бы отметить, что можно добавить в CSS дополнительную логику для циклов.
|
1 2 3 4 5 6 7 |
menu a:first-child { color: blue; } menu a:not(#current) { color: red; } |
Эти дополнительные селекторы можно рассматривать как операторы внутри цикла for: перебрать все ссылки в меню, но пропустить эту одну и назначить для нее специальный режим.
Декларативный и императивный подходы
Давайте возьмем самое общее представление и скажем, что CSS-селекторы могут рассматриваться как операторы if и как циклы for. Это будет звучать довольно странно для любого, кто имеет опыт работы с JavaScript, поскольку эти два типа управляющих структур просто не одинаковы. Итак, как вы можете заменить оба на одну структуру?
Здесь, я думаю, мы еще раз видим, что CSS является декларативным языком, а не императивным. В декларативных языках некоторые простые управляющие структуры могут быть выражены гораздо более кратко, чем в императивных. Возьмем последний пример кода. В JavaScript мы должны написать что-то вроде:
|
1 2 3 4 5 6 7 8 9 10 |
for (all menus) { for (all links in this menu) { let first = [figure out if this is the first link in the menu] if (first) { link.color = 'blue' } else if (link.id !== 'current') { link.color = 'red'; } } } |
Недостатком версии JavaScript является то, что она более многословна, чем версия CSS, и, следовательно, более подвержена ошибкам. Преимущество ее состоит в том, что она предоставляет более тонкий контроль, чем CSS. В CSS мы почти достигли пределов того, что мы можем выразить. В версию JavaScript мы могли бы добавить гораздо больше логики, если пожелаем.
В CSS мы сообщаем браузеру, как должны выглядеть ссылки. В JavaScript мы описываем алгоритм для определения того, как должна выглядеть отдельная ссылка. Ни то, ни другое не является единственно правильным, но в этом примере способ CSS является более эффективным.
Лично мне комфортно рассматривать CSS-селекторы как операторы и циклы одновременно. Тем не менее, я чувствую, что как только вы начинаете понимать CSS, тот факт, что селекторы представляют собой if / for, становится все менее и менее актуальным. Вместо этого селекторы — просто селекторы: отлично подходят для относительно простых объявлений; меньше для очень сложных.
Полезно это или сбивает с толку?
Если вы джаваскриптер, который желает лучше узнать CSS, я хотел бы услышать, помогают или сбивают вас с толку несколько приведенных выше примеров. Чем больше отзывов я получаю, тем лучше я могу написать книгу, которая поможет вам изучить CSS, а не просто запутает вас. Благодарю за внимание.
Источник: //www.quirksmode.org
Редакция: Команда webformyself.
