Re-Велоспорт Buzzword и в веб-разработке, это означает не отличается. Это экономит энергию, с точки зрения усилий!
За годы написания CSS и HTML с созданием дизайна, я следовал несколько передового опыта, в погоне за экономию времени и энергии на то, что мы обычно термин, как "Re изобретать колесо". Снова и снова, я сказал себе, что я должен создать несколько шаблонов, некоторые стандартные повторного использования CSS, что я буду использовать OUT OF THE BOX в моей будущей работе. Хотя и не полностью, но мне удалось достичь некоторых целей.
В дальнейшем, повторное использование CSS, я посмотрел на несколько рамок CSS, которые обычно доступны для нас, и решил положить их использовать, так как они испытанный и созданные много опытных разработчиков, чем я сам. Что еще более важно "избежать повторного изобретения".
Хотя известно, к ветеранам, я попытался пером некоторых ключевых понятий / передовой практики / мысли, что пошло на создание этих структур, чтобы сайклинг-процесса в CSS это возможно. Надеюсь, это поможет некоторым CSS-разработчиков, которые вот-вот, а недавно сел победившей CSS!
Ключи Re-круговорот CSS:
Используйте соглашения об именовании
Это должно быть самым важным фактором в создании CSS / HTML повторного использования. Предоставление соответствуют имена элементов страницы позволяет повторное использование компонентов страницы и их стили с небольшим или модификации. В соответствии с этим аргументом, даже HTML5, к значительному изменению изменения сравнению с его предшественниками, является введение некоторых структурных именно теги. <article>, <section>, <header>, <aside> и <nav> [ Что HTML5 с собой? ]. Даже с HTML 4 (или ниже), то лучше всего назвать стандартные разделы страницы consistanly как в простом примере ...
Помните, что большинство страниц вашего проекта, в конечном итоге с той же основных структурных элементов. Определить эти общие элементы страниц основного ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Сброс по умолчанию стилей (CSS Сброс): Используете ли вы структуру или написать свой собственный, вы должны предоставить CSS сброс [ Что такое CSS сброс? ], так как они снижают, а иногда и устранения визуальных несоответствий, которые возникают между различными браузерами. Говоря простыми словами механизм CSS Reset устанавливает стили HTML элемента к нулю или нулевой ценности, таким образом переопределить любой браузер по умолчанию значения они могут позах. Это позволяет с чистого листа, чтобы установить свойства этих элементов лишено всякой User-Agent по умолчанию [ CSS 2.1 User Agent по умолчанию стилей ]. Все CSS рамки действительно есть механизм сброса. Если Вы пишете вы владеете CSS сброс, слово предостережения, что если вы случайно забыли сбросить ключевое свойство, это может привести к кросс-браузерные проблемы, которые очень трудно отлаживать. Помните, что Сохраните копию сброса стилей и поместите их в каждый новый проект, который вы создаете.
тело, дел, дл, DT, DD, ул, ол, Ли,
h1, h2, h3, h4, h5, h6,
предварительно, форма, набор полей, ввод, SELECT, TEXTAREA,
р, цитаты, таблицы, я, ТД
{
границы: 0px;
маржа: 0;
обивка: 0;
} Установить по умолчанию (базовый Styles) для элементов:
После установки (к нулю или нулевой) по умолчанию значения определенных атрибутов определенных элементов HTML, необходимо применить некоторые стили во всех случаях этих элементов. Это значение по умолчанию может варьироваться в соответствии с дизайном или по лучшей практике вы будете следовать.
Большинство CSS основы, всегда вводит новые значения по умолчанию, кроме сброса стилей браузера по умолчанию.
Эти значения по умолчанию быть лишен User-Agent по умолчанию (убраны на Reset CSS), это будет соответствовать во всех браузерах.
Помните, что базовый стили используются для задания стилей, которые будут использоваться разработки мире. например.
HTML {размер шрифта: 77%; семейство шрифтов: Arial, без засечек;}
сильный, h1, h2, h3, h4, h5, h6 {шрифта: жирный;} Аннотация стилей для HTML Общие компоненты и общие классы:
Большинство проектов, состоящих из нескольких страниц HTML имеют общие элементы, которые используются по всему сайту, например, для Какие-то формы, предупреждения и сообщения об ошибках, пользовательские всплывающие окна, лайтбоксы и т.д. Поскольку такие компоненты используются снова в разных проектах, это будет полезно для обеспечения набор классов, связанных с предопределенными стилями для этих компонентов, и вы можете сэкономить много времени.
Помимо определения многоразового определения стилей для HTML общих компонентов, мы могли бы абстрактные классы стилей, относящихся к типографии, цвета кожи или даже макет. Я сам как правило вы используете ... общие классы, как Clearfix, Font08, FontGrey, AlignL, DisplayB и т.д.
формы ввода {границы: 0px; фон: # FFFFFF; обивка: 0px 10px; _padding: 0px 0px; высота: 26px; цвет: # 000000; высота строки: 30px; размер шрифта: 1.1em;}
Форма текстовую {границы: 0px; фон: # FFFFFF; цвет: # 000000; размер шрифта: 0,9 ет, высота строки: 1.5em; переполнение: видимый;}
. Fbold {шрифта: жирный, цвет: # CCCCCC;}
. Fgrey {цвет: # 666666;}
. Flightgrey {цвет: # bbbbbb;}
. Clearfix {ясно: оба;}
. Делитель {границы сверху: 1px твердых # 647B06, нижней границы: 1px твердых # 9CC00A, высота: 0px;}
. Displayb {Дисплей: блок;}. Displayn {дисплей: нет;}
. Alignr {выравнивания текста: справа}. Alignc {выравнивания текста: центр}
. Floatr {float: право;}. Floatl {float: left;} Исправления к общим причуды браузера
Различные браузеры реализации CSS код и предоставляют различный уровень поддержки спецификации CSS. В результате этого .... "Browser совместимости", что мы разработчики оставили решать. В частности, IE6 преследует большинство CSS кодеров со сроком встретиться. Хорошей новостью является опыт собрал возможно МНОГОРАЗОВЫХ исправления этих проблем (часто называется как CSS хаки ).
Помните, что Храните эти хаки / исправления удобно
/ * Следующие зум: 1 правило специально для IE6 + IE7. * /
* HTML. Clearfix,
*:. Первого ребенка + HTML Clearfix {
зум: 1;
} Держите Уточнение CSS
- Привычка сайклинг-не придет к вам в день. Он имеет в развитых. Так что планируйте ваш Re-Велоспорт. Имейте это в виду, что вы могли бы абстрактный стиль по умолчанию, типография определений, макеты, стили элементов HTML и т.д. Попробуйте подумать о будущем.
- Кроме того, оглянуться на свое прошлое проекта, это поможет определить стили, как правило, используют часто по porjects. Аннотация он.
- Удалить все неиспользованные стили. Эта практика будет держать ваши CSS рамки от распространенный симптом называется «Раздувание» -
- Удалить повторяющиеся стили.
- Создайте набор стилей, которые являются достаточно гибкими, чтобы перенести его в разных проектах.
Look At рамки CSS
Наконец. Если у вас вдохновляет и намерены использовать одну или несколько структур CSS, Херес быстрый список нескольких популярных ....
- 960 Grid System : 960 Grid System представляет собой попытку рационализировать рабочий процесс веб-разработки, обеспечивая широко использовались измерения, основанные на ширине 960 пикселей. Есть три варианта: 12, 16 и 24 колонн, которые могут быть использованы отдельно или в тандеме. Мысль ничего, что вы не можете создать для своего достаточно легко, система предоставляет сетку шаблоны для печати в PDF формате, которые можно использовать, чтобы эскиз страницы designs.Bet, это сделают профессиональные впечатления, если вы носите несколько листов при Вы идете к клиенту для сбора пользовательского интерфейса требованиям. Она также обеспечивает основную сетку шаблоны для популярного программного обеспечения, как Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio и др. обеспечение "для начинающих на десять", чтобы начать проектные работы.
- Концепция : Концепция предусматривает четко классифицировать CSS файлов сброс, Сетки, форм, Печать, Типография, плагины для кнопок, вкладок и спрайты и т.д. Она также обеспечивает поддержку для IE в качестве отдельной включить.
- SenCSs : в отличие от двух предыдущих, SenCSs (произносится Sense), не имеет определения CSS Layout. Он включает шрифты, отступы, поля, таблицы, списки, заголовки, цитаты, формы и многое другое.
- BlueTrip : Первоначально претензии к славе было то, что она представляет собой сочетание лучших черт от других библиотек других подобных Blue Print, поездки Оли ... откуда она и получила свое название. Его набор функций включает в себя 24 колонн, типография стилей, ORM стилей печати, кнопки и т.д.
- YUI Grids : Привлечены к вам в сети разработчиков Yahooo, поддерживает жидкости ширину (100%), макеты, а также заданной фиксированной ширины макеты в 750px, 950px, 974px и, а также возможность легко настроить на любое количество. Как вы можете видеть, его технически просто компоненты макета. Юй также предоставляется HTML / CSS наборы для других элементов страницы
- YAML (Yet Another многоколоночные Layout)
- Emastic
Помните, что с помощью CSS рамки не означает, что вы ленивы, чтобы создать одну из своих ... Это означает, что вы умны, чтобы учиться у других и опыт ошибок, сэкономить время и повысить производительность!!
