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

[b_r]

Таблицы использовать для оформления табличных данных. (щас тут будет холивар :)

[asterian]

Лучше обобщить - "соблюдать семантику тегов разметки", а то я помню "умельцев", которые отступы ставили тегом BLOCKQUOTE

[bezz]

Как можно меньше использовать in-line стили

[XXXVII]

Тегом img вставлять только пользовательские изображения (в общем случае — отделение кода от представления)

[nik]

отказ от хаков в основных таблицах стилей

[SamDark]

Использовать микроформаты. Это не так сложно как кажется.

[beshbarmak]

На радость строителям дорвеев.

[lautsevich]

не могли бы вы прокомментировать свои слова?

[beshbarmak]

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

[lautsevich]

а ну да, не подумал об этом. действительно проблема. но всетаки микроформаты стоят того, чтобы их внедрять.

[beshbarmak]

Теоретически - да, а практически - думаю не прибить ли мне на отдельных сайтах RSS.

[npFly]

По-мойму хороший тон любого верстальщика и не только это когда в его работе всё придельно понятно и можно разобратса слегка, а выносить определённые техники в правило это неправельно. Не всегда можно сохранить семантику, посмотрите хотябы на Yahoo - у них далеко не всё семантично, зато работает превосходно во всех браузерах и собственно по стилю тоже неплохо выглядет.

[asterian]

Давайте только хардкорные случаи не рассматривать - а то половина "верстальщиков" скажет: "мы верстаем как в Yahoo!"

[npFly]

Я буду рад есле хоть один найдётса который скажет - "Я использую YUI!" ;)

[PQR]

в своих проектах я использую yui

[maxic]

Я использую х..й, а что такое YU? :)
Если серьезно, на мой взгляд самый "юзабилитный" fw - jquery и его "подобия" (mootoolth и т.п.)
Насчет верстки. Можно конечно сверстать "пофигистически" без doctype и везде комом...
скорее всего yahoo так и сделан потому что верстали его 100 блоков - 100 разных людей...
Скажу так: конечно можно по принципу "кто как хочет - так и ... делает", но лучше сразу делать "правильно"... чтобы потом случайно не вылезали косяки... особенно, потом, и в других проектах.

[ed_tsech]

YUI — yahoo css framework. на уровне с blueprint и 960gs, element.

[aratak]

я использую YAHOO! User Interface.
Юишники всех стран - объеденяйтесь :)

[Tvarb]

Для начала надо всех приручить к нормальным названиям class :) а то тут встречаются .aaa .bbb
Использовать нормально наследование.
Использовать совмещение классов.

И прежде все думать :) а не на каждый случай создавать свой class - отличающийся от подобных одним параметром.

[asterian]

Да, чтобы в русском переводе выглядело нормально

[SamDark]

Использовать спрайты (http://rmcreative.ru/img/sprites.png) для оформления сайта. Да, верстается немного непривычно, но эффект виден даже на глаз.

[asterian]

Мне не понравилось, что логотип бэкграундом. Иконка лупы на сайте короче на 1 пиксель. IE не съел прозрачный фон у png.

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

[SamDark]

Что плохого в лого бэкграундом? Как это отражается на конечных пользователях?

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

p.s. До IE никак руки не дойдут... скоро залатаю.

[asterian]

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

Под энтропией я имел ввиду то, что твой к примеру блог логично верстать слайсами, "тяжелый" дизайн - наоборот, нелогично. В итоге рекомендация выходит не очень общая :(

[SamDark]

Да, на общую, пожалуй не тянет...

[kost]

Лого для печати ставится картинкой высокого разрешения в display:none. В стилях для печати ему задается размер в сантиметрах или pt и display:block.

[npFly]

Один хороший дельный совет это писать css свойства в алфавитном порядке. Свойства в алфавитнеом порядке можно найти здесь:

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

Советую сделать шпаргалку на бумаге и положить себе на стол ;)

[asterian]

Меня всегда раздражало во всех средах разработки, что width и height находятся в разных концах списка свойств в алфавитном порядке. Но, может, кому-то так удобнее :)

[SamDark]

Что верно, то верно. Мне гораздо удобней комбинировать свойства по смыслу:
.my-class {
width: 100px; height: 200px;
border: 1px solid #f00;
}

[set]

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

[engel]

Вадим Макеев в своих докладах, семинарах и статьях уже давно пропагандирует дзен-кодинг, в котором описывает единые правила для верстальщиков. Вот, например, первая статья: http://pepelsbey.net/2008/02/css-managem…

[npFly]

вот - правда это мало относитса к данному топику.

http://microformats.org

[zhukov]

/* 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; }

[Delka]

за ul,ol { list-style: none; } надо руки отрывать.
что прикажете делать редактору который через визиг решит добавить список?
а он без булетов?
когда переопределяешь глобальные стили нужно быть аккуратным и думать о последствиях.
padding:0 для input и textarea - тоже нехорошо. вам нравится как выглядит такой input без отступов для ввода текста?

впрочем div {padding:0; margin:0} лучше всего говорит о авторе reset'a

[npFly]

"за ul,ol { list-style: none; } надо руки отрывать." - Эрику Майеру давно пора руки оторвать :D

CSS RESET - для каждого отдельного случая должен быть свой - тоесть подправлен, подкоректирован.

[zhukov]

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

Кстати, этот фрагмент кода взят с сайта Эпл.

[Delka]

с одной строны логично - давайте сбросим всё...
но зачем?

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

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

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

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

он наверно как Сагалаев, что советует незакрывать теги, пишет такое, а сам смеётся втихаря :)

[zhukov]

Кстати, в этом ресете есть и strong {font-weight: normal}, и em {font-style: normal} :-)

[asterian]

Затем, что в разных браузерах разные таблицы стилей по умолчанию. А еще есть пользовательские определения - редкость, но кое-где встречается.
Есть еще такая штука, как :first-child, тоже добавляет неразберихи.

[sonyblack]

* { margin: 0; padding: 0; }
для первой строки

[zhukov]

По идее, такая конструкция будет дольше обрабатываться браузером

[aleo]

Не забывать про !DOCTYPE

[Delka]

добалю к тому что уже сказали:

- продумывать структуру заголовков h1-h6
- делать доступные(accessibility) сайты
- и валидные разумеется
- и естественно кроссбраузерными. Кроссбраузерными это не IE6 и FF, а IE5.0,IE5.5,IE6,IE7,не забудь про IE8,OP8,OP9,FF,Safari.
- шрифты должны быть масштабируемыми (в em)
- expression'ы для IE должны быть одноразовыми
- код должен быть компактными и неизбыточным.

[summerrain]

IE 5.0 ?? это слишком нерациональные издержки

[zhukov]

На мой взгляд, IE 5.5 тоже пора вычеркивать.

[Delka]

доля 5.0 больше чем 5.5
правки для того чтобы в них работало всё так же (или почти также, за исключением маленьких дизайнеских мелочей) как в нормальных браузерах - элементарны и занимают не более получаса.
Это просто хороший тон.

[zhukov]

О чем не стоит забывать, когда верстаешь HTML

[Borro]

Как человек, который встраивает верстку:
Стоит проверять вестку на исключительные ситуации, например:
— слишком длинные слова;
— слишком много информации;
— выключенные картинки;
— и т. д.

[tenshi]

пища для ума: http://rit2008.ru/images/css%20management%20-%20vadim%20makeev.pdf

[corbis]

Тысячу раз было уже написано и сказано это.
Выходят все "новые" и "новые" статьи на эту тему, .... все тоже самое, только другими словами...
Фигня полная.