Если вы хотите стать экспертом CSS, недостаточно уметь пользоваться селекторами CSS. Оно также заключается в общем планировании работы, освоении рабочего процесса и повышении удобства сопровождения и эффективности таблицы стилей. В этой статье Джина Болтон выбирает 10 техник применения CSS от 12 лучших дизайнеров и рекомендует их всем.
В последнее время я искал способы создания более привлекательных таблиц стилей. Используя CSS, мы можем создавать замечательные веб-сайты, которые хотим, а написание CSS само по себе доставляет удовольствие.
Как создать более привлекательную таблицу стилей? Какие функции должна иметь ваша таблица стилей?
Несколько месяцев назад я имел удовольствие присутствовать на конференции Web Vision 2007 в Портленде, штат Орегон, США. Для этого мероприятия я исследовал 12 дизайнеров, которые внесли выдающийся вклад в веб-дизайн и разработку. Результаты этого исследования в сочетании с моим собственным опытом работы помогли мне обобщить ряд хороших методов создания красивых таблиц стилей.
01. Не позволяйте CSS иметь слишком много тегов
Связывание или импорт таблиц стилей может показаться запутанной задачей. Но я хочу подчеркнуть, почему это так важно. Я видел, как многие разработчики веб-сайтов имеют аккуратные и хорошо организованные CSS-документы, но медленно, потому что они не могут быстро обновляться за короткий период времени или просто слишком ленивы, чтобы управлять ими, изысканными таблицами стилей, созданными ранее. Стали мусором.
Представьте, что вы работаете над огромным веб-сайтом, на котором необходимо публиковать сотни фрагментов контента. Поскольку время ограничено, вам необходимо быстро вносить изменения или обновления путем вложения или упорядочения CSS. Проходит год за годом, и эта привычка продолжается, пока однажды вам не сообщат, что сайт будет полностью переработан (но контент останется прежним), и у вас будет всего неделя на его создание (включая тестирование).
Обычно обновление таблицы стилей — очень простой метод. Если только вы не вносите изменения в разрозненные области сайта в течение длительного времени. Вы не можете иметь общее представление о структуре таблицы стилей веб-сайта. Итак, теперь у вас есть два варианта: а. Организовать все и перепроектировать в течение месяца (удачи); б. Найти новую работу.
Не позволяйте вашей работе стать такой. Связывание или импорт вашей таблицы стилей — дело не случайное. Создайте чистую и аккуратную таблицу стилей и храните ее там, и вы будете счастливее на работе.
Примечание. Не добавляйте слишком много разметки в таблицу стилей. Если вы пытаетесь создавать новую таблицу стилей каждый раз, когда обновляете или добавляете новый контент, вы определенно напрашиваетесь на проблемы. Слишком большое количество ссылок и импортированных таблиц стилей затруднит устранение ошибок и затруднит поддержку вашей таблицы стилей. Понятно, что крупные веб-сайты создают отдельные таблицы стилей для разных частей. Только будьте осторожны и не впадайте в крайности.
Стоит отметить, что добавление большого количества таблиц стилей приведет к увеличению количества http-запросов, что также может повлиять на последующую работу. Кроме того, браузер Microsoft IE6 имеет определенные ограничения на таблицу стилей с 32 соединениями. .
02. Семантика – это не просто отраслевое слово.
Знаете, я должен об этом упомянуть: семантика будет вашим хорошим другом. Помимо выбора наиболее подходящих и значимых элементов для выражения вашего контента, вы также должны убедиться, что вы выбрали значения атрибутов class и id. За пределами вашей работы это упростит вашу жизнь (а также упростит жизнь вашей рабочей команды, если вы работаете в команде). Взгляните на определение ниже:
.l13k {цвет: #369};
Если бы вы только пришли на работу и увидели этот класс в этом CSS-файле, вы бы сразу нашли этот класс? Вероятно, это невозможно, потому что имя этого класса, вероятно, является аббревиатурой, поэтому у вас нет точного способа сразу его сказать. Или, может быть, вы положили это туда и знаете, что это значит сегодня, но можете ли вы гарантировать, что вы все равно будете знать, что это значит, много лет спустя?
Теперь давайте посмотрим на это определение:
.left-blue { цвет: #369 };
Вы, вероятно, сразу поймете, что делает этот селектор классов, так же, как вы узнаете, что там есть синий модуль в левом столбце, а это означает, что он работает. Ранее я упоминал, что вам, возможно, придется изменить дизайн через неделю. Во время редизайна этот модуль поместили справа и по-прежнему был красным. Этот класс больше не имеет ценности существования. Итак, теперь мне придется выбирать: либо изменить все значения атрибутов, либо оставить это в покое. (Это может привести к еще большей путанице.)
Лучше не добавлять к атрибутам класса цвет или размеры длины и ширины. Вам следует избегать любых значений свойств, которые являются буквальными словами. Прямые атрибуты (например, поле) могут привести к разделению контента.
Наконец, давайте посмотрим на более подходящее соглашение об именах:
.product-description { цвет: #369 };
Здесь вы можете это увидеть. Описание продукта, определенное в этом стиле, очень четкое, независимо от того, как вы его измените.
03.Преимущества добавления комментариев
Если ваши комментарии хорошо организованы и соответствуют CSS, четко обозначьте каждый раздел. Лучше всего обеспечить, чтобы комментарии были визуально заметными, чтобы их можно было быстро найти при прокрутке содержимого и просмотре десяти строк. Тогда комментирование вашего CSS-документа окажет большую помощь вам или другим в будущей разработке. Большинство простых комментариев подскажут, почему здесь используется это правило.
Советы и примечания
Добавление комментариев может помочь вам или будущим разработчикам избежать ненужной путаницы. Продолжайте эту привычку. См. пример:
/* Отключаем границы для связанных изображений */
изображение {граница: 0;
Время и подпись
Некоторые дизайнеры и разработчики любят указывать дату и время последнего обновления документа CSS, а также его имя и исходное состояние. Эта информация может предоставить вам информацию о том, кто был вовлечен, а также подсказку о самой последней документации.
/* Стили оформления суши-монстров
Обновлено: Чт 18.10.07 в 17:15
Автор: Джина Болтон
-------------------------------------------------- --*/
Это хорошая идея, особенно если вы работаете в команде. Имейте в виду, что некоторым командам необходимо опускать эту информацию (некоторые компании предпочли бы не указывать эти имена и даты в документе). Поэтому рекомендуется просто взять посмотрите, нужна ли эта информация?
Классификация организаций
Хорошая идея — использовать комментарии для краткого описания различных частей вашего CSS. Например, если все типы заголовков сгруппированы вместе, вам нужно будет посмотреть на них, чтобы различить их.
/* ЗАГОЛОВОК
-------------------------------------------------- --*/
Я расскажу об этом позже, когда буду обсуждать «различение типов».
Маркировка аннотаций
Если ваш документ CSS содержит разбросанные стили, как я уже сказал выше, пометка комментариев может помочь вам упростить поиск этой части файла. Вы можете использовать символы функций, ключевые слова и найти конечный результат.
/* =ЗАГОЛОВОК
-------------------------------------------------- --*/
Это полезно в длинных и сложных таблицах стилей. Об этом можно прочитать в Stop Design. .
обратитесь к