Как стать автором
Обновить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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