Главная → Программирование → by

70 экспертов Идеи для лучшего кодирования CSS

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

Мы взяли внимательно посмотреть на некоторые из наиболее полезных приемов CSS, советы, идеи, методы, приемы и кодирования решений и перечислил их ниже.Мы также включили некоторые базовые техники, вероятно, можно использовать в каждом проекте вы разрабатываете, но которые трудно найти, как только вам нужно them.

А что из этого получится представляет собой обзор свыше 70 экспертов CSS ideas которая может улучшить вашу эффективность CSS кодирования.Вы могли бы желать, чтобы проверить список ссылок и статей в конце этого post.

Мы бы хотели выражаем искреннюю благодарность всем designers кто разделяет их идеи, приемы, методы, знания и опыт со своими читателями.Спасибо, мы, программисты, дизайнеры, разработчики, архитекторы информацию – Вы называете это – действительно ценю it.

Вы могли бы быть заинтересованы в чтении нашей статьи 53 CSS-методов, которые Вы не могли бы жить Without, который должен предоставить вам основных инструментов для CSS на основе методов, которые Вы можете использовать в вашем следующем projects.

Update (29/05/2007): бразильский португальский перевод article также доступны.Благодаря Маурисио Samy Silva.

1.1.Workflow: Получение Started

  • После того, как дизайн, начать с чистой страницы content. “Включить заголовки, ваша навигация, образец контента и футер.Затем начинаем добавлять ваши HTML-разметки.Затем начинаем добавлять ваши CSS.Он работает намного лучше “[ CSSing].
  • Использование мастера stylesheet. “Одна из самых распространенных ошибок, я вижу, начинающих и промежуточных жертвой, когда дело доходит до CSS не удаление стилей браузера по умолчанию.Это приводит к несогласованности в Появление вашего дизайна во всех браузерах, и в конечном итоге оставляет много дизайнеров обвиняют браузера.Это неуместно винить, конечно.Прежде чем делать что-либо другое, когда кодирования веб-сайта, вы должны сбросить стиль “[ Мастер стилей: Самые полезные CSS Technique]., [Ryan Parr] 
    master.css
@import url("reset.css");
@import url("global.css");

@import url("flash.css");
@import url("structure.css");
    <style type="text/css" media="Screen">
/*\*/@import url("css/master.css");/**/
</style>
  • Сброс CSS-стили first. “Вы часто можете избавиться от необходимости указывать значениесобственности, воспользовавшись значение по умолчанию этого свойства.Некоторые люди, как делать Глобальный пробел reset путем обнуления как поля и отступы для всех элементов в верхней части их стилей.[ Роджер Johansson]
  • Хранить библиотеки полезным CSS classes. Полезные для отладки, но следует избегать в версии (отдельная разметка и презентации).Так как вы можете использовать несколько имен классов (т.е. <p class="floatLeft alignLeft width75">...</p>), использовать их отладку разметки.( Updated) [ Ричард К. Miller] 
    CSS:
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
  • Эрик Мейер Глобальный Reset христианские Монтойя начальной CSS file Mike Rundle первоначальные CSS file Ping Mag первоначальные CSS file.

1.2.Организуйте свой CSS-code

  • Организуйте свой CSS-стилей, с помощью мастер стиля sheets. “Организация вашего CSS помогает будущим сопровождения сайта.Начните с таблицей стилей мастера.В этом импорт таблиц стилей ваш reset.css global.css flash.css (при необходимости) и structure.css и по случаю лист типографии стиле.Вот пример из “мастер” стилей и как он встроен в документ: “ 
    h2 { }
#snapshot_box h2 {
	padding: 0 0 6px 0;
	font: bold 14px/14px "Verdana", sans-serif; }
#main_side h2 {
	color: #444;
	font: bold 14px/14px "Verdana", sans-serif; }
