Спокойный rules html. Все тэги должны быть в нижнем регистре. Добавляем display:inline для float-элементов

Обратите внимание на то, что тэг оболочки UL/OL опущен. Вдобавок многие предпочитали также не закрывать тэг LI . По сегодняшним стандартам это просто недобросовестная практика и ее следует избегать на 100%. Всегда-всегда закрывайте ваши тэги. Иначе проблемы с валидацией будут возникать на каждом шагу.

Как сделать лучше

• Some text here.
• Some new text here.
• You get the idea.

2: Задайте правильный DocType

Когда я был помоложе, я иногда сидел на CSS форумах. И всегда, когда у пользователя возникал вопрос, прежде чем спрашивать у нас, он ДОЛЖЕН был сделать сначала две вещи:

Подтвердить валидность CSS файла. Исправить все ошибки. Добавить doctype

"DOCTYPE ставится перед открывающим тэгом html вверху страницы и сообщает браузеру что содержит страница - HTML, XHTML или и то и другое, так, чтобы он мог корректно отображать разметку."

Большинство использует четыре различных doctype при создании новых сайтов.

Сейчас идут горячие споры относительно правильного выбора в данной ситуации. Сначала считалось, что лучшим вариантом будет использование версии XHTML Strict. Однако, после некоторые исследований, стало понятно, что большинство браузеров переходят обратно на обычный HTML при обработке этих страниц. По этой причине многие выбрали использование HTML 4.01 Strict вместо него. По сути все эти варианты дают вам контроль. Исследуйте обстановку и выберите сами свой вариант

3: Никогда не используйте включенные стили

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

I"m going to make this text red so that it really stands out and makes people take notice!

Конечно - это выглядит достаточно безобидно. Тем не менее, это ведет к ошибке ваших кодов.

При создании шаблона страницы даже не думайте о том, чтобы вставлять стили. Только после того, как страница была полностью создана можно добавлять стили.

Этот как пересекать лучи в Охотниках за Привидениями. Это просто плохая идея. -Крис Койер (Chris Coyier) (по поводу чего, совершенно не по теме.)

Вместо этого, закончите шаблон, после чего дайте ссылку на этот тэг P во внешнем CSS файле.

Как сделать лучше

#someElement > p { color: red; }

4: Помещайте все внешние CSS файлы внутри тэга HEAD

Технически, вы можете поместить таблицы стилей куда угодно. Однако, спецификации HTML рекомендуют помещать их внутри тэга документа HEAD. Самое главное этого преимущество это то, что ваши страницы будут грузиться быстрее.

Когда мы исследовали произодительность в Yahoo!, мы обнаружили, что перемещение таблиц стилей в HEAD документа заставляет страницы грузиться быстрее. Это происходит потому, что помещение таблиц стилей в HEAD позволяет странице грузиться прогрессивно. - Команда ySlow

My Favorites Kinds of Corn

5: Лучше разместить файлы Javascript в конце страницы

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

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

Как сделать лучше

#

And now you know my favorite kinds of corn.

6: Никогда не используйте подключенный Javascript. На дворе не 1996!

Еще одна распространенная практика в прошлом это помещать команды JS напрямую в тэги. Это часто использовалось в простых галереях изображений. По существу, тэгу просто присваивался атрибут "onclick". Его значение при этом равнялось какой-либо процедуре JS. Нет нужды говорить, что такого никогда нельзя делать. Вместо этого превратите этот код во внешний файл JS и используйте "addEventListener/attachEvent" чтобы "прослушать" желаемое событие. Или же, при использовании такого фреймворка как jQuery, просто используйте метод "click".

$("a#moreCornInfoLink").click(function() { alert("Want to learn more about corn?"); });

7: Постоянно проверяйте на валидность

Недавно я писал в своем блоге о том, как вопрос о валидации был абсолютно неправильно истолкован теми, кто не до конца понимают ее цели. Как я упоминал в этой статье, "валидация должна работать на вас, а не против" .

Однако, особенно в самом начале, я настоятельно рекомендую, чтобы вы скачали Web Developer Toolbar и постоянно использовали пункты "Validate HTML" (проверить HTML) и "Validate CSS". Хотя CSS и достаточно простой в изучении язык, он также может заставить вас рвать на себе волосы. Также вы часто будете убеждаться в том, что это ваша некачественная разметка привела к странным пробелам на странице. Поэтому проверяйте, проверяйте и еще раз проверяйте.

