Comments 54
Таблицы использовать для оформления табличных данных. (щас тут будет холивар :)
Как можно меньше использовать in-line стили
Тегом img вставлять только пользовательские изображения (в общем случае — отделение кода от представления)
отказ от хаков в основных таблицах стилей
Использовать микроформаты. Это не так сложно как кажется.
На радость строителям дорвеев.
не могли бы вы прокомментировать свои слова?
Запросто. Внедрение RSS потащило за собой распространение скриптов поддержки автозаполняемых сайтов. Яндекс загажен такими сайтами капитально. Найти первоисточник статьи или новости по дате стало практически нереально. Внедрение микроформатов приведет к дальнейшему расширению возможностей клонирования информации и соответственно загаживанию поиска.
Причем кроме чистых помоечников будут расти ряды всяких вторичных ресурсов, не имеющих собственного контнента и празитирующх на крупных поставщиках контента.
Причем кроме чистых помоечников будут расти ряды всяких вторичных ресурсов, не имеющих собственного контнента и празитирующх на крупных поставщиках контента.
По-мойму хороший тон любого верстальщика и не только это когда в его работе всё придельно понятно и можно разобратса слегка, а выносить определённые техники в правило это неправельно. Не всегда можно сохранить семантику, посмотрите хотябы на Yahoo - у них далеко не всё семантично, зато работает превосходно во всех браузерах и собственно по стилю тоже неплохо выглядет.
Давайте только хардкорные случаи не рассматривать - а то половина "верстальщиков" скажет: "мы верстаем как в Yahoo!"
Я буду рад есле хоть один найдётса который скажет - "Я использую YUI!" ;)
в своих проектах я использую yui
Я использую х..й, а что такое YU? :)
Если серьезно, на мой взгляд самый "юзабилитный" fw - jquery и его "подобия" (mootoolth и т.п.)
Насчет верстки. Можно конечно сверстать "пофигистически" без doctype и везде комом...
скорее всего yahoo так и сделан потому что верстали его 100 блоков - 100 разных людей...
Скажу так: конечно можно по принципу "кто как хочет - так и ... делает", но лучше сразу делать "правильно"... чтобы потом случайно не вылезали косяки... особенно, потом, и в других проектах.
Если серьезно, на мой взгляд самый "юзабилитный" fw - jquery и его "подобия" (mootoolth и т.п.)
Насчет верстки. Можно конечно сверстать "пофигистически" без doctype и везде комом...
скорее всего yahoo так и сделан потому что верстали его 100 блоков - 100 разных людей...
Скажу так: конечно можно по принципу "кто как хочет - так и ... делает", но лучше сразу делать "правильно"... чтобы потом случайно не вылезали косяки... особенно, потом, и в других проектах.
я использую YAHOO! User Interface.
Юишники всех стран - объеденяйтесь :)
Юишники всех стран - объеденяйтесь :)
Для начала надо всех приручить к нормальным названиям class :) а то тут встречаются .aaa .bbb
Использовать нормально наследование.
Использовать совмещение классов.
И прежде все думать :) а не на каждый случай создавать свой class - отличающийся от подобных одним параметром.
Использовать нормально наследование.
Использовать совмещение классов.
И прежде все думать :) а не на каждый случай создавать свой class - отличающийся от подобных одним параметром.
Да, чтобы в русском переводе выглядело нормально
Использовать спрайты (http://rmcreative.ru/img/sprites.png) для оформления сайта. Да, верстается немного непривычно, но эффект виден даже на глаз.
Мне не понравилось, что логотип бэкграундом. Иконка лупы на сайте короче на 1 пиксель. IE не съел прозрачный фон у png.
Имхо, польза спрайтов видна либо на сайте с множеством разных мелких картинок, либо когда идет подмена background'a "на лету" - в первом случае из-за уменьшения числа лишних запросов к серверу, а во втором - чтобы не прелоадить картинки. В остальном - лишь одна из техник, которые увеличивают энтропию :)
Имхо, польза спрайтов видна либо на сайте с множеством разных мелких картинок, либо когда идет подмена background'a "на лету" - в первом случае из-за уменьшения числа лишних запросов к серверу, а во втором - чтобы не прелоадить картинки. В остальном - лишь одна из техник, которые увеличивают энтропию :)
Что плохого в лого бэкграундом? Как это отражается на конечных пользователях?
Если использовать тот же FireBug, энтропия возрастает незначительно. А вот польза видна на глаз даже на мелком числе картинок как у меня. Всё-таки один запрос вместо тринадцати...
p.s. До IE никак руки не дойдут... скоро залатаю.
Если использовать тот же FireBug, энтропия возрастает незначительно. А вот польза видна на глаз даже на мелком числе картинок как у меня. Всё-таки один запрос вместо тринадцати...
p.s. До IE никак руки не дойдут... скоро залатаю.
В случае блога - пожалуй, никак. Если страницу сайта распечатает секретарша и понесет начальнику - я предпочту, чтобы она распечатала и логотип тоже.
Под энтропией я имел ввиду то, что твой к примеру блог логично верстать слайсами, "тяжелый" дизайн - наоборот, нелогично. В итоге рекомендация выходит не очень общая :(
Под энтропией я имел ввиду то, что твой к примеру блог логично верстать слайсами, "тяжелый" дизайн - наоборот, нелогично. В итоге рекомендация выходит не очень общая :(
Один хороший дельный совет это писать css свойства в алфавитном порядке. Свойства в алфавитнеом порядке можно найти здесь:
http://reference.sitepoint.com/css/properties-alphabetic
Советую сделать шпаргалку на бумаге и положить себе на стол ;)
http://reference.sitepoint.com/css/properties-alphabetic
Советую сделать шпаргалку на бумаге и положить себе на стол ;)
Меня всегда раздражало во всех средах разработки, что width и height находятся в разных концах списка свойств в алфавитном порядке. Но, может, кому-то так удобнее :)
Что верно, то верно. Мне гораздо удобней комбинировать свойства по смыслу:
.my-class {
width: 100px; height: 200px;
border: 1px solid #f00;
}
.my-class {
width: 100px; height: 200px;
border: 1px solid #f00;
}
согласен, я тоже сначала указываю ширину с высотой, потом отступы, потом бекграунд, потом бордер, а уж потом всё остальное. мне так удобней, так кажется логичней и легче искать нужный параметр. в большинстве случаев ,когда приходится разбираться с чужим кодом, зачастую встречается именно такой вариант или очень похожий, что заметно уменьшает время поиска...
по теме - имхо, таблицы использовать только для табличных данных (впринципе, это касается всех наиболее часто используемых элементов - использовать всё по назначению, тогда и браузерам проще будет, и тем, кому , возможно, прийдётся работать с твоим кодом в дальнейшем), яваскрипт, по возможности, выносить в конец кода, а хаки - в отдельные файлы стиля...
по теме - имхо, таблицы использовать только для табличных данных (впринципе, это касается всех наиболее часто используемых элементов - использовать всё по назначению, тогда и браузерам проще будет, и тем, кому , возможно, прийдётся работать с твоим кодом в дальнейшем), яваскрипт, по возможности, выносить в конец кода, а хаки - в отдельные файлы стиля...
UFO just landed and posted this here
Вадим Макеев в своих докладах, семинарах и статьях уже давно пропагандирует дзен-кодинг, в котором описывает единые правила для верстальщиков. Вот, например, первая статья: http://pepelsbey.net/2008/02/css-managem…
UFO just landed and posted this here
вот - правда это мало относитса к данному топику.
http://microformats.org
http://microformats.org
/* 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; }
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; }
за ul,ol { list-style: none; } надо руки отрывать.
что прикажете делать редактору который через визиг решит добавить список?
а он без булетов?
когда переопределяешь глобальные стили нужно быть аккуратным и думать о последствиях.
padding:0 для input и textarea - тоже нехорошо. вам нравится как выглядит такой input без отступов для ввода текста?
впрочем div {padding:0; margin:0} лучше всего говорит о авторе reset'a
что прикажете делать редактору который через визиг решит добавить список?
а он без булетов?
когда переопределяешь глобальные стили нужно быть аккуратным и думать о последствиях.
padding:0 для input и textarea - тоже нехорошо. вам нравится как выглядит такой input без отступов для ввода текста?
впрочем div {padding:0; margin:0} лучше всего говорит о авторе reset'a
"за ul,ol { list-style: none; } надо руки отрывать." - Эрику Майеру давно пора руки оторвать :D
CSS RESET - для каждого отдельного случая должен быть свой - тоесть подправлен, подкоректирован.
CSS RESET - для каждого отдельного случая должен быть свой - тоесть подправлен, подкоректирован.
Ресет на то и ресет, что бы все значения сбросить. После сброса, для каждого элемента нужно прописать свои свойства и их значения.
Кстати, этот фрагмент кода взят с сайта Эпл.
Кстати, этот фрагмент кода взят с сайта Эпл.
с одной строны логично - давайте сбросим всё...
но зачем?
Мэйер отец конечно, но это выходит "весь мир разрушим мы до основанья... а затем..."
Не логичней ли прописать глобальные стили описывающие нормальное логичное поведение для элементов?
:focus {outline: 0} , ну давайте ещё вот такое напишем:
b,strong {font-weight: normal}
i,em {font-style: normal}
ну а чё - обнуляем же!
div {margin: 0; padding: 0} - а с каких это времён у него margin и padding не 0?
он наверно как Сагалаев, что советует незакрывать теги, пишет такое, а сам смеётся втихаря :)
но зачем?
Мэйер отец конечно, но это выходит "весь мир разрушим мы до основанья... а затем..."
Не логичней ли прописать глобальные стили описывающие нормальное логичное поведение для элементов?
:focus {outline: 0} , ну давайте ещё вот такое напишем:
b,strong {font-weight: normal}
i,em {font-style: normal}
ну а чё - обнуляем же!
div {margin: 0; padding: 0} - а с каких это времён у него margin и padding не 0?
он наверно как Сагалаев, что советует незакрывать теги, пишет такое, а сам смеётся втихаря :)
* { margin: 0; padding: 0; }
для первой строки
для первой строки
Не забывать про !DOCTYPE
добалю к тому что уже сказали:
- продумывать структуру заголовков h1-h6
- делать доступные(accessibility) сайты
- и валидные разумеется
- и естественно кроссбраузерными. Кроссбраузерными это не IE6 и FF, а IE5.0,IE5.5,IE6,IE7,не забудь про IE8,OP8,OP9,FF,Safari.
- шрифты должны быть масштабируемыми (в em)
- expression'ы для IE должны быть одноразовыми
- код должен быть компактными и неизбыточным.
- продумывать структуру заголовков h1-h6
- делать доступные(accessibility) сайты
- и валидные разумеется
- и естественно кроссбраузерными. Кроссбраузерными это не IE6 и FF, а IE5.0,IE5.5,IE6,IE7,не забудь про IE8,OP8,OP9,FF,Safari.
- шрифты должны быть масштабируемыми (в em)
- expression'ы для IE должны быть одноразовыми
- код должен быть компактными и неизбыточным.
Как человек, который встраивает верстку:
Стоит проверять вестку на исключительные ситуации, например:
слишком длинные слова;
слишком много информации;
выключенные картинки;
и т. д.
Стоит проверять вестку на исключительные ситуации, например:
слишком длинные слова;
слишком много информации;
выключенные картинки;
и т. д.
пища для ума: http://rit2008.ru/images/css%20management%20-%20vadim%20makeev.pdf
Тысячу раз было уже написано и сказано это.
Выходят все "новые" и "новые" статьи на эту тему, .... все тоже самое, только другими словами...
Фигня полная.
Выходят все "новые" и "новые" статьи на эту тему, .... все тоже самое, только другими словами...
Фигня полная.
Sign up to leave a comment.
Хабраверсия правил хорошего тона для веб-технолога