.sidetagselection h2 {
	color: #fff;
	font: bold 14px/14px "Verdana", sans-serif; }
  • Организуйте свой CSS-стилей, используя flags. “Разделите ваш стиль в конкретных разделах: т.е. глобальный стили — (тело, абзацы, списки и т.д.), Header, Page структура, заголовки, стили текста, навигации, формы, комментарии, Доп.[ 5 советов для организации вашего CSS] 
    /* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
  • Организуйте свой CSS-стилей, что делает таблицу contents. В верхней части документа CSS, выписать содержание.Например, вы могли бы обрисовать в различных областях, что ваш документ CSS стилей (заголовок, основной, подвал и т.д.).Затем, используя большой, очевидный разрыв раздела для отделения области.[ 5 шагов к CSS Heaven]
  • Организуйте свой CSS-стилей, заказ свойств alphabetically. “Я не знаю, откуда у меня эта идея, но я алфавитном порядке моего CSS свойства в течение нескольких месяцев, а верить или нет, он делает определенные свойстваГораздо проще найти “[ христианские Montoya]. 
    body {
	background: #fdfdfd;
	color: #333;
	font-size: 1em;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
  • Отдельный код в blocks..”Это может быть здравый смысл для некоторых из вас, но иногда я смотрю на CSSи это не разбивается на “разделы.” Это легко сделать, она позволяет работать с кодом недель, месяцев или лет спустя намного легче.Вы должны будете легче найти классы и элементы, которые нужно изменить.Примеры: /* Structure */ /* Typography */ и т.д. “[ CSS советы и Tricks]
  • Hook, линия, и sinker. Если у вас есть CSS и разделов в место начала рассмотрения вашего выбора, где «крючков» будет жить с помощью структурных крючки в знак вверх.Это ваша спасительная благодать для будущего редактирования и обслуживания сайта.Это также даст вам силы в документе “[Ryan Parr]
  • Перерыв таблицы стилей в отдельных blocks. “Я сломать мою стилей на три отдельных блока.Первый прямой объявления элемента.Изменение тела, некоторые ссылки стили, некоторые стили заголовков, сброс и внутренние поля на формах, и так далее.[...] После объявления элементов, у меня есть заявления класса, такие вещи, как классы для сообщения об ошибке или выноски пошел бы сюда.[..] Я начинаю, заявив, мой главный контейнеров и то любые стили для элементов внутри этих контейнеров с отступом.На первый взгляд, я вижу, как моя страница разбита и делает его легче знать, где искать вещи.Я также заявляю контейнеры, даже если они не имеют никаких правил “[ Джонатан Snook].