8: Скачайте Firebug

Не перестану его рекомендовать. Firebug без сомнения является лучшим из всех доступных плагинов для создания сайтов. Он не только предоставляет отличную отладку Javascript, но вы также узнаете, как определять какие элементы наследуют те дополнительные вложения, о которых вы не подозревали. Скачайте его !.

9: Используйте Firebug!

Из моего опыта большинство пользователей используют Firebug лишь на 20% его возможностей. Поистине вы оказываете себе плохую услугу. Потратьте пару часов и поищите в сети все достойные материалы по этому вопросу.

10: Все тэги должны быть в нижнем регистре

Технически, можно обойтись и тэгами в верхнем регистре.

С другой стороны, не делайте так. Это не служит никакой цели и режет глаз - не говоря уж о том, что это напоминает мне о функции html Microsoft Word!

Как сделать лучше

Here"s an interesting fact about corn.

11: Используйте тэги H1 - H6

Надо сказать, что это то, о чем я частенько забываю. Лучше всего использовать все шесть этих тэгов. Честно говоря, я обычно использую первые четыре, но я над этим работаю! : Для улучшения семантики и SEO сайта заставьте себя заменить тэг P на какой-либо подходящий H.

This is a really important corn fact! Small, but still significant corn fact goes here.

12: При создании блога, припасите H1 для заголовка

Я спросил наших последователей считают ли они целесообразным использовать H1 для логотипа или же использовать его для заголовка. Около 80% возвращенных твитов было в пользу последнего варианта.

Как и со всем остальным, определите, что лучше подходит вашему сайту. Тем не менее, при создании блога, я бы рекомендовал, чтобы вы припасли ваш тэг H1 для заголовка статьи. Из соображений SEO это, по моему мнению, лучший вариант.

13: Скачайте ySlow

Особенно в последние годы команда Yahoo проделала действительно отличную работу в нашей области. Не так давно они выпустили дополнение к Firefox под названием ySlow . Включите его, и он проанализирует данный вебсайт и выдаст "карточку отчета", которая детально опишет вам области сайта, которые необходимо улучшить. Может это слегка и жестко, но все же на благо. Я крайне рекомендую это дополнение

14: Панель навигации заключите в неупорядоченный список

Каждый вебсайт содержит хоть какое-то подобие навигационного меню. Может и можно оформить его следующим образом:

Home About Contact

К чему оформлять список навигационных ссылок чем-либо иным кроме неупорядоченного СПИСКА?

Предполагается, что тэг UL содержит в себе список элементов.

Как сделать лучше

• Home
• About
• Contact

15: Учитесь целиться на IE

Рано или поздно вы все-таки будете проклинать IE. Это вообще стало обязательным элементом в нашем сообществе. Когда я читаю на Твиттере, как один из моих друзей сражается с силами IE, я просто улыбаюсь и думаю про себя: "Я знаю, каково тебе, приятель".

Первым шагом после того как вы создали ваш основной CSS файл будет создание отдельного файла ie.css. Потом вы можете направлять на него исключительно ie, используя следующий код.

Этот код значит, что "браузер пользователя является Internet Explorer 6 или ниже, используй эту таблицу стилей, в ином случае, ничего не делай". Если вы хотите замены и для IE7, просто замените "lt" на "lte" (меньше или равно)

16: Выберите хороший редактор

Сидите вы на Windows или на Mac, для обоих создано много отличных редакторов кода, которые вам подойдут наилучшим образом. Лично у меня есть и Mac и PC, которые я использую вместе в моей повседневной работе. В результате, я имею хорошее представление о доступных вариантах.

17: Когда вебсайт готов, сожмите его!

Сжимая файлы CSS и Javascript, вы можете уменьшить размер каждого файла на значительные 25% или больше. Можно не думать об этом в процессе разработке, но как только сайт более-менее готов используйте несколько онлайновый программ-архиваторов, чтобы сэкономить на трафике.

Сервисы сжатия Javascript

18: Сокращайте, сокращайте, сокращайте

Оглядываясь на мой первый вебсайт, мне кажется, что я страдал запущенной формой "диватита". Сперва, вашим естественным инстинктом будет заворачивать каждый параграф в div , а потом завернуть его еще в один div на всякий случай. Вы быстро поймете, что это крайне неэффективно.

