5 способів писати CSS краще в одну мить

15

Звичайно, кожен може написати CSS. Зараз, навіть програми це можуть зробити за Вас. Але будь CSS хороший? Ось 5 рад по миттєвого покращення Вашого CSS.

1. Зробити файл скидання

5 способів писати 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

5 способів писати 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. Організація

5 способів писати 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. Послідовність

5 способів писати 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. Почніть в правильному місці

5 способів писати CSS краще в одну мить

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

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

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

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

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

Висновок

Такими є лише деякі з порад, які допоможуть Вам краще писати код. Це аж ніяк не означає кінець списку. Як тільки я прийду до інших, ми обов’язково поділимося ними з вами.

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

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.

Тут Ви можете з нуля підняти HTML&CSS