А вы совершаете эти 10 CSS-ошибок?

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

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

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

2. Не принимают в расчёт маленький размер браузера.

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

Расчёт и на меньшие размеры означает, что все посетители будут счастливы и найдут то, что ищут у вас.

3. Отвержение фреймворков (Frameworks - каркасы).

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

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

4. Не используем Универсальные классы?

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

Вы можете использовать Универсальный класс, например:

.right{float:right}

Чтобы вещи выравнивались правильно. Тогда вы задаёте стиль блока DIV ID, например:

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

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

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

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

5. Валидный (грамотный) HTML

Спорю, что вы не знали о том, что проверка вашего HTML кода может также влиять на ваш CSS, не так ли? Первое и главное: вы не можете проверить ваш CSS на валидность, пока не проверили HTML. Второе, много случаев, когдо проблемы именно в HTML, а не в CSS. Не закрыли DIV здесь, не прописали правильно название CSS класса… всё что угодно может быть.

6. Проверка CSS на валидность (корректность).

Раньше я постоянно тревожил друга a friend , чтобы он помог с проблемами CSS, которые портили мои макеты. Он всегда спрашивал меня “Этот CSS корректен? если нет, то какие проблемы?” Скоро я приучил себя проверять код validate the CSS перед тем, как просить Томаса помочь, и обычно проверка показывала мне проблемы. Если ваш CSS код проходит проверку на валидность, скорее всего он будет совместим с браузерами и не испортит внешний вид сайта.

7. Гигантские фоновые картинки

Очень частоа молодые дизайнеры вставляют большие картинки фоном в свои макеты. Например, 3,000px X 5,000px , чтобы охватить все возможные размеры браузеров . Вместо этого можно использовать повторяющуюся маленькую картинку с некоторой магией CSS. Разница велика: вместо загрузки 200 Кб картинки, загружаться будет картинка весом несколько байтов и множиться с помощью CSS.

8. CSS для всего

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

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

9. Встроенный (Inline) CSS

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

Вместо этого используйте (в случае отладки, или теста):

<a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a>  

link

Разделить стили и дизайн, создав класс:

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

link

10. Избыток CSS файлов.

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