После завершения работы над шаблоном пройдитесь по нему глазами несколько раз и поищите способы уменьшить количество элементов на странице. Обязательно этот UL помещать в свой собственный div ? Думаю необязательно.

Также как и ключ при письме, "сокращать, сокращать, сокращать" - верно и для шаблонов.

19: Все изображения требуют собственные атрибуты Alt

Легко недооценить важность атрибута alt внутри тэгов изображений. Тем не менее, они очень важно по причинам удобства и проверки валидности. Поэтому уделите немного внимание и заполните эти теги.

Плохой вариант

Как сделать лучше

20: Изучайте до последнего

Очень сомневаюсь, что я единственный, кто, в какой-то момент изучения чего-либо, оглядывался по сторонам и осознавал, что я сижу в темной комнате и время где-то уже под утро. Если вы оказались в похожей ситуации, идите отдыхать и будьте уверены, что выбрали правильный путь

Эти удивительные моменты открытия, по крайней мере для меня, всегда происходят поздно ночью. Так же было и тогда, когда впервые понял принцип работы скобок в Javascrip. Это очень приятное чувство, которое вы должны испытать, если еще не испытывали.

Разве есть лучший способ выучить HTML, кроме как копировать ваших героев? По большому счету мы все плагиатчики! Уже потом потихоньку мы начинаем вырабатывать собственные способы и методы. Поэтому посмотрите на сайты тех, кого вы уважаете. Как они выполнили ту или иную секцию? Учитесь и подражайте им. Мы все так делали, делайте так и вы. (Не надо воровать дизайн, просто учитесь из самого кода)

Заметили какие-нибудь классные эффекты Javascript, которые вы хотели бы изучить? Возможно, он использует плагин для отображения эффекта. Просмотрите исходный код и поищите в тэге HEAD имя скрипта. Затем поищите его в Google и поставьте себе на сайт! Ура.

22: Стилизуйте ВСЕ элементы

Это очень важное правило, особенно когда работаешь на клиента. Только потому, что вы не использовали элемент blockquote, не значит, что он не понадобится вашему клиенту. Не используете упорядоченные списки? Это не значит, что ваш клиент тоже не будет. Сделайте себе одолжение и создайте специальную страницу, чтобы покрасоваться вашими стилями для каждого элемента: ul , ol , p , h1-h6 , blockquotes , и т.д.

23: Используйте Twitter

В последнее время я не могу посмотреть телик, не слыша упоминания о Твиттере; он действительно стал вездесущим. У меня нет желания слушать, как Ларри Кинг рекламирует свой аккаунт в Твиттере - который, как мы все знаем, он, конечно, не ведет сам. Ура ассистентам! Также сколько домохозяек создало свои аккаунты после официального одобрения Офры? Нам остается только скучать по тем денькам, когда об этом сервисе и о его потенциале знали лишь некоторые из нас.

Изначально, основной идеей твиттера было записывать "что ты делаешь". Несмотря на то, что это и сейчас остается так в некоторой степени, твиттер больше превратился в сетевой инструмент в нашей индустрии. Если уважаемый мной веб девелопер запостил ссылку на статью, которую он нашел интересной, поверьте, я ее тоже прочту - и вам следует! Вот причина, по которой такие сайты как Digg становятся все больше и больше раздражающими.

24: Изучите Photoshop

Один недавний посетитель Nettuts+ был недоволен за то, что опубликовали рекомендации с сайта Psdtuts+. Он утверждал, что Photoshop не имеет никакого отношения к блогу о веб разработках. Не уверен как там у него, но у меня Photoshop открыт на компьютере круглые сутки.

На самом деле, Photoshop вполне вероятно станет самым важным вашим инструментом. После того как вы выучили HTML и CSS, я бы порекомендовал вам изучить максимальное количество техник Photoshop

25: Изучите каждый HTML тэг

Есть десятки HTML тэгов, с которыми вы не столкнетесь в вашей работе. Тем не менее, это не означает, что вы не должны их знать! Вы знакомы с тэгом abbr например? А как насчет cite? Это два тэга заслуживают своего места в вашем ящике инструментов. Изучите их всех!

Кстати, если вы все-таки не знакомы с этими двумя тэгами:

