5 стъпки към по-добро Напиши CSS част II
Това е втората част на 5 стъпки за по-добро Напиши CSS. Има много уроци за CSS са достъпни на интернет, но на няколко уроци са полезни. В този урок ще намерите 5 стъпки, за да пиша по-добре CSS код за следващия си проект уебсайт. Надявам се, че ще се насладите на този урок.
1. Съхранявайте CSS декларации в една линия
Винаги трябва да се поддържа CSS декларации в една линия, то помага със запазване на CSS файла чисти и по-малки. То също помага за премахване на нежеланото пространства и символи.
Добър кодекс
; color : # 333333 ; background : #cccccc ; } h2 (шрифт-размер: 18px; цвят: # 333333; фон: # CCCCCC;)
Бад кодекс
h2 ( Font-размер: 18px; ; цвят: # 333333; ; фон: # CCCCCC; )
2. Съчетават елементи
Един от най-добрият начин да запазите реда код е чрез групиране на селектори. Има няколко примера по-долу на това, което съм, отнасящи се до.
Добър кодекс
h1, H2, H3 ( ; color : # 333 ; шрифт семейство: Arial, Helvetica, Sans-Serif; цвят: # 333; )
Бад кодекс
: Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } H1 (шрифт семейство: Arial, Helvetica, Sans-Serif; цвят: # 333;) h2 (шрифт семейство: Arial, Helvetica, Sans-Serif; цвят: # 333;) h3 (шрифт семейство: Arial, Helvetica, безсерифен; цвят: # 333;)
3. Използвайте "свобода" на Център за оформление
Много начинаещи до CSS Не мога да разбера защо не можете просто да използвате поплавъка: център за постигането на тази центрирана ефект върху блокови елементи. Ако само това са, че лесно! За съжаление, ще трябва да използвате.
Код
# Контейнер ( ; /* top, bottom - and left, right*/ марж: 0 автомобил / * отгоре, отдолу - и леви, десни * / ширина: xxxpx; )
4. Коментар си CSS
Това е страхотна идея да коментират кода на вашата в секции. За да добавите коментар, просто добавете / * зад коментар, и * / да го затворите, като това:
Код
/******** Кодекс Start Here ********/
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
Nicolo "Fasce казва на: 27-ми ноември 2009 година в 10:34 ч., заяви:
Съгласен съм с Дейв, точка 1 не е наред, просто защото, ако работите в екип е много трудно да се прочете един код линия.
Вие също трябва да напишете кода в азбучен ред за същата цел.
EJ Semeijn казва на: 27-ми Ноември 2009 в 10:57 ч., заяви:
Защо да спрем публикуване на тези съвети? Интернет вече е пълен с тези основи съвети. И аз също не са съгласни с # 1. Той не прави кода по-лесно да се разбере, тя просто го прави по-трудно.
Моите съвети ще бъде въвеждането на структурата страница в CSS, за да раздели RESET, позиции, формуляри, HTML елементи, шрифтове др По този начин си CSS ще бъде по-лесно да се разбере.
safetycopy казва на: 27-ми ноември, 2009 година в 9:38 ч., заяви:
Съгласен съм с коментара на няколко други хора - например точка 1 от лош код не е лош код - това е просто един заместник стил. Този пост ще бъде от полза само за да завършите новаците и ние не искаме да започне изучаването им лоши предположения вече!
Последна safetycopy блог .. Фото
Джош казва на: 29-ти ноември, 2009 година в 4:38 ч., заяви:
Аз правя всичко това, с изключение на последната. Аз не намери за необходимо да компресирам CSS, но за разлика от всички предишни читатели аз силно се споразумеят за точка # 1. Току-що започнах да пиша ми CSS в една линия и това е била огромна. За превъртане далеч не е намален. Предполагам, че това е лично предпочитание. Нещо, което помага е, че използвам тайна редактор на код за определяне на следващия ред, така че няма хоризонтално скролиране.
Последна Джош блог .. Пристрастен към Flickr
FAQPAL казва на: 29-ти ноември 2009 година в 4:06 ч., заяви:
Добри съвети начинаещи, аз не омаловажавам ми CSS или, може би много по-голям проект, ще се възползват от minifying, но средната сайт не наистина необходимо.
Що се отнася до # 1 отива, мисля, че текстът е това, което е хвърляне хора на разстояние, вместо да каже, "Лоши кодекс", може би трябва да кажа, като safetycopy е предложено, "Алтернативен кодекс".
Последна FAQPAL блог .. Bubble ефект с CSS
favSHARE казва на: 30 Ноември 2009 година в 12:49 ч., заяви:
Тази статия е била споделена по favSHARE.net. Иди и го гласува!
Последна favSHARE блог .. 25 Уеб уроци Разпределение
Жан-Патрик Смит казва на: 11-ти декември, 2009 година в 11:15 ч., заяви:
Аз обикновено се създаде PHP файл, който включва всички мои CSS файлове, тя minifies, и добавя компресия + изтича заглавки.
По този начин аз не трябва да се съглася с точка # 1 ...
Какво е по-важно, отколкото като всички CSS на един ред е намаляването на броя на HTTP разговори с спрайтове CSS и комбиниране на всички CSS / JS в един файл.