1.3.Workflow: Обработка идентификаторов, классов, селекторы, Properties

  • Хранить контейнеры в minimum. “Сохранить документ из структурных раздуваться.Новые разработчики будут использовать много дел похожа на ячейки таблицы для достижения макета.Воспользуйтесь многие структурные элементы для достижения макета.Не добавляйте больше Div.Рассмотрим все варианты, прежде чем добавлять дополнительные обертки (дел), чтобы достичь эффекта при использовании немного отличный CSS вы можете получить тот же самый желаемый эффект “[Ryan Parr]
  • Хранить свойства minimum. “работать умнее, а не тяжелее с CSS.Согласно этому правилу, есть ряд подправил: если не точку, чтобы добавить свойства CSS, не добавляйте его, если вы не уверены, почему вы добавляете свойство CSS, не добавляйте;и если вы чувствуете, как вы добавили тем же свойством во многих местах, выяснить, как добавить его только в одном месте “. [ CSSing]
  • Хранить селекторы minimum. “Избегайте ненужных селекторов.Использование меньше селекторов будет означать меньше селекторов будут необходимы, чтобы переопределить любой конкретный стиль — это означает, что это легче для устранения “[ Джонатан Snook].
  • Хранить CSS хаки minimum. “Не использовать хаки, если его известны и документированы ошибка.Это важный момент, поскольку я слишком часто вижу хаки заняты, чтобы исправить то, что недействительно нарушается в первую очередь.Если вы обнаружите, что вы ищете рубить, чтобы исправить определенные проблемы в вашей конструкции, то сначала сделать некоторые исследования (Google является вашим другом здесь) и попытаться определить проблемы у вас возникли проблемы с.[ 10 Советы по проще CSS life]
  • Использование CSS Константы для быстрого development. “Понятие константы — фиксированные значения, которые могут быть использованы в коде [полезно].[..] Один из способов обойти отсутствие констант в CSS заключается в создании некоторых определений в верхней части вашего CSS файла в комментарии, чтобы определить «константы».Общего пользования для этого является создание “цветных глоссарий.Это означает, что у вас есть быстрая ссылка на цвета, используемые на сайте, чтобы избежать использования их заместители по ошибке, и, если вам нужно изменить цвет, у вас есть краткий список, чтобы спуститься и сделать поиск и замену “[Рэйчел Andrew] 
    # /*
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
  • Использование общих имен system. Имея систему наименования для идентификаторов и классов позволяет сэкономить много времени при поиске ошибок, или обновлении документа.Особенно в больших документах CSS, вещи могут стать большими заблуждение быстро, если ваши имена у всех разные.Я рекомендую использовать parent_child шаблон.[ 10 CSS Tips]
  • Назовите классы и идентификаторы должным образом, в соответствии с их semantics. “Мы хотим избежать имен, которые подразумевают презентационные аспекты.В противном случае, если мы что-то правильное имя подполковника, вполне возможно, что CSS изменится и наш “правый столбец” будет в конечном итоге фактически отображается в левой части страницы.Это может привести к некоторой путанице в будущем, так что это лучшее, что мы можем избежать этих типов презентационные схемы именования.[ Garrett Dimon]
  • Группа селекторы с общими CSS declarations. “Группа селекторов.Когда несколько типов элементов, классов или ID: доля некоторых свойств, вы можете сгруппировать селекторы чтобы не указывать те же свойства в несколько раз.Это позволит сэкономить пространство — потенциально многое из него “[ Роджер Johansson].
  • Изолировать одного свойства, которые вы, вероятно, повторно lot. “Если вы будете использовать одно свойство много, изолировать его, чтобы спасти себя повторять это снова и снова, а также позволяет изменить отображениеВсе разделы сайта, которые используют его “[ 5 шагов к CSS Heaven].
  • Move идентификаторы и имена классов, как далеко вверх по дереву документов, как вы can. Плечо контекстуальныеselectors как можно больше.Не бойтесь быть подробным в вашем селекторы.Более длинные селекторы CSS может сделать документы более удобными для чтения в то же время сокращая риск развития класса или divitis.[ Chric Casciano]
  • Научитесь использовать каскадный характер CSS. “Скажем, у вас есть два похожих коробок на ваш сайт с незначительными различиями – Вы могли бы написать CSS стиль каждого окна, или вы могли бы написать CSS стиль как нато же время, затем добавить дополнительные свойства ниже, чтобы сделать один выглядеть по-другому ». [ 5 шагов к CSS heaven]
  • Use Your утилиты. Tags: <small> <em> и <strong> “Много раз вы будете иметь раздел в ваш дизайн, который вызывает различные типографские веса / смотрит все на той же линии, илиочень близко друг к другу.падение в случайном дивы и классы, потому что я чувствую, что они не семантические и победить цель вашего хорошим XHTML и везде “. Вместо этого, используйте семантические теги.[ Mike Rundle в 5 CSS Tips]