abbr делает именно то, что от него и ждут. Он означает аббревиатуру. "Blvd" можно обернуть в тэг abbr так как это аббревиатура слова "boulevard".

cite используется для ссылки заголовка какой-либо работы. Например, если вы ссылаете эту статью на ваш собственный блог, вы можете поместить название "30 важнейших правил HTML на новичков" в тэг cite. Обратите внимание, что тэг не стоит использовать для ссылки на автора цитаты. Это распространенная ошибка.

26: Принимайте участие в жизни сообщества

Такие сайты как наш вносят огромный вклад в дальнейший рост знаний по веб разработке, вы тоже должны! Наконец догадались, как корректно разместить элементы на странице? Создайте запись в блоге и научите других как это сделать. Всегда будут те, у кого опыта поменьше, чем у вас. Вы не только будете учавствовать в жизни сообщества, но и сами учиться. Никогда не замечали, что чего действительно не можешь понять, пока тебя не заставили это выучить?

27: Используйте сброс CSS

Вот еще один вопрос, по которому ведутся горячие дебаты. Сброс CSS: использовать или не использовать, вот в чем вопрос. Если вы спросите моего личного совета, я бы 100% рекомендовал бы создать вам ваш собственный файл сброса. Можно начать со скачивания какого нибудь популярного файла, такого как файл Eric Meyer"s, и затем медленно, по мере того как вы учитесь, начать превращать его в ваш собственный. Если вы не сделаете этого, вы не поймете по-настоящему, почему элементы ваших списков получают дополнительное заполнение, которое вы не указывали нигде в вашем CSS файле. Пожалейте себе нервы и просто сбросьте все! Вот вам для начала.

Html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baselinebaseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

28: Выровняйте все!

Вообще говоря, вы всегда должны стремиться как можно лучше выровнять все ваши элементы. Взгляните на примеры ваших любимых дизайнеров. Заметили как каждый заголовок, иконка, параграф и логотип выровнены между собой? Если вы это упустили это верный признак того, что вы новичок. Подумайте по-другому: Если я спрошу, почему вы поместили этот элемент в это место, у вас должна быть точная причина

29: Разберите PSD

Итак, у вас уже есть твердые знания HTML, CSS и Photoshop. Следующим шагом будет конвертация вашего первого PSD файла в рабочий вебсайт. Не волнуйтесь, это не так трудно как кажется. Лучшего способа применить ваши знания на практике просто не придумаешь.

30: Не используйте фрэймворки..Пока

Фрэймворки, будь то для Javascript или CSS прекрасны, но пожалуйста, не используйте их, когда вы еще только начинающий. Хотя и можно утверждать, что jQuery и Javascript можно выучить одновременно, с CSS так сделать не получится. Я всегда советовал 960 CSS Framework, и часто его использую. Имея это в виду, если вы все еще в процессе изучения CSS - а значит только первый год - вы только еще больше запутаетесь, если будете его использовать.

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

• Currently 4.00/5

What does

The Rules Attribute has been Deprecated This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style tables.

RULES , an HTML 4.0 attribute, indicates if there should be internal borders in the table. We"ll go over each of the values of RULES and demonstrate how they are used. RULES and FRAME have an annoying way of changing each other"s defaults. To simplify your life, here"s a rule of thumb: if you use RULES also use FRAME and BORDER . It"s easier to avoid getting confused.

RULES=NONE means that there are no inside borders. RULES=NONE is the default if you don"t use BORDER or set it to zero, but otherwise must be explicitly stated to have no inside borders. Note that currently Netscape does not recognize RULES .

RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID so that there are outer borders but no inner borders.

When applied to a table, that value gives us this result:

COLS indicates that there should be borders between the columns but not between rows.

When applied to a table, that value gives us this result:

RULES=ROWS indicates that there should be borders between rows but not between columns.

When applied to a table, that value gives us this result:

RULES=GROUPS allows you to put borders between groups of table cells. There are two ways cells can be grouped: by row and by column. Let"s go over each of them. Note that currently Netscape does not recognize RULES .

To group by row use the , , tags. indicates the header rows of the table, indicates the main body of the table, and indicates the bottom rows. So, for example, this code creates a table with three groups. Borders appear just between groups:

Here"s how that table renders:

