5 способов писать CSS лучше в одно мгновение.

Конечно, каждый может написать CSS. Сейчас, даже программы это могут сделать за Вас. Но любой ли CSS хорош? Вот 5 советов по мгновенному улучшению Вашего CSS.

1. Сделать файл сброса

Серьезно, всегда используйте сброс. Возможно, Вы используете сброс Эрика Мейера или YUI сброс или Ваш собственный пользовательский сброс. Так или иначе, используйте.

Вы можете обнулить margin и padding для всех элементов. Как на примере:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Сбросы Эрика Мейера и YUI очень обширные, я бы сказал исчерпывающие. Я убежден, что в конечном счете вы сбросите все и переопределите все свойства для элементов. Вот почему Эрик Мейер не рекомендует использовать его полностью, в большинстве проектов полный список сброс файла Эрика Мейера ни к чему. Удалите из него стили тех элементов, которые не используете в своем проекте. Пробуйте, экспериментируйте, создайте свой собственный сброс файл.

И, пожалуйста, не используйте это:

* { margin: 0; padding: 0; }

Это займет больше времени на обработку, и что вы думаете произойдет с radio button, когда вы уберете у него padding? С элементами форм иногда происходят странные вещи, поэтому их лучше оставить в покое.

2. Алфавитизация CSS свойств

Как Вы думаете, в каком примере быстрее найти свойство margin-right?

Пример 1.

div#header h1 {
	z-index: 101;
	color: #000;
	position: relative;
	line-height: 24px;
	margin-right: 48px;
	border-bottom: 1px solid #dedede;
	font-size: 18px;
}

Пример 2.

div#header h1 {
	border-bottom: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin-right: 48px;
	position: relative;
	z-index: 101;
}

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

Я знаю людей, которые организовывают список именно так, а кто-то другим не алфавитизрованным способом. Но скажу Вам точно, что если Вы работаете над одним проектом еще с кем-то (например, в компании), то Вам намного проще будет взаимодействовать со своим напарником, прислушавшись к данному совету.

3. Организация

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

/*****Reset*****/
Remove margin and padding from elements

/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.

/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently 

/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site

/*****Header*****/
Define all elements in the header

/*****Content*****/
Define all elements in the content area

/*****Footer*****/
Define all elements in the footer

/*****Etc*****/
Continue to define the other sections one by one

Использовать комментарии и группировать схожие элементы поможет Вам быстрее найти то, что нужно.

4. Последовательность

Какой вариант записи для кода Вы примите, такового и придерживайтесь. Посмотрите на 1-ую и 2-ую строку в примере. Так вот, оба варианта записи имеют право на жизнь. Каждый человек имеет право на выбор. Поэтому выберите себе более удобный и придерживайтесь его.

Лично я использую комбинацию обоих. Если селектор имеет более 3-х строк, то я рекомендую использовать 2-ой вариант (разбить на несколько строк), иначе 1-ый.

div#header { float: left; width: 100%; }
div#header div.column {
	border-right: 1px solid #ccc;
	float: right;
	margin-right: 50px;
	padding: 10px;
	width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

Я работаю таким образом, потому что 3 свойства помещаются в одну строку текстового редактора без переноса на следующую строку. Так что выясните что лучше для вас и придерживайтесь этого.

5. Начните в правильном месте

Не трогайте Вашу таблицу стилей, пока Вы не написали свою разметку страницы.

Когда я начинаю приступать к созданию сайта, я делаю разметку всего документа в целом от открывающегося тега body до закрывающегося тега body. И только после этого приступаю к созданию таблицы стилей. Я не добавляю лишние div’ы, ID, классы. Я добавлю лишь некоторый div’ы к header, footer, content, потому что я знаю, что они будут присутствовать на странице.

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

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

*Примечание редактора: Не могу промолчать. Как сказал Тревор, даже не трогаете CSS файл, пока разметка не готова на 100%.

Заключение

Таковы лишь некоторые из советов, которые помогут Вам лучше писать код. Это отнюдь не означает конец списка. Как только я приду к другим, мы обязательно поделимся ими с вами.

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail:contact@webformyself.com

Проект webformyself.com – Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Тут Вы можете с нуля поднять HTML&CSS

Подписаться

Поделиться

Метки: css, css верстка