5 кроків, щоб писати краще, CSS Частина II
Це друга частина з 5 кроків, щоб писати краще, CSS. Є безліч підручників CSS можна ознайомитися на Інтернет, але кілька підручників є корисними. У цьому підручнику ви знайдете 5 кроків, щоб писати краще, CSS код для вашого наступного сайті проекту. Сподіваюся, вам сподобається цей урок.
1. Тримайте CSS заяви в одну лінію
Ви повинні завжди тримати CSS заяви в одну лінію, вона допомагає в збереження ваших CSS файлів чистими і менше. Вона також допомагає видалити небажані пробіли та символи.
Код товару
; color : # 333333 ; background : #cccccc ; } h2 (Размер шрифта: 18px; COLOR: # 333333; фону: # CCCCCC;)
Невірний код
h2 ( Размер шрифта: 18px; ; COLOR: # 333333; ; color: # CCCCCC; )
2. Поєднують у собі елементи
Один з кращих способів зберегти рядків коду є угруповання селектор. Є деякі наведені нижче приклади того, що я маю на увазі.
Код товару
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; )
Невірний код
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; )
3. Використання "маржа" в центрі макета
Багато новачків в УС не може зрозуміти, чому ви не можете просто використовувати Float: центр для досягнення цієї центром впливу на модульні елементи. Якби все було так просто! На жаль, ви повинні будете використовувати.
Кодекс
# (Контейнерів ; /* top, bottom - and left, right*/ Маржа: 0 Авто / * верхній, нижній - і вліво, вправо * / Ширина: xxxpx; )
4. Ваше CSS
Це чудова ідея коментувати свій код у секції. Щоб додати коментар, просто додайте / * за коментар, і * /, щоб закрити його, ось так:
Кодекс
/******** CODE START ТУТ ********/
5. Використання CSS Стиснути інструменти
Якщо ви не хочете витрачати свій час в модифікації старих стилів ви можете просто використовувати інтернет CSS стискають інструмент, це зроблять Вашу роботу в лічені секунди.
перевірити це онлайн CSS стискають інструмент ...
Css Tidy
Чистота Css
Css оптимізатора
Flumpcakes Css оптимізатора
cssdrive Css Comperasor
W3C CSS Validator
Висновок
Такими є лише деякі з порад, які допоможуть мені краще писати код. Я сподіваюся, що навчальний посібник також допоможе вам писати краще і чистого коду. Застосовувати ці поради на поточний і наступні проекти, і ви, безсумнівно, оцінять зусилля.
Якщо ви вважаєте, що навчальний посібник може бути більш кращого, будь ласка, поділіться з нами. Коментарі нас
Якщо Ви хотіли б отримувати більше підручників у нас, будь ласка, підпишіться на наш канал по RSS або по електронній пошті.
Рекламуйте нас
Статті по темі:
якщо вам сподобалося читати цю статтю, варто ознайомитися з іншими відповідними статтями нижче:
Revell говорить по: 27 листопада 2009 в 9:05 ранку сказав:
Привіт,
Перш за все, гарну статтю! Є не так багато статей, які Адреса письмовому стилі CSS. У мене є певні думки на першій точці, хоча. На мій погляд, краще використовувати довгу стиль письма при розробці і сценарій "зменшити" ваш CSS при використанні її на живу середу.
Дейв говорить: 27 листопада 2009 в 10:06 ранку сказав:
Я повністю згоден з точкою 1. Якщо у вас є 3 деклараціями, 1 рядок коду великий, але коли є 6 або 7, він отримує дуже важко читати.
Все, що для збереження Може 1KB? Я не розумію.
Інший ніж той, непогані ідеї.
Останній Блог Дейва .. 2 повинна більш-CMS мають сприятливі плагіни для WordPress
Fasce Nicolo 'говорить по: 27 листопада 2009 в 10:34 ранку сказав:
Я згоден з Дейвом, пункт 1 не так, просто тому, що, якщо ви працюєте в команді, дуже важко читати один рядок коду.
Ви також повинні написати код в алфавітному порядку для тієї ж мети.
EJ Semeijn говорить по: 27 листопада 2009 в 10:57 ранку сказав:
Чому ми зупинилися Розміщуючи ці поради? Інтернет вже наповнений цих засадах поради. І я також згоден з № 1. Він не робить ваш код легше зрозуміти, він просто робить його більш складним.
Мої поради будуть ставити структура веб-сторінки у вашому CSS, зробити розділи для RESET, заголовки, форми, Елементи HTML, шрифти і т.д. Таким чином, ваш CSS буде легше зрозуміти.
safetycopy говорить по: 27 листопада 2009 в 9:38 вечора сказав:
Я згоден з зауваженнями низки інших людей - 1 точка's поганий приклад коду не поганий код - це просто альтернативний стиль. Ця посада буде тільки корисно для повних новачків, і ми не хочемо, щоб почати вчити їх невірні припущення вже!
Останній safetycopy блог .. Фото
Джош говорить по: 29 листопада 2009 в 4:38 ранку сказав:
Я роблю все від них, за винятком останнього. Я не вважаю корисним, щоб стиснути мої CSS, але на відміну від усіх попередніх читачів, я повністю згоден на пункт № 1. Я тільки почав писати CSS в одну лінію, і це було величезним. Прокрутка була далека скорочений. Думаю, це особисті переваги. Те, що допомагає в тому, що я використовую редактор обгортання код вниз на наступний рядок, тому немає горизонтальної прокрутки.
Останній Джоша блозі .. Фанати Flickr
FAQPAL говорить по: 29 листопада 2009 в 4:06 вечора сказав:
Добрі поради починаючим, я не применшувати моєї CSS або, можливо, набагато більш великий проект буде користуватися minifying, але в середньому сайт дійсно не потрібно.
Наскільки # 1, то я думаю, що формулювання є те, що люди кидали Off, замість того, щоб сказати: "Поганий кодекс", можливо, йому варто говорити, як safetycopy запропонував, "заступник кодексу".
Останній FAQPAL блог .. Bubble ефект з CSS
favSHARE говорить по: 30 листопада 2009 в 12:49 ранку сказав:
Ця стаття була розподілятися на favSHARE.net. Ідіть і проголосує за це!
Останній favSHARE блог .. 25 Tutorials Web Layout
Жан-Патрік Сміт писав: 11 грудня 2009 в 11:15 ранку сказав:
Я зазвичай створює файл PHP, який включає всі мої CSS файлів minifies він, і додає, стиснення + минає заголовки.
Таким чином, я не згоден з точкою # 1 ...
Що важливіше, ніж усі ваші CSS на одній лінії скорочення числа дзвінків з HTTP спрайт CSS і об'єднання всіх ваших CSS / JS в один файл.