To group by column use the tag and its SPAN attribute. takes a little getting used to because it doesn"t actually go around any table cells. It goes at the top of the table code where it sets rules about the table columns including which are grouped together. to indicates how many columns are in each group. If you leave SPAN out then it is assumed the group has just one column. So, for example, the following code says that the first column is in a group by itself and the three after that are together in a group. Notice that requires an end tag. Borders will go only between the groups.

В хорошо структурированных таблицах стилей нет необходимости присваивать каждому элементу классы. Достаточно лишь более подробно описывать стили элементов, используя возможность вкладывать селекторы в другие селекторы. К слову, такие селекторы называются вложенными и представляют собой объёмную структуру.

Ниже приведён так называемый «подробный CSS», в котором представлена модель вложенности одних селекторов в другие селекторы.

Все это хорошо, но ровно до тех пор, пока имена классов короткие, глубина вложенности не велика, а ваши глаза в состоянии уследить за этой структурой. Лично я, до тех пор, пока не стал пользоваться CSS-препроцессорами, писал код именно так, попутно разделяя CSS-файл на логические блоки и пытаясь уследить за его чистотой. Это удобно и практично, но мне быстро надоедало сортировать код по вложенности, и моя таблица стилей иногда была похожа на мешанину из букв и цифр. Разумеется, что перед финальной сборкой проекта все это исправлялось, но это не тот случай, на который хочется тратить время.

Представьте себе оглавление простейшей книги, например, такое:

1. Глава 1. Это моя первая глава книги 1.1. Это мой первый рассказ о том, что я сделал 1.1.1. Немного подробнее о том, что я сделал 1.2. Это мой второй рассказ о том, что я сделал 1.Х. ...

Здесь довольно легко понять, что пункт 1.1 — это следствие первого пункта. Но тем не менее, если переписать это в более читабельном формате, можно сэкономить время на обработке цифр в голове. Абстрактно, можно представить следующий формат:

Это моя первая глава книги Это мой первый рассказ о том, что я сделал Немного подробнее о том, что я сделал Это мой второй рассказ о том, что я сделал

Именно такая модель вложенности присутствует в Less, когда один селектор, в прямом смысле слова, вкладывается в другой селектор. Таким образом получается легко поддерживаемая, читаемая и приятная глазу структура. Если же попытаться спроецировать такую модель на CSS-код, то она будет иметь вид:

Для большей наглядности я предлагаю обратиться к конкретному примеру, в котором я постараюсь сопоставить классический CSS и Less код.

Здесь я переписал код из примера 2.2.1 , заменяя классический синтаксис на препроцессорный.

На изображении ниже представлена модель вложенности, описываемая в этом примере. Для наглядности и понимания сути происходящего экран разделен на две части, где слева код написан на препроцессорном языке, а справа на «чистом» CSS.

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

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

Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение.

(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.)

Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .

Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .

Описывайте задачу после двоеточия, например: TODO: Задача .

Рекомендуется: {# TODO(Ivan Ivanov): Разобраться с центровкой #} Тест
Рекомендуется:

• Огурцы
• Помидоры

(Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.)

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

W3C HTML validator (англ.) чтобы проверить валидность кода.

Валидность - это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.

Не рекомендуется: Проверка Просто проверка
Рекомендуется: Проверка Просто проверка.

Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.

Это облегчает чтение, редактирование и поддержку кода.

Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст (alt ), а для видео и аудио расшифровки текста и подписи если это возможно.

Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.

(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )

Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.

Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты.

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

Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

Не рекомендуется: HTML sucks HTML Отстой

Я об этом и раньше где-то читал, но теперь точно все ясно: HTML - полная фигня!!1 Не могу поверить, что для того чтобы изменить оформление, нужно каждый раз все переделывать заново.
Рекомендуется: My first CSS-only redesign Мой новый CSS дизайн

Я читал об этом и раньше, но наконец-то сделал сам: Использую принцип разделения ответственности и не пихаю оформление в HTML

Как круто!

Единственное исключение из этого правила - служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов.

(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).

Не рекомендуется: Тратим байты - тратим деньги.
Рекомендуется: Байты-деньги!

Так-то

Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).

Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.

Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:

Независимо от стилей заданных для элемента (CSS позволяет изменить поведение элемента с помощью свойства display ), переносите каждый блочный или табличный элемент на новую строку.

Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.

(Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.

• Маша
• Глаша
• Чебураша

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

Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.

Валидность - это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…

Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…

Шаблонные имена - это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”

Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.

Не рекомендуется: /* Не рекомендуется: не имеет смысла */ #yee-1901 {} /* Не рекомендуется: описание внешнего вида */ .button-green {} .clear {}
Рекомендуется: /* Рекомендуется: точно и по делу */ #gallery {} #login {} .video {} /* Рекомендуется: шаблонное имя */ .aux {} .alt {}

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

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

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

CSS предлагает множество различных сокращенных (англ.) форм записи (например font ), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений.

Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

Не рекомендуется: /* Не рекомендуется */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
Рекомендуется: /* Рекомендуется */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

Не указывайте единицы измерения для нулевых значений если на это нет причины.

Не ставьте 0 в целой части в значениях между -1 и 1.

Не используйте кавычки ("" , "" ) с url() .

Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.

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

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

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

Не рекомендуется: /* Не рекомендуется: слова “demo” и “image” не разделены */ .demoimage {} /* Не рекомендуется: используется подчеркивание вместо дефиса */ .error_status {}
Рекомендуется: /* Рекомендуется */ #video-id {} .ads-sample {}

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

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

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

Всегда ставьте отступы для любого блочного содержимого (англ.) , Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.

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

Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.

Начинайте каждый селектор или объявление с новой строки.

Всегда ставьте перенос строки между правилами.

По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.

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

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

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

Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.

Спасибо всем кто дочитал до этого места.

Теги: Добавить метки

Как написать правильный CSS-код?

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

Ниже смотрите 15 золотых правил для написания удобного и профессионального CSS-кода

CSS-reset - это некий фрагмент кода, который пишется вначале нашего файла стилей, в котором обнуляются все значения, и задаются все основные параметры для всех стилей, которые нам, скорее всего пришлось бы прописывать для каждого конкретного id/class. Это позволяет укоротить код впоследствии, а также избежать различий в отображении браузерами.

Вот пример CSS-Reset, взятый со страницы http://meyerweb.com/eric/tools/css/reset/index.html

/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } /* remember to define focus styles! */:focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need "cellspacing="0"" in the markup */ table { border-collapse: collapse; border-spacing: 0; }

К примеру, чтобы писать длинное

Border-top: 5px; border-right: 10px; border-bottom: 15px; border-left: 20px;

мы можем записать коротко:

Border: 5px 10px 15px 20px;

то есть по часовой стрелке начиная сверху.

В основном сокращают border, margin, padding, font и background.

подробней об этом вы можете посмотреть

А вот цвета можно сокращать так:

Если кода цвета состоит из 3х повторяющихся цифр, то можно записать просто три этих цифры.
На примере: #FFFFFF можно записать как #FFF, или #990055 можно записать #905, а #F091A4 сократить нельзя.

Используйте комментарии везде, где следует — они очень помогают упорядочить код, делая его более понятным для себя и для того, кто будет с ним работать

Выглядит это примерно так:

/* Ваш комментарий здесь */

Комментируйте:

а) Заголовок страницы стилей — пишите кто автор кода и когда он был написан

б) Отмечайте разделы стилей — это упорядочит весь код по разделам.
Например:

в) Комментируйте проблемные места. Например те, где страница может иметь отличия в разных бразуерах.например:

Input /* IE6 Problem */

г) Пишите маленькие комментарии тем, с кем работаете — например, когда нужно что-то доработать.

На маленьких css-файлах не сложно отслеживать все цвета сайта.
А что делать, если у нас код на 5000 строк? — ведь нельзя допускать использования не тех цветов.
Для этого существует легенда цветов — то есть список тех цветов, которые мы используем в нашем файле. Например:

/* /* светлый синий: #4595be /* тёмный синий: #367595 /* красный для ссылок: #9F1212 ********************************/

В этих понятиях путается большинство начинающих верстальщиков, но есть правило, которое позволяет избежать путаницы.

Position:absolute позиционирует объект относительно страницы — и неважно, где он расположен в HTML-потоке. По умолчанию это значение 0 слева и 0 сверху.

Обычно этот вариант не используется - ибо неудобен и ограничен в опциях. А вот что вам пригодиться - если задать родителю («обёртке») нашего элемента Position:realtive, то Position:absolute будет выравниваться уже Относительно верхнего левого угла родителя . Так что можете проставлять это свойство по-необходимости. Наглядно на картинке:

