большая тёрка

Большая Тёрка / Мысли / Личная лента olegchir /

olegchir

25 января 2014 в 22:54

Прячем говнокод

Познал всю офигительность генерации HTML вместо написания руками.

Короче, из-за хлама в HTML код быстро становится нечитаемым.
Так как устранить нечитаемую часть невозможно, хочется ее куда-нибудь спрятать с глаз долой.
Из-за чего я сегодня попробовал конвертнуть всё в JADE.
Это оказалось совсем не так легко, как вначале представлялось.
Но зато сразу стало действительно понятно, что происходит!

Читать далее

Например, вот пустая страница, у которой есть заголовок с логотипом компании и адресом/телефоном, и прибитый к низу футер:



Замечаем, что адрес/телефон сцентрированы по вертикали и горизонтали.

(По вертикали - по высоте заголовка, по горизонтали - внутри некоей ячейки шириной 300 пикселей, которая стремится быть как можно правее. Почему 300 пикселей? Потому что нужна фиксированная ширина, а для мелкой ширины нужно ориентироваться на 630 и 750 пикселей. Откуда взялось это, особенно 630 - отдельный разговор :)

Вот как это выглядит в JADE->HTML:

extends layout
include whcenter

block content

    body
        div#sticky_footer_body_wrap: div#adjust_width_to_device
            nav#top-navbar
                div#top-navbar-brand
                    img#brand-img(src="/public/images/logo.png")
                div#top-navbar-phone: +fwhcenter("300px")
                    div г. Новосибирск, ул. Большевистская, 109к1
                    div тел/факс:
                        b (383) 251-01-18

        div#sticky_footer: div#adjust_width_to_device
            div footer content

И замечаем, что тут нету никакого мусора, обеспечивающего центрирование.

Внимание на +fwhcenter("300px"), выделенный жирным шрифтом. Оно как раз и делает центрирование по ширине ячейки 300 пикселей.

Благодаря тому, что в строчку в JADE можно писать очень много тэгов, эту надпись можно свободно писать к чему угодно - и оно автоматически сцентрируется. Не боясь, что код превратится в кашу из тэгов.

В определении fwhcenter эта особенность писать много тэгов по горизонтали очень помогает:

mixin fwhcenter(inner_width, outer_width)
    if block
            if outer_width
                div.whouter(style="width:#{outer_width};"): div.whmiddle: div.whinner(style="width:#{inner_width};")
                    block
            else
                div.whouter(style="width:#{inner_width};"): div.whmiddle: div.whinner(style="width:#{inner_width};")
                    block
        else

В одну строчку написан весь мусор по созданию центрированного блока.

Как видим, JADE умеет параметрические миксины, включая переменное количество параметров и проверку на их наличие, а также интерполяцию строк.

Ну и кому интересно, что же такое стили whouter, whmiddle, whcenter. Есть два файла с их определениями, один относится ко старым браузерам, другой к новым.

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

link(rel="stylesheet", type="text/css", href="/public/stylesheets/src/fwvh-centerer-modern.css")
| <!--[if lte IE 7]>
| <link rel="stylesheet" type="text/css" href="/public/stylesheets/src/fwvh-centerer-compat.css"></link>
| <![endif]-->

В варианте для современных браузеров это выглядит так:

.whouter {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.whmiddle {
  display: table-cell;
  vertical-align: middle;
}

.whinner {
  margin-left: auto;
  margin-right: auto;
}

В варианте для устаревших браузеров это выглядит так:

.whouter {
  display: inline-block;
  top: 0;
}

.whmiddle {
  display: inline-block;
  top: 50%;
  position: relative;
}

.whinner {
  display: inline-block;
  top: -50%;
  position: relative;
}

Зачем вообще старые браузеры, если Twitter Bootstrap не умеет браузеры до IE10? Мы побеспокоились об этом заранее и на старых бразуерах кое-что отображается.

| <!--[if lt IE 9]>
| <script type="text/javascript" src="/public/javascripts/vendor/other/html5shiv.js" ></script>
| <script type="text/javascript" src="/public/javascripts/vendor/other/es5shim.js" ></script>
| <script type="text/javascript" src="/public/javascripts/vendor/other/respond.min.js" ></script>
| <![endif]-->

В результате видим что код стал более прозрачным, писать его быстрее и удобней.

Недостатком JADE/LESS/итп является время на декомпиляцию в случае ошибки, но в данном случае это время незначительно по сравнению с возможностью активной генерации тонн говнокода с помощью параметрических миксинов.

Нет комментариев