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

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

Работа с CSS может казаться нескончаемой борьбой. Браузеры всегда меняют способ чтения кода, и кажется, что есть множество мелких 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
 

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>  

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

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

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

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

 

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (2)     Подпишитесь на RSS комментариев к этой статье.

2 комментариев

#647
Василий говорит:
September 23, 2012 at 09:40 pm
Одни советы очевидны (для большинства даже начинающих) другие вредны (4 и 10 в особенности)! Мой совет - читайте хабр.
#648
almix говорит:
September 24, 2012 at 11:45 am
Василий, объясните чем вредно задать классы .right, .left и не плодить много файлов стилей, пожалуйста.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.