[Ликбез] |
Форма входа |
Меню сайта |
Categories | ||||
|
Главная » Статьи » Web-кодинг » CSS |
Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки. Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны. Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи. Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями. 1.1 Кодинг: НачинаемКогда дизайн готов, начните с
пустой страницы. Добавьте заголовки, навигацию, пример
содержимого, и футер, потом добавьте Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей. Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию. [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] master.css Code @import url("reset.css"); Создайте библиотеку вспомогательных
классов. Полезные для отладки они должны быть исключены
в окончательной версии (разделяйте разметку
и оформление). Можно использовать сразу несколько имен классов
( Code .width100 { width: 100%; } 1.2 Организация CSSИспользуйте главный файл
стилей. Организация CSS упрощает поддержку сайта.
Начните с главного файла стилей в нем импортируйте
Code h2 { } Используйте флаги. Разделяйте файл CSS на секции, например, Global Styles – (параграфы, списки и т.д.), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS] Code /* -----------------------------------*/ Создавайте таблицу содержимого. В начале файла CSS, создайте таблицу содержимого. Стоит выделить различные разделы (header, main, footer etc), разделитель разделов должен быть хорошо заметным. [5 Steps to CSS Heaven] Упорядочивайте свойства в алфавитном порядке. Не знаю, кто подал мне эту идею, но я упорядочиваю свойства в алфавитном порядке, это упрощает их поиск. [Christian Montoya] Code body { Разделяйте код на блоки. Для многих это очевидно, но иногда я все же встречаю CSS не разделенные на блоки. Эта не сложная операция значительно упрощает работу с кодом недели, месяцы и годы спустя. Примеры: "/* Structure */, /* Typography */ etc." [CSS Tips and Tricks] Используйте хуки. Несмотря на то, что вы разделяете CSS на блоки, не помешает и использование структурированных хуков. [CSS Tips and Tricks] Разделяйте файл CSS на блоки. Я разделяю код на три разных блока, в первом определения для отдельных элементов, тела документа, ссылок, заголовков, сброс параметров по умолчанию, после этого идет блок с определениями для классов, третьим идет блок, в котором определены стили для основных контейнеров, я создаю определения для контейнеров, даже если они не содержат никаких правил. [Jonathan Snook] 1.3 Кодинг: Работа с идентификаторами, классами, селекторами и свойствамиСводите число контейнеров к минимуму. Предохраняйте структуру документа от разрастания. Новички часто используют много div`ов как будто это ячейки таблицы, не повторяйте эту ошибку, используйте и другие элементы для создания разметки. Обдумайте все возможности прежде чем добавлять новый div, часто можно избежать этой необходимости используя некоторые свойства CSS. [Ryan Parr] Сводите к минимуму число свойств. Работайте умнее, а не тяжелее с CSS. Это правило включает несколько подправил: если не уверенны нужно ли добавлять свойство не добавляйте его, если не уверены, зачем добавляете свойство не добавляйте его, если видите, что свойство используется в разных местах, подумайте нельзя ли его добавить только один раз. [CSSing] Сводите к минимуму число селекторов. Исключите необязательные селекторы. Чем меньше используется селекторов, тем меньше селекторов необходимо для переназначения стилей и тем проще исправить проблемы. [Jonathan Snook] Сведите к минимуму количество хаков. Используйте только хорошо известные и документированные ошибки в браузерах. Часто мне приходится видеть хаки там, где они не нужны, поэтому прежде чем использовать хак исследуйте свою проблему (в этом вам может помочь Google). [10 Quick Tips for an easier CSS life] Используйте константы для ускорения разработки. Константы это фиксированные значения, которые можно использовать в коде. Один из способов обойти отсутствие констант в CSS, использовать комментарии в начале файла, чтобы определить «константы». Очень удобно определять, таким образом, цвета и быстро заменять их значения по всему документу с помощью «поиска и замены». [Rachel Andrew] Code # /* Используйте систему имен. Использование системы для имен идентификаторов и классов может сохранить много времени при исправлении багов, и обновлении документов. В больших CSS документах можно быстро запутаться, если имена абсолютно разные и не придерживаются системы правил. Я рекомендую использовать паттерн parent_child. [10 CSS Tips] Давайте классам и идентификаторам семантические имена. Необходимо исключить имена, отражающие оформление. Если назвать элемент «right-col», всегда есть вероятность что после изменения CSS «right-col» будет отображаться с левой стороны страницы, в таком случае недоразумения неизбежны, лучше исключить имена отражающие оформление. [Garrett Dimon] Группируйте селекторы с общими атрибутами. Если несколько элементов, классов или идентификаторов используют одно и то же свойство, можно сгруппировать селекторы чтобы не указывать это свойство несколько раз. [Roger Johansson] Изолируйте свойства, которые собираетесь использовать несколько раз. Если необходимо часто использовать одно и то же свойство, изолируйте его чтобы не повторять каждый раз, к тому же это даст возможность изменять оформление всех элементов сайта использующих его. [5 Steps to CSS Heaven] Используйте идентификаторы и классы как можно выше в иерархии документа. По возможности, используйте комбинированные селекторы, не бойтесь использовать длинные селекторы. Длинные селекторы могут сделать CSS более понятным и уменьшают шансы class- или div- мании. [Chric Casciano] Учитесь использовать каскадную природу CSS. Представьте, что у вас есть два похожих элемента с минимальными отличиями - вы можете создать CSS для каждого из них, или создать один CSS для обоих, а потом использовать дополнительные свойства, чтобы один из них выглядел иначе. [5 Steps to CSS heaven] Используйте теги
1.4 Кодинг: Используйте сокращенияКраткие шестнадцатеричные
представления цвета. В шестнадцатеричных
представлениях цветов, которые состоят из трех пар одинаковых
цифр, можно пропустить каждую вторую цифру,
Определяйте псевдо классы для ссылок в порядке LoVe/HAte:Link, Visited, Hover, Active. Чтобы упорядочить определения псевдо классов для ссылок размещайте их в порядке «link-visited-hover-active», или если короче «LVHA». Псевдо класс «focus», может быть помещен в конце этого списка, но прочитайте это объяснение, прежде чем использовать его. [Eric Meyer] Code a:link {color: blue;} Определяйте margin, padding
или border в порядке
TRouBLed:Top,
Right,
Bottom,
Left. При использовании стенографических
свойств Используйте стенографические
свойства. Используйте стенографические
свойства Code margin: top right bottom left; Code border:width style color; Code background: color image repeat attachment position; Code font: font-style (italic/normal) font-variant (small-caps) 1.5 Кодинг: ТипографикаЧтобы работать с em как с px, установите font-size для тега body 62.5%. Размер шрифта по умолчанию 16px используя это правило, мы задаем величину em равную примерно 10px (16 x 62.5% = 10). Это позволяет легко задавать в em размеры соответствующие пиксельным величинам, к примеру 1.3em примерно равно 13px. [Jonathan Snook] Используйте универсальную кодировку символов. Хотелось бы использовать одну универсальную кодировку символов подходящую для большинства случаев. К счастью она существует, это UTF-8, которая основана на Unicode. Установить кодировку страницы можно с помощью следующего кода. [20 pro tips] Code <meta http-equiv="content-type" content="text/html;charset=utf-8" /> Управляйте регистром с помощью CSS. Если нужно чтобы текст был написан заглавными буквами, вместо того чтобы переписывать его позвольте сделать эту работу CSS. Следующий код трансформирует все заголовки в верхний регистр. [20 pro tips] Code h1 {text-transform:uppercase;} Используйте малые прописные
с помощью CSS. Свойство
Code h1 {font-variant:small-caps;} Предусматривайте все возможности — указывайте тип шрифта. Когда указан конкретный шрифт, который должен использоваться в дизайне, это делается в надежде на то, что этот шрифт установлен у пользователя, но нужно предусмотреть и случай когда необходимого шрифта нет, для этого можно определить альтернативные шрифты, как показано ниже, очень важно закончить список типом необходимого шрифта. [Getting into good coding habits] Code p {font-family:Arial,Verdana,Helvetica,sans-serif;} Используйте 1.4em - 1.6em для
высоты строки. Чтобы сделать текст читабельным
используйте
Устанавливайте размер шрифта 100.01% для элемента html. Значение 100.01% для размера шрифта компенсирует несколько багов в различных браузерах. Во-первых, установка размера шрифта в процентах (вместо em) исключает проблему в IE/Win с непропорциональным ростом или уменьшением размера шрифта, если он будет установлен в em для других элементов. Во-вторых, некоторые версии Opera могут отображать 100% шрифт слишком мелко по сравнению с другими браузерами. С другой стороны у Safari проблемы с размером шрифта 101%. Сейчас лучшее решение это использовать значение 100.01% для этого свойства. [CSS: Getting into good habits] 1.6 Кодинг: ОтладкаДобавляйте border чтобы
увидеть контейнеры. Используйте тестовые стили, такие
как границы или цвет фона при отладке документа. Хорошо работает
Code * {border:1px solid #f00;} При отладке в первую очередь проверяйте, все ли элементы закрыты. Если после незначительных изменений в коде ваша прекрасная разметка сломалась, причиной тому может быть незакрытый элемент. [10 CSS Tips] 2.1 Технические хитрости: Идентификаторы, Классы1 ID, много классов. Идентификаторы, идентификаторы элементов должны быть уникальны в пределах страницы, напротив множество элементов могут использовать одно и то же имя класса. Имена классов и идентификаторов могут содержать символы A-Z, a-z, 0-9 и дефис (-), не могут начинаться с дефиса или цифры (смотрите спецификацию CSS2) [Roger Johansson] Имена элементов, используемые в селекторах, чувствительны к регистру. При использовании CSS с документом XHTML, имена элементов в селекторах чувствительны к регистру, чтобы избежать неприятностей я рекомендую использовать нижний регистр для имен элементов в CSS селекторах. Имена классов и идентификаторов чувствительны к регистру и в HTML и в XHTML, поэтому избегайте смешивания регистров в селекторах. [Roger Johansson] Классы и идентификаторы должны быть правильными. Имена классов и идентификаторов должны начинаться с буквы, идентификаторы должны быть уникальными, их имена должны отражать функциональность элемента, а не его оформление. [CSS Best Practices] Можно использовать несколько классов для одного элемента. Это позволяет написать несколько правил, определяющих различные свойства, и применять их по необходимости. [Roger Johansson] 2.2 Технические хитрости: Используйте все возможности селекторовRoger Johansson опубликовал чрезвычайно полезную серию статей о селекторах в CSS 2.1, некоторые полезные моменты перечислены ниже. Селекторы дочерних
элементов. Селектор дочернего элемента указывает
на элемент, который является непосредственным потомком другого
элемента, данный селектор состоит из двух или более селекторов
элементов разделенных знаком «>»,
родительский элемент располагается слева от этого знака.
Следующее правило действительно для всех элементов
Code div > strong {color:#f00;} Селекторы соседних элементов. Селектор соседних элементов состоит из двух простых селекторов и символа «+» между ними. Данный селектор указывает на элемент, следующий за первым. Элементы должны имеет один и тот же родительский элемент и первый элемент должен располагаться непосредственно перед вторым. [Roger Johansson] Code p + p {color:#f00;} Селекторы атрибутов. Эти селекторы можно использовать для сопоставления правил к элементам на основании наличия или значения атрибутов. Есть четыре способа использования селекторов атрибутов. [att] [att=val] [att~=val] [att|=val] Следующее правило применяется
ко всем элементам p для которых определен атрибут
Code p[title] {color:#f00;} Селектор сопоставляющий правило всем
элементам Code div[class=error] {color:#f00;} Можно использовать и множественные
селекторы атрибутов, это дает возможность отбора элементов
по нескольким атрибутам. Ниже представлен пример правила
применяемого к элементам blockquote которые имеют атрибут
класс в точности равный " Code blockquote[class=quote][cite] {color:#f00;} Используйте селекторы потомков. Селекторы потомков помогут избежать использования множества классов в разметке. [Roger Johansson] 2.3 Технические хитрости: Оформление ссылокБудьте осторожны
со стилями для ссылок. Обратите внимание
на то, что классический якорь
( Указывайте отношение
документов для ссылок. Атрибут
Code a[rel~="nofollow"]::after { Здесь мы используем селектор
атрибутов для списка значений разделенных пробелами. Ссылки, для
которых установлен
Внешние ссылки можно
отметить автоматически. Многие использует нестандартное
значение
Code a[href^="http://"]:not([href*="smashingmagazine.com"])::after {content: "\2197"; Убрать
точки вокруг ссылок можно с помощью
Code a:focus { outline: none; } 2.4 Технические хитрости: CSS-техникиИспользуйте идентификатор для
тега body. Во многих случаях использование
идентификатора для тега
С помощью CSS можно создавать колонки одинаковой высоты. Техника создания колонок одинаковой высоты без использования фоновых изображений. Создание колонок одинаковой высоты с помощью фоновых изображений. Вертикальное
выравнивание с помощью CSS. Представьте, что
у вас есть элемент меню высотой 2em, вы можете легко
отцентрировать текст по вертикали, задав
Используйте
псевдо элементы и классы. Псевдо
классы и псевдо элементы можно использовать для
форматирования элементов не представленных в иерархии
документа, например, нет таких элементов как первая строка параграфа
или первая буква строки. Можно использовать псевдо классы
Использование
изображения для тега Можете использовать один и тот же (X)HTML код для навигации на всех страницах. Многие сайты подсвечивают в навигации текущее местонахождение пользователя, но это может быть неудобно потому что необходимо менять HTML код навигации на каждой странице. Можно ли этого избежать? [Ten More CSS Tricks you may not know] Code <ul> Добавьте идентификатор к тегу
Code #home .home, #about .about, #contact .contact { Используйте
Code <div id="wrap"> Code #wrap { Добавить CSS стили можно и к RSS. Можно сделать намного больше используя XSL, но и CSS сделает RSS более привлекательными. [Pete Freitag] Скрыть CSS
от старых браузеров. Чтобы скрыть CSS файл
от старых браузеров используйте директиву
Code @import "main.css"; Всегда устанавливайте margin и padding для блочных элементов. [10 CSS Tips] Устанавливайте
width или margin и padding.
Я использую следующее правило, если устанавливаю для элемента
Исключите одновременное применение padding/borders и width к элементам. IE5 неверно использует модель представления документа в виде блоков, это может привести к тому, что страница превратиться в мешанину. Один из способов исправить эту проблему применять padding к родительскому элементу, а width к дочернему. [CSS Crib Sheet] Предоставляйте стили для печати. Добавить файл, содержащий стили для печати можно точно таким же способом, как и обычный файл CSS: Code <link rel="stylesheet"type="text/css" href="print.css" media="print"> Code <style type="text/css" media="print">@import url(print.css);</style> это гарантирует, что эти стили будут использоваться только для печати и не повлияют на внешний вид страницы на экране. В стилях для печати необходимо использовать черный текст на белом фоне и удалить все лишние элементы. 15 минут на подготовку к печати, More about CSS-based print-Layouts. [20 pro tips] 2.5 Технические хитрости: Исправляем баги IEПоддержка полупрозрачных PNG в IE. Теоретически изображения в формате PNG поддерживают различные уровни прозрачности, но отсутствие их поддержки в Internet Explorer 6, не позволяет широко использовать это их достоинство. [CSS Tips, Outer-Court.com] Code #regular_logo
Code #container В IE можно использовать условные комментарии. Самый безопасный способ задать специальные стили для IE/Win это использоватьусловные комментарии. Использование условных комментариев вместо хаков сводит вероятность проблем в будущем к минимуму. Так их можно использовать чтобы подключить файл стилей, содержащий исправления для IE/Win [Roger Johansson] Code <!--[if IE]> Кодинг: Поиск вдохновенияЭкспериментируйте с CSS. Экспериментируйте с фоновыми изображениями, цветами, наследованием, выравниванием и селекторами. Play with positive and negative margins. [Chric Casciano] Учитесь у других. Исследуйте хорошие сайты, HTML код любого сайта легко доступен, смотрите какие методы используют другие разработчики и перенимайте те которые могут быть полезны и вам. [20 pro tips] Источники и полезные ресурсы
| |
Всего комментариев: 1 | ||
| ||