Каковы некоторые из наиболее распространенных ошибок, сделанных CSS-дизайнерами?
Общими ошибками для CSS-дизайнеров во избежание?
Ответ 1
Не использовать reset файл.
"Цель таблицы стилей reset заключается в уменьшении несогласованности браузера в таких вещах, как высоты строк по умолчанию, поля и размеры шрифтов заголовков и т.д."
-Эрик Мейер, Meyerweb.com
Ответ 2
Не осознавая до года (как я), вы можете применять более 1 класса за раз.
.Center {text-align:center}
.Disco {background: red; text-decoration: blink;}
.Highlight { font-weight: bolder;}
<div class="Disco Center Highlight"></div>
Действителен, и он будет их комбинировать.
Ответ 3
Думаю, что:
<div class="topMargin15"></div>
с
.topMargin15 {
margin-top: 15px;
}
Является каким-то образом и улучшением над написанием его непосредственно в атрибуте style. Предполагается, что вы определяете, что это такое в HTML, и как оно выглядит в CSS.
Ответ 4
Незнание селекторов.
Например, если у вас есть куча ссылок в нижнем колонтитуле, которые вы хотите отличать от обычных ссылок, не ставьте класс на каждый из них, используйте селектор потомков.
// instead of this
.footerlink {
}
// use this
#footer a {
}
Вы также можете группировать селектора с запятыми:
#header a, #footer a {
}
Другие полезные селектора включают:
- дочерний селектор:
E>F - sibling selector:
E+F - селектор атрибутов:
input[type="text"] - первый класс псевдо-класса:
:first-child(невероятно полезно для заголовков - вы не хотите, чтобы первый заголовок в div имел верхний предел, но вы делаете его для последующих заголовков)
К сожалению, эти последние несколько не работают в IE6, поэтому используют только прогрессивное повышение (если вы поддерживаете IE6).
Ответ 5
Использование CSS-хаков вместо условных комментариев при написании стилей для IE.
Ответ 6
Не проверять кросс-браузер при разработке.
Лучше всего поймать и исправить различия до того, как весь сайт будет выполнен.
Я потерял счет "Мой сайт отлично смотрится в Firefox/IE/Safari, но все это испортилось в IE/Safari/Firefox". вопросы.
Ответ 7
Невозможно понять каскад и наследование, в результате получилось много повторяющегося кода.
Ответ 8
-
Не зная, какие селектора есть, или как правильно их использовать
-
Использование слов для обозначения цветов (не все браузеры знают все слова)
-
Использование недопустимых стилей (дополнение: авто например)
-
Запись #ffffff вместо #fff. (Это 3 пары, которые могут быть сжаты всего 3 одиночных значения)
-
Не использовать # в шестнадцатеричных цветах
-
Не убедитесь, что ваша страница не сломается при использовании при масштабировании на 150% -200%. старый люди/Почти слепые люди используют интернет тоже.
-
Не используйте достаточный контраст или бело-пространство
-
Не проверять разметку /css
-
Убедитесь, что ваша страница сильно ухудшается
-
Вызывая себя дизайнером CSS, вы не разрабатывают таблицу стилей, вы разработка веб-сайта путем внедрения таблица стилей.
-
Использование абсолютного позиционирования (это собираюсь выглядеть испорченным на чьем-то компьютер, где-то)
-
Не сохраняйте таблицу стилей аккуратной и организовано. Не слушайте эти веб-сайты, которые все на одной линии, потому что это экономит полосу пропускания. Вы должны держать его как вы считаете это проще всего читать и изменить, а затем сжать его, когда вы закончили.
-
Не помещать кавычки вокруг длинного шрифта имена
Забыл, мой плохой
- Уход за IE6. Каждый раз, когда вы утверждаете, что он должен быть поддержан или что люди еще не обновили, что их вина, может быть, если бы все выглядело испорченным, они были бы более мотивированы, чтобы загрузить что-то, что не было кучей PILE OF SHIT. Я мог бы написать 20-страничное эссе о том, насколько я ненавижу IE6, и я не шучу. Однажды я написал экс-боссу 5-страничное эссе о том, почему IE - худший браузер для использования. Он перенаправил его всем своим друзьям, и теперь все они используют Firefox или Safari.
(Я ушел после того, как он сказал мне, что хочет, чтобы его веб-сайт выглядел как его ведущий веб-сайт компании. Это был отличный веб-сайт и даже имел оригинальный музыкальный балл, который играл, когда вы проходили через галереи. например, 15 долларов США/час (я был в старшей школе) и только разрешил мне входить в работу 9 часов в неделю.)
Ответ 9
Непонимание или даже отсутствие специфики селектора.
body div a.mylinkclass { }
более конкретна, чем
a.mylinkclass { }
Ответ 10
Не использовать Firebug
Ответ 11
не понимая, что такое float, как правильно их использовать и как их очистить!
Ответ 12
Не использовать CSS Sprites эффективно или даже вообще.
Ответ 13
Не учитывать интернет-исследователей сломанная модель коробки в режиме quirks.
Ответ 14
Не устанавливать ширину для плавающего div s.
Не каскадирование стилей.
Ниже приведено не:
body { color:#ff0; }
h2 { color:#ff0; text-decoration:underline; }
Это будет лучше
body { color:#ff0; }
h2 { text-decoration:underline; }
#ff0 будет автоматически применен, если не будет помешано в некоторых других определениях стиля.
Ответ 15
Не сжимать производственный код компрессор YUI
Ответ 16
- Использование устройств, которые не работают с экранами с высоким разрешением.
- Не использовать полную ширину экрана
- Не использовать таблицу стилей печати, которая скрывает все, кроме содержимого, которое пользователь хочет распечатать.
Ответ 17
Использование имен классов, которые являются слишком специфичными и недостаточно универсальными. Например.
.redLeftNewsHeader
а не
.header
Что происходит, когда вы решаете переделать свой сайт с синей темой? Что происходит, если вы хотите использовать класс для элементов, не связанных с новостями?
Ответ 18
Использование "0px" вместо "0". Теперь я считаю себя довольно хорошим с CSS, и все же я все еще иногда это делаю...
Пример:
"padding: 0px" вместо "padding: 0"
Ответ 19
- Попытка сделать что-либо с CSS, когда браузер находится в режиме quirks.
- Не использовать средства Firebug для просмотра макета ваших элементов и уточнения CSS.
- Создание контейнеров с фиксированной высотой и отсутствие переполнения.
- Попытка использования прозрачного PNG-24 в IE6. (Adobe Fireworks может создавать прозрачные PNG-8, которые работают в IE6.)
- Не использовать единицы вообще (очень плохо!).
Ответ 20
Не рассматривайте свою аудиторию.
Ответ 21
Я бы сказал, используя неправильное использование float и не понимая столбцы. Вы можете калечить этот вид вещей очень легко (личный опыт.), Так что yah... float и clear's.
Ответ 22
Применение font-size, font-family или других свойств, которые должны применяться на уровне block до inline, таких как a или span.
Чтобы привести пример Как только этот тип css используется:
a {font-size:12px} /* NEVER! NEVER DO THAT */
В любое время вы хотите использовать что-то вроде:
<h2>Something about <a href='...'>this</a> and <a href='...'>that</a></h2>
Вам также потребуется добавить селектора для:
h2 a {font-size:/*same size as for h2*/}
Я знаю, это может показаться очевидным и основным, но я видел это слишком много раз.
Единственный момент, когда ваш span или a должен манипулировать размерами шрифтов, - это специальный класс css, используемый для того, чтобы все выглядело иначе:
a.different {/* do crazy stuff with your fonts */}
Ответ 23
Попытайтесь использовать для поля элемент margin или padding, а не оба. Вы можете избавиться от некоторых проблем с браузером.
Ответ 24
Написание писем плохой HTML