1.4.Workflow: использовать сокращенную notation

  • Сократить цвета шестнадцатеричным notation. “В CSS, когда вы используете шестнадцатеричный цвет и цвет состоит из трех пар шестнадцатеричных цифр, вы можете записать его в более эффективный способ, опуская каждую вторую цифру: #000 is the same as #000000, #369 is the same as #336699 [ Роджер Johansson]
  • Определение псевдо-классы для ссылок в LoVe/HAte-order: Link, посетил, Hover, Active.”Чтобы убедиться, что вы видите ваше различных стилей ссылке, Вам лучше всего положить ваши стили в порядке” ссылка посещаемых наведении активными “, или” LVHA “для краткости.Если вы беспокоитесь о фокусе стилей, они могут пойти в конце, но ждать, пока вы читали это объяснение, прежде чем вы решите “[ Эрик Meyer]. 
    a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
  • маржи Определение элемента, обивка или границы в мутной-order: сверху, справа, снизу, слева.”При использовании сокращенной указать края элемента, обивка или границы, делайте это по часовой стрелке сверху:. Top, Right, Bottom, Left” [ Роджер Johansson]
  • Вы можете использовать сокращенный properties. “Использование сокращение для margin padding и border свойств может сэкономить много пространства. 
    CSS:
margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
    CSS:
border: width style color;
border: 1px solid #000;
    CSS:
background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;
    CSS:
font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5.Workflow: Установка Typography

  • Для работы с ЭМ как с PXS, установить шрифт size на теле-тега с 62,5% .По умолчанию, значение font-size является 16px; применения правила, вы получите один Em стоять примерно десять пикселей (16 х 62,5% = 10).”Я стараюсь поставить размер шрифта на теле тега значение: 62,5%.Это позволяет использовать ЭМ указать размеры, думая в терминах PX, например,1.3em примерно 1.3px.”[ Джонатан Snook]
  • Использование универсального набора символов для encoding.«[..] Ответ заключается в использовании единого универсального набора символов, который в состоянии охватить большинство случайностей.К счастью, он существует: UTF-8, которая основана на Unicode.Unicode является отраслевым стандартом, который предназначен для включения текста и символов из всех языков, которые будут последовательно представлены и манипулировать с помощью компьютеров.UTF-8 должны быть включены в голове вашей веб-страницы, как это.[ 20 про tips] 
    <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  • Вы можете изменить капитализации использованием CSS. Если вам нужно что-то написано в столицах, таких как заголовок, а не переписывать копию, пусть CSS сделать осла работы.Следующий код превратит весь текст h1 атрибутом во всех столицах, независимо от их формата ».[ 20 про tips] 
    h1 {
	text-transform: uppercase;
}
  • Вы можете отображать текст в капитель automatically. font-variant свойство используется для отображения текста в капителью шрифтом, который означает, что все строчные буквы преобразуются в заглавные буквы, но всеБуквы в капителью шрифтом имеют меньший размер шрифта по сравнению с остальным текстом. 
    h1 {
	font-variant: small-caps;
}
  • Покрыть все основания – определяют общий шрифт families. “Когда мы объявляем определенного шрифта, используемого в нашем проекте, мы делаем это в надежде, что пользователь будет иметь, что шрифт, установленный в их системе.Если они не имеют шрифта в их системе, то они не будут видеть это, просто.Что нам нужно сделать, это ссылка шрифты, которые пользователь скорее всего, придется на своих машинах, таких, как те, в семейство шрифтов собственности ниже.Важно, что мы закончим список с универсальным типом шрифта.[ Начало в хорошем кодировании habits] 
    p {
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
  • Использование 1.4em – 1.6em для line-height. “line-height:1.4” для читаемой линии, разумная линия длины, что избежать линий гораздо больше, чем 10 слов и цветов, которые обеспечивают контрастность, не будучи too далеки друг от друга.Например, чисто черного на белый часто бывает слишком сильным для ярких дисплеев CRT, поэтому я стараюсь, чтобы пойти с грязно-белого (#fafafa является хорошим) и темно-серый (#333333, другой хороший).”[ христианские Montoya]
  • Set 100,01% за html-element. Эта странная 100,01% значения для размера шрифта компенсирует несколько ошибок браузера.Во-первых, установка шрифтов по умолчанию размер тела в процентах (вмес …

    Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


    Главная → Программирование → by

Comments are closed.