Из нашите страници не веднъж сме казвали, че една от основните движещи сили в работата по даден проект е яснотата на кода. Колкото по-правилен, по-разбираем, по-изчистен и подреден е той, толкова по-добре за всички замесени в проекта. Естествено, на пръв поглед удобството е най-вече за вас, но един добре написан код може да бъде модифициран лесно и от трети лица за в бъдеще, а това от своя страна спестява време и пари.
Оптимизацията не винаги може да бъде на 100%, но с този урок ще се опитам да помогна на "прохождащите" писачи на CSS да изградят навици или просто да си харесат някоя завъртяна техника, с която да оптимизират своя CSS файл. Имайте едно на ум, че всъщност оптимизацията на CSS-а започва още със структурирането на HTML документа!
Ще се опитам да не бъда пристрастен и да сравня плюсовете и минусите на всеки метод, така че да откриете подходящия за вас. Трябва да знаете, че не винаги писането по един и същ начин е най-оптимално и точно поради тази причина е добре да комбинирате техниките за да получите желания резултат. Нека пристъпим към действие!
Колко CSS файла ни трябват?
Може би е добре да започнем с това, защото засяга момента на планиране и създаване на файловете ни.
Основното правило е да се придържаме към възможно най-ниска бройка. Това се прави с цел намаляване броя на HTTP заявките. Обяснено простично - всеки път, когато някой отвори вашия сайт, браузърът изпраща заявки към сървъра - например "отвори ми еди-си-коя-картинка". Сървърът (където е вашият сайт) съдържа цялото съдържание (изображения, CSS/HTML/JS файлове и др.) и при заявка от страна на браузъра, той я изпълнява. Всеки един допълнителен файл означава още една заявка, което бави зареждането. За това е препоръчително целият CSS код да бъде поставен в един файл, така че това:
<link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="print.css" /> <link rel="stylesheet" type="text/css" href="header.css" /> <link rel="stylesheet" type="text/css" href="footer.css" />
да стане това:
<link rel="stylesheet" type="text/css" href="style.css" />
Има и един друг вид случаи. Представете си, че работите по огромен проект, в който вашият CSS файл добива колосални размери от мегабайт и нагоре. Идеята е отново да ползваме един файл, но е безмислено всеки път да го зареждаме целия. Ето защо можем предварително да си го разбием на няколко части. Ако например сайтът ни има магазин, взимаме целия код за магазина и го поставяме в един CSS файл с име shop.css. При отварянето на тази страница се зарежда само shop.css и нищо друго, от което нямаме нужда (например стилове за блога). Размерът му ще бъде много по-малък и няма да бави зареждането.
Надявам се направихте разликата между двете - при първия случай събираме ненужно разделените файлове в един, за да намалим заявките, а във втория случай разцепваме прекалено големия файл на няколко парчета, но ползваме само едно от тях на конкретна страница. Общото е, че се стараем да имаме само един CSS файл.
Къде да поставим нашия CSS файл?
Винаги в <head> елемента! Тъй като браузърът чете файловете отгоре надолу и отляво надясно, ако вашият CSS файл се зарежда накрая на документа, то страницата първо ще се изобрази нестилизирана, а впоследствие ще се зареди CSS-а, който ще постави нещата на мястото им. Ето защо го поставяйте винаги най-отгоре, най-удачно е между <head></head> таговете. Така всичко ще следва естествената си и логическа схема на зареждане - първо стиловете и после съдържанието.
Многоредово или едноредово форматиране
Честно казано този въпрос датира от самото създаване на CSS и от толкова дискусии, днес като че ли никой не му обръща подобаващо внимание, а би трябвало. Защо ли? Защото това са основните избори за форматиране на вашия CSS файл и от това как ще тръгнете тук зависят всички по-надолу. Ето два примера за бързо сравнение:
Многоредово (multi-line) форматиране:
div#header {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(../img/header.png) repeat-x left top;
}
Плюсове и минуси: Стандартният многоредов CSS файл е често срещан и предпочитан, заради удобството на работа, което предлага. Файловете с него са ясни, прегледни и с тях се работи леко. Като минус на този метод може да се изтъкне крайният размер на файла, защото всяко празно пространство добавя байтче. Но като се имат предвид скоростите, с които разполагаме в днешно време, моето мнение е да не пестим място точно оттук.
Едноредово (single-line) форматиране:
div#header {width:500px;height:100px;margin:0 auto;background:url(../img/header.png) repeat-x left top}
Плюсове и минуси: Файловете написани по този начин са трудни за четене, но са по-малки като размер. Освен това с този метод се възползвате от големите широкоекранни монитори. Но тези плюсове бледнеят пред факта, че кодът е по-трудно четим. Точно за това е препоръчително едноредовото форматиране да се използва за код, който се пипа по-рядко (например css reset, за който ще стане дума по-надолу).
Има и вариант, в който смесвате двата начина на изписване за един оптимален краен резултат.
Интересно решение е да имате две версии на CSS-a - едната работна, а другата да създадете, когато качвате файла във вече готовия проект, като в нея да липсват всякакви коментари, празни пространства и т.н. (така наречения minify, за който също ще кажем няколко думи по-надолу).
Съветът ми е да се научите да ползвате и двата типа форматиране. Не игнорирайте нито един от тях, а просто се научете да ги ползвате заедно, защото тогава обикновено се постигат най-добри резултати.
ID или Class?
Вечният въпрос! Объркването кое от двете да се ползва се наблюдава най-вече при хората, които едва сега започват да се занимават с CSS. Всъщност нещата са доста прости. ID (identifier) селектора е измислен, за да се поставя на уникални елементи и се изписва с "#". Под уникални елементи се има предвид header или footer, logo и т.н., защото се предполага, че ще ги имате само веднъж на сайта. Ето и пример как изглежда ID атрибута в HTML и как описваме ID в CSS:
HTML
<div id="header"></div>
CSS
#header {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(../img/header.png) repeat-x left top;
}
Ако искате да ползвате едно и също ID на два елемента, то кодът ви освен, че няма да е валиден, е много вероятно изобщо да не сработи и сайтът да се счупи.
От другата страна имаме Class, който се ползва за група от елементи, т.е. може да ползвате един и същ клас на няколко HTML елемента и кодът ще остане валиден. В CSS се изписва с "." (точка).
HTML
<a href="#" class="red_button">Button</a>
CSS
.red_button {
color: red;
display: block;
background: #000;
}
Този клас може да поставяте, на който елемент пожелаете (div, p, ul и т.н.) и той ще приеме свойствата му.
Това кое къде ще слагате зависи от вас, но практиката е показала, че най-добре е да се ползват ID-та за структурата, за изграждащите елементи, а Class да се слага на всичко останало.
Понякога обаче имаме общи случаи, в които на един елемент закачаме ID и Class. Прост пример - имаме сайт, който е широк 900px. Оставили сме избор на потребителя, чрез бутонче, той да сменя размера с по-малък - 700px. Как би изглеждало това в CSS? Често срещана грешка е да се направят две ID-та, които се сменят. Като се замислите има по-логично решение. Защо не оставим едно ID и не сменяме класовете? Така пак ще имаме един и същ, като дължина CSS код, но тези класове ще можем да поставим и на други елементи, и по този начин да променяме ширината на header и footer.
HTML
<!-- Оригинално --> <div id="content" class="width_900"></div> <!-- При смяна --> <div id="content" class="width_700"></div>
CSS
.width_900 {
width: 900px;
margin: 0 auto;
}
.width_700 {
width: 700px;
margin: 0 auto;
}
Като цяло няма значение дали header ще бъде с ID или Class - това е чисто логически избор. Въпреки това от W3 съветват те да се използват под предназначение, а и SEO спецовете казват, че има значение. Единствените неща, от които трябва да се пазите тук са дублирането на ID-та и правилото, че ID и Class не могат да започват с число.
Но има още нещо, което трябва да имате предвид - използвайте ID и Class рационално, т.е. само когато наистина имате нужда от тях. Примерът отдолу обезмисля онаследяването в CSS:
HTML
<div id="header"> <p class="blue">Някакъв текст!</p> <a href="#" class="button">Някакъв текст!</a> <em class="pink">Някакъв текст!</em> </div>
#header .blue { color: blue; }
#header .button { background: #000; color: #fff; }
#header .pink { color: pink; }
В случая тук нямаме десетки елементи в header-a, които да си пречат едно на друго и да си присвояват стойности. Точно за това много по-оптимизирано решение би било следното - махаме излишните класове от HTML-а:
<div id="header"> <p>Някакъв текст!</p> <a href="#">Някакъв текст!</a> <em>Някакъв текст!</em> </div>
И използваме ID-то на header-a за да конкретизираме за кои елементи става дума:
#header p { color: blue; }
#header a { background: #000; color: #fff; }
#header em { color: pink; }
Именуване
Правилното и логично кръщаване на елементи е от витално значение за бъдещата ви работа. Никой не иска да чете неща от типа "#boxche_4325" или ".kravatamilka" (дело на сладурите от MagStudio). Не е лошо да използвате и някои утвърдени имена, тип wrapper, container, box, button и т.н., защото те ще бъдат по-лесно разпознавани от всички.
Инлайн стилове
Инлайн изписването на CSS е нещо, което трябва да избягвате, но въпреки това понякога е много полезено. Какво представлява то? Чисто и просто - поставяне на CSS код в HTML документа или иначе казано не където му е мястото. След противоречето от първото изречение е време за разяснение. По принцип всички знаете, че CSS е измислен най-вече, за да отдели съдържанието от стиловете и за да спомогне за по-бързата работа с последните. Така при промяна на стойност в един CSS файл, който е приложен на няколко страници, тя ще бъде отразена на всички тях. Докато ако ползваме inline стил и зададем на конкретен параграф от една страница да бъде зелен, то той ще бъде зелен само на нея. Сега представете си не един параграф, а 100 такива. Ако тръгнем на всички да слагаме inline стилове, спокойно можем да си кажем, че не ползваме CSS, тъй като не се възползваме от първата буквичка в абривиетурата "C" (cascading).
Веднага ви давам и пример, в който inline записа спестява доста код и мотане. Да кажем, че работите по огромен проект, в който имате много страници с текст, но едно стандартно форматиране на параграфите не е достатъчно, защото на едната страница трябва да имате повече отстояние отдолу, на другата по-малко и т.н. Ако следвате съвета ми от по-горе и избягвате inline записите, то ще трябва да слагате class на всяко <p> и честно казано това може да ви докара едни 200 реда отгоре, да не говорим колко търсене ще падне после. При този вариант най-лесното решение е да забиете инлайн стил на дадения параграф и дори те да са много, вие сте сигурен, че пипате само на едно място и няма шанс да счупите друго. Повече играчка е, особено при много параграфи, но е едно от най-добрите решения.
Естествено трябва да споменем и основното приложение на inline стила - да оувъррайтне (overwrite) всички зададени стилове. Пак ще дам за пример параграфите - ако имате 20 сини параграфа и искате един от тях да е червен, не е нужно да му слагате специален клас, а може да му смените цвета по този начин.
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula arcu vel est sagittis non pellentesque sem ultricies. Quisque tincidunt porta pretium! Aliquam erat volutpat.</p>
Като цяло пак си заствам зад първото изречение - избягвайте използването на инлайн стиловете, но не ставайте фанатик на темата и преценете кой е най-оптималния вариант за случая.
Специфичност, наследяване, тежест
Какво означават тези думички? Всъщност всички те представляват горе-долу едно и също нещо, но за да ме разберете по-лесно веднага ще ви дам пример. Имате следния код:
p {
color: red;
}
div#header p {
color: blue;
}
Имаме зададен червен цвят на всички параграфи. В следващия момент обаче искаме параграфите в #header да бъдат със син цвят и от нас се иска да специфицираме този път. Така в крайна сметка div#header p има по-голяма тежест от чист <p>. Сигурно се питате за каква оптимизация си говорим тук? Ами там е работата, че понякога без да има нужда, някои хора специфицират прекалено, което прави кода по-трудно четим, а и манипулацията с него става ад. Ето и пример:
#main #box #content .product .product_heading h3 {
color: red;
}
Ето този тип изписване не винаги е нужен, защото ако сега решим да сменим #content с #holder, ще трябва да преправяме доста CSS, тъй като това горе вече няма да е валиден "път". След една добра предварителна планировка, можем да избегнем подобни суджуци и да напишем чисто и просто:
#main .product_heading h3 {
color: red;
}
Естествено някой път се налага да попишем повечко, но в 99% от ситуациите можем да избегнем подобни спецификации. За това - планирайте много внимателно колко елемента ще са ви нужни и какви ще бъдат те, ще се ползват ли на друго място, ще има ли еднакви и т.н. и т.н.
Кратко изписване или така наречения shorthand
Краткото изписване на определени декларации би трябвало да бъде едно от първите неща, които всеки трябва да научи при сблъсъка си с CSS. По принцип, на хартия това се води и единственият начин да оптимизирате вашия код. Съкратеният запис има няколко вида приложение и по-надолу ще разгледаме три от тях. За да не губим време в общи приказки ето примерите. Представете си, че имате padding от всички страни на даден div:
div#header {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 60px;
}
Неговият съкратен (shorthand) вариант би изглеждал така:
div#header {
padding: 10px 15px 25px 60px;
}
Както сами виждате този метод прави кода по-чист, по-къс и намалява размера на файла, заради по-малкия брой символи. Но сега нека анализираме как точно работи съкратената версия и да разгледаме различните вариации.
Изброените стойности в примера по-горе не са хаотични, а имат своята последователност. Първата стойност се отнася за падинга отгоре (top), втората отдясно (right), третата отдолу (bottom), четвъртата отляво (left). Предполагам, че сами се досетихте - часовниковата стрелка! Какво правим ако искаме да зададем стойности само отгоре и отдолу или пък тези вдясно и отдолу да са различни? Ето примери, с които ще ви се изясни картинката.
/* Четири стойности за четирите различни страни. */
div#header {
padding: 10px 15px 25px 60px;
}
/* Три стойности: 10px отгоре, 15px отдясно и отляво и 25px отдолу. */
div#header {
padding: 10px 15px 25px;
}
/* Две стойности: 10px отгоре и отдолу, 25px отдясно и отляво. */
div#header {
padding: 10px 25px;
}
/* Една стойност: 10px от всички страни. */
div#header {
padding: 10px;
}
Виждате, че еднаквите срещуположни стойности се пишат като една - на 8-ми ред имаме еднакви стойности отдясно и отляво, на 13-ти пък имаме еднакви отгоре и отдолу и отдясно и отляво.
Но това не е единственото приложение на shorthand метода. Веднага ви давам друг пример с background. Вместо да описвате надълго и нашироко:
div#header {
background-color: #000;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
Спокойно може да обедините всичко това в:
div#header {
background: #000 url(../img/bg.png) no-repeat fixed left top;
}
Тук виждате, че background пропъртито няма нищо общо, като изписване с това на padding, така че е добре ако не сте сигурни да проверите из някой от W3 сайтовете за точния синтаксис. Например тези на margin и padding са сходни, но на font и background или list-style са доста различни. И все пак пропъртитата, които имат shorthand стойности са малко, така че като понатрупате малко опит ще ги запомните без проблем.
Последният shorthand трик се отнася за цвета. Стандартния color: #333333; може да бъде написан като color: #333. Или пък #336699 - #369. Просто, а?
Коментари
Коментарите са изключително важна част от вашия код и колкото по-често се научите да ги ползвате, толкова по-добре. Те имат само един начин на изписване и той е /**/:
/* HEADER */
div#header {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(../img/header.png) repeat-x left top;
}
/**********/
С тях, логично, оставяте някакви обяснения върху определени части от кода и така улеснявате вас и хората, които ще четат непознатия за тях документ. Коментарите обаче имат и едно друго приложение, за което рядко някой се досеща. Те играят ролята на маркери! Ако отново се спрем на примера отгоре, ще видим, че съвсем ясно сме си дефинирали това парче код, като HEADER. В такъв случай, дори да не сме кръстили хедъра подобаващо, търсейки по ключова дума, ние ще го открием лесно благодарение на коментара. По този начин може да си маркирате каквото пожелаете, но не прекалявайте.
Индентиране
Голям процент от хората, които пишат многоредов CSS са свикнали да индентират своя код, за да бъде той по-лесно четим.
div#header {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(../img/header.png) repeat-x left top;
}
Защо обаче индентацията да се ограничава дотук? Вземете за пример HTML индентирането, където поставяме например div в div. То изглежда така:
<div id="products"> <div class="product_one"> <p>Текст</p> </div> </div>
Същият начин можем да приложим и за CSS форматирането, така че ако имаме меню в хедъра, то да изглежда така:
div#header {
width: 500px;
height: 100px;
margin: 0 auto;
background: url(../img/header.png) repeat-x left top;
}
div#header ul#mainmenu {
float: left;
width: 200px;
}
#mainmenu li {
float: left;
border-right: 1px solid #ccc;
}
Този тип форматиране дава и друго предимство освен яснота на кода. Спомняте ли си главата за специфичност по-нагоре? Нека ви припомня с бърз пример. В случая говорим за главно меню и се предполага, че то ще бъде единствено и уникално и не е нужно да навързваме толкова много селектори един след друг. На 8-ми ред виждате, че съм описал доста подробно, но това не винаги е необходимо, както си говорихме и по-горе. След като ползваме индентацията, допълнително става ясно, че менюто стои в хедъра и за това можем да го оптимизираме, както съм направил на 13 ред (премахнал съм селекторите преди #mainmenu).
CSS Reset
Популярен термин, който сигурен съм чувате постоянно. Но какво всъщност представлява CSS Reset-a? Всички знаете, че различните браузъри визуализират различно уеб сайтовете и най-честата причина за това е, че имат предефинирани стойности, които в комбинация с вашите омазват положението. Идеята на CSS Reset-a е предварително да занули тези предефинирани стойности, така че спокойно да зададете вашите. Ето ви reset-a, който ползваме на нашия сайт и който може да бъде намерен в демо файловете ни, но в по-оптимизиран вариант.
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: Tahoma, Arial, sans-serif; font-size: 12px; }
.clr { clear: both; display: block; height: 0; line-height: 0; font-size: 0; }
a, a:link, a:visited { outline: none; font: 12px Tahoma, Arial, sans-serif; color: #444; text-decoration: underline; }
a:hover { text-decoration: none; }
p { margin: 0; }
input:focus, textarea:focus { outline: none; }
img { border: 0; }
Проблемът идва от това, че в по-известните reset-и (като този на Eric Meyer например) се зануляват едва ли не всички HTML елементи - нещо, което е безмислено в голям процент от случаите, защото не ползвате и половината от тези елементи. Имате два варианта - или да вземете вече готов reset файл и да го "изчистите" (както и препоръчват повечето автори), или да създадете свой собствен, който с времето да развивате и който да пасва най-добре на нуждите ви (както препоръчвам аз).
Обикновено reset-а се поставя в началото на CSS файла, за да разчисти пътя за всичко надолу. Предвид факта, че ще се пипа по-рядко, препоръчително е да бъде написан с едноредово форматиране.
Нула винаги е нула!
Странно, но доста хора забравят този факт и често виждаме неща от този род:
div#header {
margin: 0px;
padding: 0px;
}
Тук са абсолютно ненужни пикселите накрая, тъй като 0 си е 0, независимо дали са пиксели, милиметри, круши или сливи.
Хакове
Хаковете все още са в ежедневието на почти всички уеб дизайнери и причината за това е Internet Explorer. По-старите версии на браузъра очевидно ще съществуват още няколко годинки и за това няма да ви съветвам да спрете да използвате хакове, нищо че 99% от нещата стават и без тях, а останалия 1% също става без тях, но с купища допълнителен код, което е по-голямото зло. Не спирайте използването им, просто се ограничавайте доколкото можете, премисляйте добре логиката си и правете двойна проверка. Ще видите, че така елиминирате нуждата им.
Все пак ако решите да ползвате хакове, не е лошо да ги комбинирате с коментари, тъй като обикновено нямат нищо общо с логиката и не става ясно защо са там. Ето ви пример с няколко рандъм поставени хак-а, за да добиете представа как изглеждат:
#header {
width/* */:/**/100px;
_height: 100px;
}
Компресия
Компресирането на CSS е по-известно под друг термин - minify. Това представлява автоматизиран процес, който премахва всякакви символи, без които файлът ще продължи да работи без проблем - бели пространства, нови редове, коментари, символът точка и запетая (преди затваряща скоба) и др. Както ви стана ясно в началото на статията компресиран (едноредов) CSS се чете трудно и за това се избягва използването му в работния файл. Все пак нищо не ви пречи да minify-нете своя CSS, когато решите, че е време той да бъде качен някъде по сървъра. За целта има хиляди безплатни тулчета, които може да ползвате. Аз ви препоръчвам някое онлайн - например това. Разбира се, има много други и всичко е въпрос на вкус. Някои предлагат по-разширени опции (CleanCSS например), по-добра филтрация и т.н., но идеята на всички е една и същата, така че потърсете и намерете най-удобния за вас.
Изводи
Ако сте прочели всичко дотук много внимателно, предполагам сте разбрали, че повечето от разгледаните техники са просто препоръчителни, а не задължителни. За да се усъвършенствате в писането на CSS обаче, бъдете сигурни, че ще трябва да научите всички от тях. В някои случаи ще оцените качествата им веднага, а в други ще отнеме малко повече време.
По принцип може да се говори още много по темата, но тъй като статията е насочена предимно за начинаещи, реших, че ще е по-добре да го карам семпло и с повече примерчета. Освен това съм оставил и място за въпроси и предложения, така че чувствайте се подканени да питате и споделяте други техники. Ако се съберат още няколко, може да се напише продължение на статията.
Браво за статията, хареса ми много. От седмица някъде се интересувам доста активно от всякакви техники и методи за оптимизация на уеб съдържанието. Като пример за резултатите след оптимизация може да видите публикацията в блога на Dave Rupert (http://daverupert.com/2010/06/web-performant-wordpress/), която макар че се отнася за WordPress главно, важи и за всеки един друг вид платформа и включва още начини да се намали крайния размер на проекта.
@Георги, първо даваш примери с class="blue" и class="pink", а после говориш за избор на имена на класове и идентификатори. Lead by example нещо куца ;-)
По същество, аз с времето изработих навици, подобни на описаното в <a href="http://codex.wordpress.org/CSS_Coding_Standards">стандартите на WordPress</a>. Препоръчвам и <a href="http://www.phpied.com/css-coding-conventions/">написаното от Стоян</a> в неговия блог, единственото правило с което не съм съгласен е за азбучната подредба на декларациите. Аз предпочитам да ги подреждам по функция - първо разположението, след това оформлението и накрая типографията.
Никога не ресетвайте свойството outline в CSS, освен ако не смятате след това изрично да зададете стилове за псевдо-класа :focus. Ако не се сещате защо, пробвайте да навигирате сайта на ОББ (www.ubb.bg) само с клавиатурата.
[...] и трикове за CSS оптимизация http://fridaycode.net/css-optimization-tips-and-tricks/ в Любими преди 1 минута edno23.com Начало контакти [...]
@Ангел Паунчев, радвам се, че ти е полезна! Линкчето е полезно :).
@Гонзо, хехе, мисля че е ясно защо съм ползвал .blue и .pink - за да бъде ясен и прост примера :)
Иначе в двата линка, които си дал не ме кефят доста неща. Например от WordPress светкавично отсичат кое е правилно и кое не. Не мисля, че има стандарт, който да ти казва как да подреждаш кода си. Едно е да кажеш, че този метод е по-удобен:
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
... а съвсем друго е да заявиш, че е правилния.
Блогът на Стоян го следя от време на време и честно казано адски много се радвам на успеха му. И в неговата статия обаче има неща, които ми се сториха странни (например спейсинга), но като цяло и аз препоръчвам на всички да я прочетат. Колкото до азбучната подредба - да, наистина няма смисъл от нея, макар за някои хора да е по-удобна. Въпрос на вкус. Например в случая моя и твоя съвпадат донякъде :).
Никъде не казвам, че outline трябва да се reset-ва :). Това, че тук е занулен, не означава, че винаги трябва да бъде така. За това и споменах за постоянната промяна и надграждането на личния CSS Reset. В случая ние сме решили, че тук е по-добре без него, тъй като не може да разкрие потенциала си. Смешното е, че и ти си дал пример за кофти навигация със (обновения) сайт на ОББ, и аз съм посочил линк към статията ми за кравата Милка, отново концентрирана върху ОББ. Явно на Маг не им върви с този сайт и това е... :D.
P.S. Викай ми Жоро, че това Георги е супер представително ;).
Един сайт ми оптимизира кода и го направи с 1.5 кб по-малък :D има ли смисъл въобще?
@Жоро, написах да не се ресетва outline като съвет, не съм обръщал внимание дали в примерите в сатията се ресетва или не. Просто като разглеждах CSS-а на сайта на O?? забелязах, че елементите, които получават фокус, не се отличават визуално.
Не им се връзвай на езика в документацията ан WordPress, имай предвид, че това все пак са съвети как да пишеш ЗА WordPress. В края на краищата по отношение на един проект конвенциите трябва да се спазват. А и неспазването на някои от препоръките не е пречка пред одобряването на тема например (поне досегашния ми опит показва така).
С времето съм разбрал едно нещо, за всеки проект(сайт) оптимизирането е специфично и винаги всичко е според зависи. След използването на софтуери, които оптимизират кода е добре да се мине всичко на ръка и да не се разчита на 100% на софтуера.
Честно казано аз си оптимизирам кода още докато го пиша, описвам си селекторите на един ред и нямам проблеми с това, но всичко идва с опита и пак казвам всичко е според зависи.
@Gothika_47, както се разбира от статията, самата оптимизация не е само крайният размер на файла... :)
Ето още един compressor ;) може би най-приличния който съм срещал :)
http://www.procssor.com/
Георги Калайджиев, не мисля че single-line форматирането на css-a затруднява четимостта му. Ползвам го навсякъде от години и не е никакъв проблем, а по-скоро въпрос на навик. Иначе ръководството ви е супер :)
Аз съм фен и на двата типа форматиране и като цяло препоръчвам да се комбинират, мисля че това се разбира от статията :). А защо смятам, че сингъл-лайн е по-трудно за четене? Понякога дори широкоекранните монитори не спасяват от супер дълги редове, което се превръща в ненужен скрол насам-натам. Да, има опция за word wrap, но става малко безсмислено. Освен това още в училище ни учат как да правим списъци и т.н. Тоест, ако изредим 50 продукта един под друг, много по-лесно ще ги прочетем или пък ще се ориентираме по първа буква. Нещо от тоя род. Докато ако всички са изредени на 1 ред, в един момент се слива начало и край. Друго предимство на мулти-лайн е, че могат да се дубликират редове с цел лека корекция (text-decoration, text-style например), а в сингъл-лайн ще трябва да се копира, скролва насам-натам и пр. Мога да дам десетки примери, но знам, че като вече свикнал човек, не мога да те убедя в противното... а и не трябва :). Всеки трябва да пише, както му е най-удобно, просто да има едно на ум, че този код 100% ще се пипа от някой впоследствие :).
За това с пипането от някой друг впоследствие съм напълно съгласен. Въпроса е че тогава би трябвало да пишеш и коментари за да улесниш следващия редактиращ, а аз просто съм фен на крайния обратен вариант - компресирам css-a и всеки който види тоя код може да получи безсъние за поне 1-2 нощи - няма дори интервали в него :)
Напоследък го правя по-рядко защото започнахме да минаваме css-ите през php и те директно се gzip-ват, така че нуждата от правенето на ръка на компресирането отпадна напоследък.
Намаляване на размера на css-ите с 15-25% води до осезаемо повишаване на бързодействието на сайта. Може да не ми повярват много хора, но в най-тежките ниши дори такива трикове ти помагат да дръпнеш 1-2 позиции нагоре в гоогле :)
Поздравления за чудесния сайт!
Да, аз споменах за тоя случай в статията - когато имаме работно копие на css-а и такова, което се gzip-ва например. Наистина си е най-готино.
Иначе поздравленията приети, стараем се :).