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

css верстка

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

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

css верстка

Серьезно, всегда используйте сброс. Возможно, Вы используете сброс Эрика Мейера или 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 свойств

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. Организация

css верстка

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

/*****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. Последовательность

css верстка

Какой вариант записи для кода Вы примите, такового и придерживайтесь. Посмотрите на 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. Начните в правильном месте

css верстка

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

Когда я начинаю приступать к созданию сайта, я делаю разметку всего документа в целом от открывающегося тега 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 с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Александер

    спасибо шас буду пробовать

  2. борис

    хорошая инфо

  3. westa

    Да ещё с картинками — кайф!

  4. Gomer

    «…Когда я начинаю приступать к созданию сайта, я делаю разметку всего документа в целом от открывающегося тега body до закрывающегося тега body.» Можно поподробнее о разметке документа для Чайников с большой буквы.

  5. 451F

    Очень часто использую некоторые методы при разработке шаблонов Друпала

  6. Сделать сайт

    C некоторыми вещами не могу согласиться.
    Конечно же хорошо будет, если все свойства распологать по алфавиту, только зачем? Для быстрого поиска того или иного свойства можно воспользоваться поиском программы в которой пишешь сам CSS файл и нет проблем. Да и быстрее это намного. Лично я так всегда делаю.

  7. Юрий

    Ребят — если честно — мозги периодически закипают: — в обучающем ролике по созданию сайта с мерседесами — сброс был назначен таким образом — *{ margin: 0; padding: 0; } — здесь Вы пишите — не нужно так делать — так как же правильно ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree