Хабраверсия правил хорошего тона для веб-технолога

    Всем доброго дня.

    Прочитал вчера на Хабре интервью с Ольгой Алексашенко, в котором она, кроме всего прочего, разделяет верстальщиков на два класса — тех, кто «фигачит» (большинство сотрудников небольших студий с определенным опытом работы), и «творцов»-перфекционистов, ищущих для каждого случая идеальное решение. У меня сразу же возник вопрос — как в рамках одной студии сформировать единые требования для верстки? Ведь в первом случае это должны быть максимально формальные требования, выполнение которых позволит не осложнять жизнь программистам и оптимизаторам, а технологи второго типа становятся полноценными архитекторами — от качества их решений зависит качество будущего проекта.

    Я предлагаю всем заинтересованным участникам Хабра принять участие в создании Хабраправил хорошего тона для верстальщиков. Прекрасно понимаю, что существует огромное число переводных статей (в основном описывающих CSS-киты ведущих технологов мира), а также множество примеров решения конкретных задач. Но общедоступной и понятной идеологии я все-таки не нашел, а Хабр неплохо подойдет в качестве платформы для такого манифеста.

    Составлять предлагаю так: в каждом комментарии по одному правилу. Наиболее рейтинговые комментарии добавляются в топик и участвуют в обсуждении уже как часть свода правил.

    Для начала:
    При верстке Хабросообщество рекомендует:
    1. Использовать Reset-блок вместе с определением ключевых тегов форматирования (заголовков, абзацев), если существует вероятность (возможно, не предусмотренная дизайном) их использования на сайте;
    2. Разделять, где это возможно, таблицы стилей для браузеров, по-разному поддерживающих стандарты (т.е. отказ от css-хаков любого рода в основных таблицах стилей).

    Прошу по возможности отнестись к топику серьезно — много всего важного было придумано именно первого апреля.

    Добавлено по результатам первого дня:
    3. Жестко задавать режим рендеринга (!DOCTYPE);
    4. Учитывать возможность масштабирования шрифтов;
    5. Использовать понятные имена классов, либо сопровождать проект вынесенными комментариями;
    6. В общем случае соблюдать семантику тегов разметки — таблицы таблицами, списки списками.

    Средняя зарплата в IT

    111 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 7 185 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 54

      +2
      Таблицы использовать для оформления табличных данных. (щас тут будет холивар :)
        +7
        Лучше обобщить - "соблюдать семантику тегов разметки", а то я помню "умельцев", которые отступы ставили тегом BLOCKQUOTE
        0
        Как можно меньше использовать in-line стили
          +1
          Тегом img вставлять только пользовательские изображения (в общем случае — отделение кода от представления)
            +1
            отказ от хаков в основных таблицах стилей
              +3
              Использовать микроформаты. Это не так сложно как кажется.
                0
                На радость строителям дорвеев.
                  0
                  не могли бы вы прокомментировать свои слова?
                    0
                    Запросто. Внедрение RSS потащило за собой распространение скриптов поддержки автозаполняемых сайтов. Яндекс загажен такими сайтами капитально. Найти первоисточник статьи или новости по дате стало практически нереально. Внедрение микроформатов приведет к дальнейшему расширению возможностей клонирования информации и соответственно загаживанию поиска.
                    Причем кроме чистых помоечников будут расти ряды всяких вторичных ресурсов, не имеющих собственного контнента и празитирующх на крупных поставщиках контента.
                      0
                      а ну да, не подумал об этом. действительно проблема. но всетаки микроформаты стоят того, чтобы их внедрять.
                        0
                        Теоретически - да, а практически - думаю не прибить ли мне на отдельных сайтах RSS.
                –1
                По-мойму хороший тон любого верстальщика и не только это когда в его работе всё придельно понятно и можно разобратса слегка, а выносить определённые техники в правило это неправельно. Не всегда можно сохранить семантику, посмотрите хотябы на Yahoo - у них далеко не всё семантично, зато работает превосходно во всех браузерах и собственно по стилю тоже неплохо выглядет.
                  0
                  Давайте только хардкорные случаи не рассматривать - а то половина "верстальщиков" скажет: "мы верстаем как в Yahoo!"
                    +1
                    Я буду рад есле хоть один найдётса который скажет - "Я использую YUI!" ;)
                      0
                      в своих проектах я использую yui
                        0
                        Я использую х..й, а что такое YU? :)
                        Если серьезно, на мой взгляд самый "юзабилитный" fw - jquery и его "подобия" (mootoolth и т.п.)
                        Насчет верстки. Можно конечно сверстать "пофигистически" без doctype и везде комом...
                        скорее всего yahoo так и сделан потому что верстали его 100 блоков - 100 разных людей...
                        Скажу так: конечно можно по принципу "кто как хочет - так и ... делает", но лучше сразу делать "правильно"... чтобы потом случайно не вылезали косяки... особенно, потом, и в других проектах.
                          0
                          YUI — yahoo css framework. на уровне с blueprint и 960gs, element.
                          0
                          я использую YAHOO! User Interface.
                          Юишники всех стран - объеденяйтесь :)
                      0
                      Для начала надо всех приручить к нормальным названиям class :) а то тут встречаются .aaa .bbb
                      Использовать нормально наследование.
                      Использовать совмещение классов.

                      И прежде все думать :) а не на каждый случай создавать свой class - отличающийся от подобных одним параметром.
                      +1
                      Использовать спрайты (http://rmcreative.ru/img/sprites.png) для оформления сайта. Да, верстается немного непривычно, но эффект виден даже на глаз.
                        0
                        Мне не понравилось, что логотип бэкграундом. Иконка лупы на сайте короче на 1 пиксель. IE не съел прозрачный фон у png.

                        Имхо, польза спрайтов видна либо на сайте с множеством разных мелких картинок, либо когда идет подмена background'a "на лету" - в первом случае из-за уменьшения числа лишних запросов к серверу, а во втором - чтобы не прелоадить картинки. В остальном - лишь одна из техник, которые увеличивают энтропию :)
                          0
                          Что плохого в лого бэкграундом? Как это отражается на конечных пользователях?

                          Если использовать тот же FireBug, энтропия возрастает незначительно. А вот польза видна на глаз даже на мелком числе картинок как у меня. Всё-таки один запрос вместо тринадцати...

                          p.s. До IE никак руки не дойдут... скоро залатаю.
                            0
                            В случае блога - пожалуй, никак. Если страницу сайта распечатает секретарша и понесет начальнику - я предпочту, чтобы она распечатала и логотип тоже.

                            Под энтропией я имел ввиду то, что твой к примеру блог логично верстать слайсами, "тяжелый" дизайн - наоборот, нелогично. В итоге рекомендация выходит не очень общая :(
                              0
                              Да, на общую, пожалуй не тянет...
                                0
                                Лого для печати ставится картинкой высокого разрешения в display:none. В стилях для печати ему задается размер в сантиметрах или pt и display:block.
                          0
                          Один хороший дельный совет это писать css свойства в алфавитном порядке. Свойства в алфавитнеом порядке можно найти здесь:

                          http://reference.sitepoint.com/css/properties-alphabetic

                          Советую сделать шпаргалку на бумаге и положить себе на стол ;)
                            0
                            Меня всегда раздражало во всех средах разработки, что width и height находятся в разных концах списка свойств в алфавитном порядке. Но, может, кому-то так удобнее :)
                              0
                              Что верно, то верно. Мне гораздо удобней комбинировать свойства по смыслу:
                              .my-class {
                              width: 100px; height: 200px;
                              border: 1px solid #f00;
                              }
                                0
                                согласен, я тоже сначала указываю ширину с высотой, потом отступы, потом бекграунд, потом бордер, а уж потом всё остальное. мне так удобней, так кажется логичней и легче искать нужный параметр. в большинстве случаев ,когда приходится разбираться с чужим кодом, зачастую встречается именно такой вариант или очень похожий, что заметно уменьшает время поиска...
                                по теме - имхо, таблицы использовать только для табличных данных (впринципе, это касается всех наиболее часто используемых элементов - использовать всё по назначению, тогда и браузерам проще будет, и тем, кому , возможно, прийдётся работать с твоим кодом в дальнейшем), яваскрипт, по возможности, выносить в конец кода, а хаки - в отдельные файлы стиля...
                              • НЛО прилетело и опубликовало эту надпись здесь
                              +2
                              Вадим Макеев в своих докладах, семинарах и статьях уже давно пропагандирует дзен-кодинг, в котором описывает единые правила для верстальщиков. Вот, например, первая статья: http://pepelsbey.net/2008/02/css-managem…
                                0
                                Возможно это обсуждалось и не раз, но что такое микроформаты? И дайте, пожалуйста, reset-блок...
                                  0
                                  вот - правда это мало относитса к данному топику.

                                  http://microformats.org
                                    +1
                                    /* RESET */
                                    html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
                                    h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
                                    ul,ol { list-style: none; }
                                    fieldset,img { border: none; }
                                    caption,th { text-align: left; }
                                    table { border-collapse: collapse; border-spacing: 0; }
                                      0
                                      за ul,ol { list-style: none; } надо руки отрывать.
                                      что прикажете делать редактору который через визиг решит добавить список?
                                      а он без булетов?
                                      когда переопределяешь глобальные стили нужно быть аккуратным и думать о последствиях.
                                      padding:0 для input и textarea - тоже нехорошо. вам нравится как выглядит такой input без отступов для ввода текста?

                                      впрочем div {padding:0; margin:0} лучше всего говорит о авторе reset'a
                                        0
                                        "за ul,ol { list-style: none; } надо руки отрывать." - Эрику Майеру давно пора руки оторвать :D

                                        CSS RESET - для каждого отдельного случая должен быть свой - тоесть подправлен, подкоректирован.
                                          0
                                          Ресет на то и ресет, что бы все значения сбросить. После сброса, для каждого элемента нужно прописать свои свойства и их значения.

                                          Кстати, этот фрагмент кода взят с сайта Эпл.
                                            0
                                            с одной строны логично - давайте сбросим всё...
                                            но зачем?

                                            Мэйер отец конечно, но это выходит "весь мир разрушим мы до основанья... а затем..."

                                            Не логичней ли прописать глобальные стили описывающие нормальное логичное поведение для элементов?

                                            :focus {outline: 0} , ну давайте ещё вот такое напишем:
                                            b,strong {font-weight: normal}
                                            i,em {font-style: normal}
                                            ну а чё - обнуляем же!

                                            div {margin: 0; padding: 0} - а с каких это времён у него margin и padding не 0?

                                            он наверно как Сагалаев, что советует незакрывать теги, пишет такое, а сам смеётся втихаря :)
                                              0
                                              Кстати, в этом ресете есть и strong {font-weight: normal}, и em {font-style: normal} :-)
                                                0
                                                Затем, что в разных браузерах разные таблицы стилей по умолчанию. А еще есть пользовательские определения - редкость, но кое-где встречается.
                                                Есть еще такая штука, как :first-child, тоже добавляет неразберихи.
                                            0
                                            * { margin: 0; padding: 0; }
                                            для первой строки
                                              0
                                              По идее, такая конструкция будет дольше обрабатываться браузером
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                            +2
                                            Не забывать про !DOCTYPE
                                              0
                                              добалю к тому что уже сказали:

                                              - продумывать структуру заголовков h1-h6
                                              - делать доступные(accessibility) сайты
                                              - и валидные разумеется
                                              - и естественно кроссбраузерными. Кроссбраузерными это не IE6 и FF, а IE5.0,IE5.5,IE6,IE7,не забудь про IE8,OP8,OP9,FF,Safari.
                                              - шрифты должны быть масштабируемыми (в em)
                                              - expression'ы для IE должны быть одноразовыми
                                              - код должен быть компактными и неизбыточным.
                                                +2
                                                IE 5.0 ?? это слишком нерациональные издержки
                                                  0
                                                  На мой взгляд, IE 5.5 тоже пора вычеркивать.
                                                    0
                                                    доля 5.0 больше чем 5.5
                                                    правки для того чтобы в них работало всё так же (или почти также, за исключением маленьких дизайнеских мелочей) как в нормальных браузерах - элементарны и занимают не более получаса.
                                                    Это просто хороший тон.
                                                    0
                                                    Возможно это аксиома, но для в правильном css это должно быть - Четкие комментарии к стилям, блокам стилей, специальным стилям. Верстальщик, должен думать о том, чтобы его код пыл понятен не только верстальщику.
                                                    +1
                                                    Как человек, который встраивает верстку:
                                                    Стоит проверять вестку на исключительные ситуации, например:
                                                    — слишком длинные слова;
                                                    — слишком много информации;
                                                    — выключенные картинки;
                                                    — и т. д.
                                                      0
                                                      пища для ума: http://rit2008.ru/images/css%20management%20-%20vadim%20makeev.pdf
                                                        –2
                                                        Тысячу раз было уже написано и сказано это.
                                                        Выходят все "новые" и "новые" статьи на эту тему, .... все тоже самое, только другими словами...
                                                        Фигня полная.

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

                                                        Самое читаемое