Статьи

Code Challenge # 2: 4 подсказки для более высоких результатов в CSSBattle.dev

Чуть более недели назад вы, возможно, видели, как мы запускаем наш второй Code Challenge — партнерство с нашими друзьями на CSSBattle.dev . CSS сражения — относительно новая концепция — сайт запущен в апреле — и не всегда сразу видно, как они работают.

Панель вывода и редактирования по умолчанию в CSSbattle.

Панель вывода и редактирования по умолчанию в CSSbattle.

Проще говоря:

  • Ваша цель — создать копию «целевого» изображения, используя только HTML и CSS
  • Вы не можете использовать внешние изображения
  • Вы не можете использовать SVG (даже встроенный SVG) или специальные символы
  • Все решения автоматически оцениваются по точности и эффективности (количество символов)
  • Игрок, воссоздающий целевое изображение с наибольшим количеством очков, выигрывает

Я должен признать, когда я впервые увидел идею, я был немного недоверчив. С какой стати кто-то может создать ЭТОТ дизайн, используя HTML-код и CSS-код стоимостью меньше, чем твиты? Это просто невозможно, конечно?

Поэтому я попытался и в основном потерпел неудачу — но я также научился и постепенно начал понимать некоторые приемы, которые вам нужны. Если вам интересно, я подумаю, что пройдусь по 4 советам, которые помогут вам набрать больше очков.

Позвольте мне прояснить : когда я пишу этот пост, я занял 24-е место в этом боевом раунде. До сих пор я выполнил каждую цель и занял 26-е место в общем зачете , так что, несомненно, есть, по крайней мере, около двух десятков игроков с гораздо лучшими решениями, чем я. Тем не менее, я рад поделиться тем, что я знаю, и посоветоваться со всеми, у кого есть лучшие идеи.

Совет № 1: Пустая панель вывода никогда не бывает TRULY пустой

При первой загрузке любой цели вы увидите что-то похожее на изображение выше. Ваш редактор всегда поставляется с примерами HTML и CSS, обеспечивающими элементарную стартовую позицию. Однако даже если вы удалите каждый отдельный символ в вашем редакторе, ваша панель «Вывод» технически не будет пустой.

Почему нет? Если вы проверите источник панели «Вывод» (подсказка: пока отключите функцию «Слайд и сравнение»), вы найдете <iframe><html><body>

Как вы можете видеть на изображении ниже, вы можете видеть, что они представлены в виде строки CSS. Конечно, вы можете свободно стилизовать эти два HTML-элемента, не тратя на их создание никаких символов.

Экран с элементами HTML и BODY с красной пунктирной линией.

Всегда есть HTML и элемент BODY, готовый к стилю.

Это не означает, что вы никогда не добавляете свои собственные элементы HTML — <DIV><P><I>встроенные элементы ».

Совет № 2: Тщательно выбирайте свои единицы измерения

Цели CSSBattle всегда имеют ширину 400px и высоту 300px, поэтому вы можете правильно описать центральную точку left:200pxtop:150px Тем не менее, вы можете так же легко описать эту точную позицию как left:50%top:50% Это удобное сохранение 4 символов.

Проценты не всегда побеждают все же. Позиция top:100pxtop:33.33% Там довольно много проб и ошибок, чтобы найти лучшее соответствие. Потенциально полезные единицы измерения включают в себя:

  • Пиксели: px
  • Проценты: %
  • Ремс: rem
  • ЭМС: em
  • Дюймы: in
  • Миллиметры: mm
  • Picas: pc
  • Очки: pt
  • Высота окна просмотра: v h
  • Ширина области просмотра Единицы измерения: vw
  • Четверть миллиметра: q

Этот последний тип единицы измерения — «q» — относительно малоизвестная единица. Но так как это один символ — я нахожу это необычайно полезным в битвах CSS. Я нашел, что 50px переводит на 53 q.

Также обратите внимание, что некоторые свойства CSS предполагают, что вы имеете в виду пиксели, если вы явно не объявляете тип модуля. Другими словами, width:80width:80px Высота и запас одинаковы. С другой стороны, box-shadow

Совет № 3: CSS — это каскад — используйте его в полной мере.

CSS действительно хорош в «наследовании» и «специфичности». Наследование позволяет дочерним элементам получать свои стили от своих родителей. «Специфичность» означает, что общие правила переписываются более тщательно или недавно объявленными правилами.

В CSS самым широким правилом является подстановочный знак *применять ко всем элементам ». Итак, следующее правило применяет фон # 222 ко всему. Если мы не добавим дополнительный HTML, это <html><body>

 *{background:#222}

Если затем следовать этому более конкретному правилу, нацеленному только на <body><html>

 *{background:#222}
body{background:#F2994A}

Давайте сделаем еще один шаг вперед.

В CSS оператор «>» означает « только когда X является родителем Y » (т.е. x>y{} Итак, если мы напишем:

 *>*{...}

… Мы говорим: « Применяйте это правило только к любому элементу, который находится внутри любого другого элемента » — другими словами, ЛЮБОЙ дочерний элемент.

Поскольку элемент HTML никогда не является дочерним, только второе <BODY> Мы сохраняем другого персонажа.

 <style>
*{background:#222}
*>*{background:#F2994A}
</style>

Совет № 4: Браузеры жесткие. Заставь их работать.

После того, как вы взяли все низко висящие фрукты, наступает момент, когда единственный практический способ вырезать символы — это удалить код, который технически необходим, но не является абсолютно критичным для окончательного рендеринга. Вы могли бы сказать, что современные браузеры будут любезно смотреть на ваш короткий и немного невоспитанный код. Это включает, но не ограничивается:

  • Удаление закрытия </style>
  • Удаление закрывающих тегов HTML (т. Е. </p></div>
  • Удаление последнего закрытия }
  • Удаление большинства пробелов и возврат каретки. Метод проб и ошибок — ваш друг здесь.

Конечно, не имеет смысла использовать этот вид экстремальной оптимизации в производственном CSS. Вы бы поставили под угрозу надежность своего кода для незначительной экономии. Но CSSBattles научат вас тому, как браузеры думают, что они делают и не любят.

Итак, поощряет ли CSSBattle вредные привычки кодирования?

Я слышал, что несколько человек упоминают это как потенциальный недостаток. На самом деле, старший государственный деятель CSS Эрик Мейер недавно поднял вопрос в обратной связи CSSBattle.dev Spectrum:

Является ли зависимость от использования морщин синтаксического анализатора (особенно в отношении пробелов разделения) для получения более низких показателей намеренной или побочным эффектом?
Эрик Мейер

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

Вы могли бы сделать хорошее сравнение японской поэзии хайку . Хайку — это формат, построенный на жестких пределах — произвольные ограничения в 3 строки и 17 слогов.

Даже великие мастера хайку в мире не ожидают, что будут говорить или писать каждый день в тщательно выстроенном хайку. Однако это не означает, что мы не можем выучить важные уроки по выбору слов, ритму, балансу и красоте, когда читаем (или пишем) хайку.

Написание хорошего кода «CSS Battles» — это не то же самое, что написание хорошего «производственного кода», но оно преподаст вам уроки, которые вы не могли получить в другом месте.