Блог Ошибки верстальщиков при написании css

Разберём ошибки, которые порой допускают как начинающие так и опытные html-верстальщики при  написании css. Ведь совершенствоваться никогда не поздно.

Нет предварительного анализа макета сайта

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

Использование для фона больших изображений

Часто разработчики используют для фона большие  CSS изображения. Если есть возможность, используйте небольшое изображение и делайте для него repeat в CSS.

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

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

Игнорирование сокращений в коде

Сокращенный код ускоряет общую обработку страницы. Простой пример сокращённого написания:

  • padding:5px 10px 0; правильно
  • padding:5px 10px 0 10px; неправильно

Сокращения также можно использовать для fonts, margins и borders.

Не использование комментариев

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

Применение излишней анимации

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

Пробелы

Вес css файла можно значительно уменьшить, если оптимизировать код и удалить лишние пробелы.

Валидация кода

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

Оригинал: http://blog.pixelcrayons.com/css/what-to-avoid-while-creating-css/

Комментарии

Alex Panshin 05 августа 2013 года, 13:29 #

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

Крайне спорно. Разбивайте файлы с умом и склеивайте перед выкладыванием в продакшн. Мы в студии так вообще пользуемся LESS.

Обилие маленьких файлов дает нам возможность выносить комментарии-разделители блоков в название файла.

webmolot 05 августа 2013 года, 13:59 #

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

Марат 07 августа 2013 года, 5:53 #

статья ни о чем

webmolot 07 августа 2013 года, 9:33 #

Марат, автор статьи всего лишь напомнил некоторые моменты верстки, про которые не стоит забывать.

Akmaljon 13 октября 2013 года, 19:10 #

Да!!! Эти моменты все знают!!! Напоминание не повредит!!!!

Юрий 23 апреля 2014 года, 15:06 #

Сокращенный код ускоряет общую обработку страницы
совершенно неверное утверждение, сокращаем только css файл — браузеру все равно: padding:0 он интерпретирует как padding:0 0 0 0, тоже касаемо font, background — разложит на конкретные правила, (font-size;line-height;font-family)

webmolot 24 апреля 2014 года, 11:28 #

Юрий, сокращенный код браузер быстрее прочитает, чем длинный, поэтому и обработает его быстрее. Все просто.

Владислав 26 июля 2014 года, 21:31 #

использование большого количества файлов css плохо сказывается на производительности.

Можно разбить стили на несколько файлов и подключить их в отдельном css-файле через @import.

Дмитрий 13 февраля 2015 года, 19:40 #

>> Не использование комментариев

Это для любителей БЕМ бесспорно жизненно необходимо, чтобы не задохнуться нечаянно :D

Евгений Несмелов 09 октября 2015 года, 14:55 #

Информация, которую должен знать каждый. +1

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com