Skip to content

Instantly share code, notes, and snippets.

@ipetropolsky
Last active August 29, 2015 14:03
Show Gist options
  • Select an option

  • Save ipetropolsky/c00261036c5d1a96297e to your computer and use it in GitHub Desktop.

Select an option

Save ipetropolsky/c00261036c5d1a96297e to your computer and use it in GitHub Desktop.
Идея: g-reset

g-reset

Проблема

Когда одни блоки вкладываются в другие блоки, к ним начинают применяться наследуемые CSS-свойства. В некоторых случаях так и задумано, тогда в стилях блока явно указывается значение inherit. Но в большинстве случаев это лишние свойства, которые вызывают визуальные косяки (white-space: nowrap;), и никогда не знаешь, какие свойства протекут на твой блок, потому что он может быть вложен куда угодно.

Идея

Вводим блок для обнуления наследуемых свойств до дефолтных на текущем сайте.

g-reset лежит в reset.css и включает в себя дефолтные значения для наследуемых свойств. Когда тебе нужен чистый контекст, добавляешь элемент с классом g-reset, и поток наследуемых свойств останавливается. Поскольку мы не используем каскад, внутри элемента с g-reset блоки будут вести себя точно так же, как если бы их поместили в body (бинго!).

Вместе с идеологией АНБ это то же самое что applyAuthorStyles = false и resetStyleInheritance = true, только сброс не до браузерных стилей, а до reset.css, что гораздо круче. Обращаю внимание на эти свойства веб-компонентов, они появились неспроста и востребованы.

Обёртку с g-reset может добавлять XSL, разворачивающий b:content. Она может назваться bloko-reset и поставляться без свойств вообще или с минимальным безопасным набором, оставляя клиенту возможность добавить в неё свои собственные дефолтные значения.

Простой пример: http://jsfiddle.net/ipetropolsky/CWxYp/

Альтернатива №1

Допустим, я ставлю на страницу блок, и у него поехали стили.

  1. Нужно найти вверх по дереву блок, из которого протекает свойство, а это реально сделать только живьём в браузере, воспроизведя ситуацию.
  2. Чтобы свойство не протекало, нужно перевесить его на конечный элемент, в который 100% не вложатся другие блоки, а таких элементов в блоке может быть много, придётся дублировать свойство. Либо добавить для содержимого обёртку, сбрасывающую это свойство до дефолтного значения сайта, а не браузера, а значит нужно синхронизировать все эти обёртки с reset.css, и вот это как раз неуправляемо. В протекающем блоке может быть несколько мест, в которые попадает произвольная разметка, нужно будет обернуть их все.
  3. Перевесить свойство или добавить обёртку не всегда возможно технически и всегда требует дополнительной работы с другими блоками, тестирование пары десятков мест и так далее.
  4. Нужно убедиться, что на других страницах сломанный блок не попадёт в другой блок с таким же протекающим свойством. Как это сделать? Невозможно отследить все протекающие свойства с такой кодовой базой как у нас, вылавливать их можно только наступая на грабли.

Альтернатива №2

Сбрасывать все стили в самом блоке. Это требует дублирования сброса в каждом блоке, а значит тотальной рассинхронизации с reset.css, и возможно только в пределах одного проекта (xhh), потому что универсальный блок (bloko) не может знать, до каких значений сбрасывать свойства, то есть какие дефолтные значения для твоего сайта.

См. также

Обсуждение в пулл-реквесте в Блоко.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment