8 чести грешки при писане на CSS

 In Дизайн и код

Днес попаднах на една много хубава статия свързана с програмирането, че даже и дизайна, защото всички знаят, че CSS-a всъщност е основата на визията на даден уеб сайт.
Статията е написана от imsky (Ivan M), който е от САЩ, а преводът е мой.

Да започваме с грешките, които се допускат.

1. Непознаване на стандартите – много хора занимаващи се с уеб, не са запознати със стандартите на W3 и допускат грешки при изграждането на структурата на сайта. В момента W3C CSS 2.1 е единствения документ с пълно описание на CSS елементите, тяхните стойности и функции. Естествено стандартите се променят всеки ден, за това е хубаво да наваксвате от време на време, ако сте изпуснали част от материала.

2. “Супа” от div-ве – често начинаещите използват цяла армада от div-ве за да постигнат желаният ефект, който може да се постигне и с няколко използвани по подходящ начин. Многото div-ве водят до няколко лоши последици, като забавянето на зареждането на страниците, кода става по-трудно манипулируем (промени за в бъдеще). Ако можете да използвате един div на няколко места, не използвайте различни наименования за едно и също.

3. ID срещу Class – макар да се структурират по сходен начин елементите имат разлика. Най-лесното разделение може да бъде изречено и така ID-то е за един елемент, докато class-a е за много елементи. Например ID е “Георги Георгиев”, докато Class е “София”. Много хора живеят в София, но Георги Георгиев е индивидуален човек. Него могат да му се придадат малко стойности (височина и килограми да речем), докато към хората от София може да се придадат повече (цвят на коса, облекло, тегло и тн.)

4. Не оптимизация на кода – много хора не използват по-кратки начини за придаване на определени стойности на елементите. Например трябва да се зададе граница 1 пиксел. По-трудоемкия начин и съответно по-лошо оптимизирания е така:

border-top-width:1px;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:1px

/*По-горния код може да бъде оптимизиран така:*/
border-width: 1px 1px 1px 1px;

Естествено има и още по-добър начин за оптимизация в случай, че дебелината на линията е една и съща за всички страни:
border-width: 1px; (горе/долу и след това ляво/дясно положение).

Ако 2 по 2 линиите са с еднакви параметри няма проблем да се зададат така: border-width: 1px 2px;

Има доста варианти да съкратите дадена част от кода някои от тях можете да намерите тук и тук.
Ето кратък лист с по-често използваните:
font: style, weight, size, family => Пример: font: italic bold 12px Arial;

border: width, style, color => Пример: border:1px solid #ccc;

background: color, image, repeat => Пример: background: #000 url(image.png) no-repeat; (забелязва се, че цвета е преди изображението. По този начин, ако изображението е прозрачно или не се повтаря, отдолу ще се вижда цвета).

Цветове – когато имате повторение на символите в hex стойността на цвета, можете да напишете #111 вместо #111111;

5. Игрориране на Doctype – повечето браузъри ще се справят с каквъвто и код да им подадете. Незатворени тагове, такива, които са затворени, но всъщност никога не са били отваряни и др. И все пак всеки различен браузър ще интерпретира кода по собствен си начин. За да избегнете това използвайте Doctype, който би трябвало да укаже точно по кой начин да се държи браузърът интерпретирайки вашият код.
В HTML 4 трябва да окажете strict doctype или transitional doctype. За щастие браузърите след IE 6 и по-нагоре се справят добре с HTML 5 doctype-а. Или иначе казано браузърът влиза в стандартно интерпретиране на кода и се избягва визуализирането на грешки като незатворени тагове и др. В HTML 5 декларирането на doctype ставав само със следния ред поставен в началото на всеки документ.

6. Неуместно използване на “мерни единици” – най-яркия пример може да се зададе с използването на пиксели като височина на текст. Макар 1024х768 да е все още най-често срещаната резолюция текст 12 px би изглеждал нечетимо малък върху 1920х резолюция. Желателно е да се използват единици, които могат да се оразмеряват спрямо резолюцията на екрана. Такива единици са “em”-те. Например font-size:1.2em; което ще рече 1,2 пъти по-голям от стандартния за браузъра размер (за FF и IE стойността е 16 пиксела).

8. Грешна валидация – дам, макар и валидатора в общи линии да казва къде е грешката и вероятната причина пораждаща я, част от начинаещите просто ги пренебрегват. Използвайте HTML и CSS валидаторите. Те ще ви гарантират в голяма степен еднакво интерпретиране на кода в различните браузъри.

Recommended Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Start typing and press Enter to search