Не совершаете ли вы эти ошибки в CSS?

Работа с CSS может напомнить постоянную битву. Браузеры постоянно корректируют свой способ чтения кода (кхе-кхе, Internet Explorer, кхе-кхе), и кажется, что существует огромное множество всяких CSS «заковырок». Хотя CSS — невероятно мощный язык, он может быть легко использован некорректно, что может негативно сказаться на жизни вашего проекта.

1. Игнорирование кроссбраузерности

Вероятно, это главная проблема в веб-разработке. Ваш макет должен всегда выглядеть одинаково независимо от браузера, который использует конечный пользователь для перемещения по страницам. Этот факт может показаться проклятьем вашей жизни: есть фундаментальные различия рендера страницы в Internet Explorer и в Firefox. Конечно, сейчас все не так плохо, как когда-то, но различий между браузерами по-прежнему много.

Самый простой путь для веб-разработчика: делать макеты в своем любимом браузере и не беспокоиться, как все это будет выглядеть в других основных браузерах, т.к. скорее всего различий практически не будет. (Я сам грешу этим. Делаю макет в Firefox и не смотрю его в IE до тех пор, пока полностью не закончу.) Хотя существуют инструменты, предназначенные для проверки отображения вашего макета в различных браузерах. И самый простой способ — использование Browsershots. Browsershots делает скриншоты нужного сайта на различных платформах и браузерах, позволяя вам убедиться в том, что с макетом все в порядке.

2. Отсутствие поддержки малого разрешения экрана

Хотя многие веб-разработчики имеют большие мониторы,и очень гордятся этим, значительная часть посетителей сайта не сможет им пользоваться. Вы можете посмотреть статистику разрешения монитора посетителей (Google Analytics справится с этим великолепно). Тем не менее, существует огромная разница в том, как выглядит дизайн при разрешении 1024х768, в отличие от 800х600. Этот факт может испортить красивый дизайн.

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

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

3. Отказ от Framework‘ов

Если вы разрабатываете макет с нуля, вам захочется спросить себя, почему. Т.к. нет ничего нового под солнцем, не стоит каждый раз «изобретать велосипед». Есть множество фреймворков вроде Blueprint framework и 960 CSS Framework. Они помогут вам сделать пуленепробиваемый макет, не начиная каждый раз с самого начала. Эти фреймворки кроссбраузерны и тщательно протестированы. Правда, если вы делаете нечто совершенно радикальное, требующее индивидуальной доработки кода, используйте CSS-фреймворки.

Зачем изобретать колесо?

4. Неиспользование общих классов

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

Вы можете использовать общий класс:

.right{float:right}

Это позволит в любом случае сохранить направление обтекания блоков:

<DIV id="block_text" class="right"></DIV>

По крайней мере, я использую 3 общих класса при создании макета:

.clear{clear:both}   
.right{float:right}   
.left{float:left}

5. Невалидный HTML

Уверен, вы даже не подозреваете, что валидация HTML может повлиять на CSS, не так ли? Ну, это возможно. Перво-наперво, вы не можете проверить свой CSS, пока не проверите HTML. Во-вторых, есть много случаев, когда источником проблем становится HTML, а не CSS. Часто мы думаем, что это CSS так изменяет нам макет, хотя это всего-навсего некорректный HTML. Незакрытые DIV‘ы, неправильно названные классы CSS.. это может быть что угодно! Убедитесь, что с вашим HTML все в порядке, прежде чем проверять CSS.

6. Невалидный CSS

Я постоянно беспокоил друга , когда у меня возникали проблемы с CSS. Он терпеливо спрашивал меня каждый раз: «CSS валиден? Если нет, то какие ошибки?» А потом я научился проверять CSS до того, как обращаться к Томасу. В большинстве случаев, это помогало исправить все ошибки.

Если у вас валидный CSS, вы получите гораздо более кроссбраузерный CSS.

7. Использование огромнейших фоновых изображений

Часто начинающие дизайнеры используют просто огромнейшие изображения в макетах. Например, 3000х5000 пикселей для учета любого размера окна браузера. Ведь можно вместо огромнейшей картинки использовать маленький повторяющийся кусочек. Разница огромна: вместо загрузки картинки в 200 килобайт, можно подгрузить картинку на несколько байт и размножить ее средставми CSS.

Если вы используете огромные фоновые изображение, вы проиграете в 2 моментах:

  1. Лишний траффик
  2. Увеличение времени загрузки страницы

Иногда использование огромных изображений неизбежно. Но использование повторяющихся картинок или сплошная заливка цветом на практике более предпочтительны.

8. Использование CSS для всего

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

Как веб-разработчики, мы можем увязнуть в технологии, пытаясь сделать что-то передовое и прогрессивное, тогда как мы можем использовать различные технологии гораздо проще и эффективнее. Например, порой проще использовать таблицу для организации данных, чем возводить сложную конструкцию из плавающих DIV‘ов. Мы должны помнить, для чего мы используем технологию CSS — она должна уменьшить время разработки. Когда технология начинатет тянуть вниз, можно легко оказаться за бортом.

9. Использование CSS внутри HTML-кода

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

Вместо этого:

<A href="somewhere.html" style="float:right;color:#333">link</A>

Вы должны вынести оформление во внешний файл:

<A href="somewhere.html" class="link_style">link</A>

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

10. Использование большого количества CSS-файлов

Вы когда-нибудь видели макет с 12 CSS-файлами? Это настоящий кошмар для тех, кто решит внести изменения в оформлении макета. Так же при загрузке страницы браузер вынужден будет сделать отдельный запрос для каждого файла. Гораздо лучше использовать схему с одним-двумя файлами. Не заставляйте поминать вас плохими словами человека, который будет после вас корректировать макет.

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

Перевод статьи: Are You Making These 10 CSS Mistakes?

Комментарии (RSS)

Сергей10.07.2010 02:34№1

К счастью, я не совершаю таких ошибок :)
кроме кроссбраузерности в IE6 =)
Статья хорошая для новичков :)

buy fake hermes belt kong18.10.2014 20:38№2

buy fake hermes belt kong ehjtqyoftp replica hermes review dogon wallet pxyoqgpzs