Делаете ли вы эти основные 10 ошибок CSS?
1. Игнорирование совместимости браузеров.
Это, возможно, проблема номер один для веб-разработчиков. Ведь сейчас браузеров развелось огромное количество и нельзя с увереностью сказать, что сделанный вами сайт не будет просматриваться каким-то экзотическим софтом. Вернее, наоборот, ваш сайт обязательно будет открыт в куче различных инет-обозревателях. Конечно, на их все ориентироваться при разработке не стоит, но обязательно стоит уделять внимание IE6, IE7, FireFox >2, Google Chrome, Safari и при возможности Opera. Также, рекомендуется перед релизом проекта обязательно просмотреть его через Browsershots и оценить внешний вид по скриншотам в различных версиях браузеров.
2. Не учитывается маленькое разрешение экрана
Конечно, в наш век, когда космические корабли бороздят просторы Вселенной, а на столе у каждого веб-разработчика стоит хороший монитор в 17, 19, ато и больше дюймов, не следует забывать, что много народа сидит на разрешении экрана 800*600. Тем более с появлением различного рода устройств, позволяющих серфить инет, но не имеющим надобности поддерживать большое расширение эта проблема становится особенно актуальной. Сделайте всех посетителей вашего сайта счастливыми.
3. Не использование фреймверков
Если вы пишите каждый раз код с нуля, то должны задаться таким вопросом: “Почему?” Существует куча фреймверков CSS, так что есть из чего выбрать и потом применить.
Зачем каждый раз изобретать колесо?
4. Используйте общие классы
Существует, пусть и небольшое, множество классов, которые используются фактически на всех проектах.
К примеру, это могут быть:
1 2 3 4 | .right {float:righ} .clear{clear:both} .left{float:left} /* и т.д. */ |
Зачем каждый раз придумывать им новые имена или заново переписывать? Вынесите их, к примеру, в отдельный файл, а потом юзайте посредством копипаста в других проектах.
5. Не валидный HTML
Уверен, вы не знали что валидация вашего HTML может повлиять на CSS. В самом начале перед проверкой на валидность CSS обязательно отвалидируйте ваш HTML код. Примеров когда невалидный HTML тянет за собой CSS очень много. Допустим, мы не закрыли DIV и получили неправильный CSS класс — это может быть все что угодно. Всегда проверяйте CSS только после того, как довели до ума HTML.
6. Не валидный CSS
Очень часто причина в том, что хаки под различные “ослы” пишутся в одном файле. Выносите их в отдельный файл и подключате при помощи условных комментариев.
7. Использование “жирных” фоновых изображений
Не забывайте про repeat в свойстве background. Иногда можно просто вырезать полоску и размножить ее в нужном направлении — и мы получим нужный фон. Также не забывайте использовать фоновый цвет — иногда он может помочь сэкономить десятки килобайт.
8. Использование CSS везде и всегда
CSS нужен для того, чтобы облегчить работу разработчика и по возможности ее ускорить. Иногда можно и нужно использовать таблицы, от которых уже почти все отказались, но…
9. Использование инлайнового CSS
Это зло встречается очень часто. Стили всегда должны быть вынесены в CSS. Знаю, очень часто хочеться прописать “style=” и понеслась, особенно если надо изменить какой-то один параметр изображения, но не надо. Пересильте себя и создайте еще один класс.
Например, вместо
1 | <a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a> |
можно написать
1 | <a href="somewhere.html" class="link_style">link</a> |
а стили вынести в CSS. Согласитесь, выглядит красивее, да и вдруг чего — легко можно все поменять.
10 . Подключаем слишком много файлов
Приходилось ли вам видеть сайт с 12-ю подключаемыми CSS-файлами? Это кошмар для того, кому надо будет что-то когда-то подправить в этом проекте. Используйте один, ну максимум 2-3 файлов.
Вольный перевод: Are You Making These 10 CSS Mistakes?