Порой такие браузеры, как IE6 и IE7 просто вынуждают нас использовать хаки. Хаки - сразу ошибка для валидатора. Так что выносите из в специальные css-файлы для каждого браузера.
Специальные записи для хаков каждому браузеру и как их выносить в отдельные файлы можно посмотреть

На это не так часто обращают внимание, но это помогает избежать проблем в различных браузерах.

Идея следующая: вместо использования padding’а у родителя, мы используем margin для дочерних-элементов. Так, вместо

#main-content { padding-left: 10px }

#main-content { } #main-content #left-column { margin-left: 10px }

Ничего неправильно в использовании padding’а, но опыт показывает, что лучше всё же margin

Если вы ходите приписать элементу float, то его родителю пишите overflow:hidden

Ul { overflow: hidden; } ul li { float: left; }

Без этого свойства элемент может обтекаться некрасиво — также проблемы могут возникнуть при задании margin’ов или border’ов.

Если вы хотите, чтобы элемент не обтекался - указываем clear:both ниже обтекаемого элемента. Часто это используют вместо overflow: hidden;

Довольно известная проблема в IE6 с удваиванием margin’ов у float-элементов. То есть если нам нужно 20px, то приходится писать 10px, ибо этот отступ удваивается. Хотя IE6 уже приказывает долго жить, и многие дизайнеры не тратят время на то, чтобы оптимизировать сайт под него, всё же небольшой кусочек кода сделает отображение в нём приятней. Итак, ставим

Display: inline /* IE6 Problem */

для элемента, к которому применён float

Картинки-спрайты - очень удобная вещь. Они дают представление обо всей графике страницы, и снижают время загрузки.

Если знаете английский, то вот

Потратьте время на то, чтобы сделать структуру сайта понятной. Раскидайте всё по полочкам.
Например:

Здесь «Website Name» - имя сайта, с которым мы работаем. Эта папка содержит HTML-файлы для сайта, плюс папки assets и styles .
В папке assets содержаться файлы, которые можно скачать с сайта, например, архивы или PDF-файлы. В папке styles содержаться, в свою очередь, папки css, images, javascript.

• css - содержит все файлы css, например, reset.css, layout.css и main.css
• images - все картинки сайта. Эту папку тоже можно разбить по разделам.
• javascript - все javascript-файлы.

Эта схема приблизительна, и можно её отображать по-разному. Мысль в том, что она помогает вам рабоать быстрее и делает сайт понятнее и аккуратнее.

Необязательный совет - Название классов и id стилей лучше писать, соблюдая древовидность, чтобы всё было понятно и наглядно.

Всё довольно просто - пиксели меньше нагружают код, так как документу не придётся высчитывать проценты относительных величин.

Проблема относительных величин — в передаче этой относительности.
Чтобы было понятно, разъясню на примере:

body { font-size: 62.5% } значит font-size: 1em, то есть 10px.

Если #blog-content нужен 14px, прописываем:

#blog-content { font-size: 1.4em; }

Теперь если H3 тег внутри #blog-content нужен нам 20px, то его можно было бы задать так:

#blog-content { font-size: 1.4em; } #blog-content h3 { font-size: 2.0em }

Всё бы хорошо, но у нас действует относительность. И эти 2.0em применяются к 1.4em
#blog-content’a , и в итоге, размер мы получим 28px.

Так что используйте фиксированные величины .

Новые браузеры не имеют данной проблемы, всё упирается в ряд старых браузеров во главе с IE6.
Проблема заключается в том, что в старых браузерах псевдо-классы (такие как:hover) работают только применительно к тегу a , тоесть

#header ul li:hover { background-color: #900 }

не работает в IE6

Эта проблема устраняеться с jQuery

Используйте селекторы где это возможо

Например, используйте вместо

#main-content.main-header

#main-content h1

Будьте осторожны с группировкой селекторов

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

Если на это примере всё в порядке,

Main-content div,.main-content p { color: #000; }

То на этом — будьте внимательны с относительными величинами.

Main-content div,.main-content p { line-height: 1.3em; }

Чтобы написать успешный код, избегайте постоянного оборачивания одного в другое и тд.
Учите теги h1, ul и p.
Ключ к успеху прост - это практика, практика, практика

Удачно тренироваться)