Операторы if и циклы for в CSS

Операторы if и циклы for в CSS

От автора: сегодня расскажу, как работают в CSS if и for. Я продолжаю рассматривать CSS, как язык программирования. Вопрос, является ли он таковым или нет, в данный момент очень горячая тема, но мне не очень интересен ответ.

Вместо этого я хотел бы знать, может ли описание определенных структур CSS в терминах программирования помочь вам лучше или быстрее изучать CSS или это мешает. Другими словами, есть ли образовательная ценность в том, чтобы рассматривать CSS как язык программирования? Скажите, пожалуйста, является ли приведенное ниже объяснение полезным или запутанным для вас.

Оператор if

Область, где язык программирования CSS менее развит, чем JavaScript — это управляющие структуры — или так может показаться. Тем не менее, CSS имеет операторы if. Вот несколько примеров:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Они означают «если область просмотра макета имеет максимальную ширину 900 пикселей» и «если движок CSS принимает» display: flex. Нет сомнений в том, что это фактические операторы if: блоки кода применяются только в том случае, если удовлетворяется условие. (Кроме того, спецификация для @media и @supports называется Условными правилами CSS. Это просто: at-правила должны использоваться как операторы if.)

Но давайте рассмотрим — если можно так выразиться — более сомнительный пример. Является ли следующее также оператором if?

«Если в меню есть ссылка, выделить ее красным цветом». Несколько человек, у которых я брал интервью для книги, были убеждены в том, что селекторы — это тоже операторы.

Вы согласны? Согласен ли я? Я не уверен, хотя и вижу в этом определенный смысл: можно рассматривать селекторы и так. Согласны ли вы с этим, вероятно, зависит от вашего определения оператора if.

Цикл for

Давайте для рассмотрения циклов немного усложним ситуацию. На первый взгляд может показаться, что в CSS их нет. Тем не менее, как насчет того же кода, который мы видели выше?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В некотором смысле, селектор, подобный приведенному выше, можно считать примитивным циклом for. Браузеру велено перебрать все элементы <a> внутри элемента <menu> и применить к ним красный цвет.

Является ли селектор циклом for? Может ли он быть оператором if и циклом for одновременно? Опять же, это зависит от ваших определений циклов for и операторов if. Я хотел бы отметить, что можно добавить в CSS дополнительную логику для циклов.

Эти дополнительные селекторы можно рассматривать как операторы внутри цикла for: перебрать все ссылки в меню, но пропустить эту одну и назначить для нее специальный режим.

Декларативный и императивный подходы

Давайте возьмем самое общее представление и скажем, что CSS-селекторы могут рассматриваться как операторы if и как циклы for. Это будет звучать довольно странно для любого, кто имеет опыт работы с JavaScript, поскольку эти два типа управляющих структур просто не одинаковы. Итак, как вы можете заменить оба на одну структуру?

Здесь, я думаю, мы еще раз видим, что CSS является декларативным языком, а не императивным. В декларативных языках некоторые простые управляющие структуры могут быть выражены гораздо более кратко, чем в императивных. Возьмем последний пример кода. В JavaScript мы должны написать что-то вроде:

Недостатком версии JavaScript является то, что она более многословна, чем версия CSS, и, следовательно, более подвержена ошибкам. Преимущество ее состоит в том, что она предоставляет более тонкий контроль, чем CSS. В CSS мы почти достигли пределов того, что мы можем выразить. В версию JavaScript мы могли бы добавить гораздо больше логики, если пожелаем.

В CSS мы сообщаем браузеру, как должны выглядеть ссылки. В JavaScript мы описываем алгоритм для определения того, как должна выглядеть отдельная ссылка. Ни то, ни другое не является единственно правильным, но в этом примере способ CSS является более эффективным.

Лично мне комфортно рассматривать CSS-селекторы как операторы и циклы одновременно. Тем не менее, я чувствую, что как только вы начинаете понимать CSS, тот факт, что селекторы представляют собой if / for, становится все менее и менее актуальным. Вместо этого селекторы — просто селекторы: отлично подходят для относительно простых объявлений; меньше для очень сложных.

Полезно это или сбивает с толку?

Если вы джаваскриптер, который желает лучше узнать CSS, я хотел бы услышать, помогают или сбивают вас с толку несколько приведенных выше примеров. Чем больше отзывов я получаю, тем лучше я могу написать книгу, которая поможет вам изучить CSS, а не просто запутает вас. Благодарю за внимание.

Источник: https://www.quirksmode.org

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree