Правила за писане на CSS

правила

Тази статия ще бъде разбрана само от тези, които са запознати с основите на CSS, така че ако не знаете какво е това, първо прочетете другите статии на този сайт.

Този път искам да ви дам съвет относно правилата за писане наCSS. Многоуеб дизайнериизползват CSS неправилно. И ако с малък код това не е страшно, тогава ако стилът вече е разтегнат върху стотици или дори хиляди редове, тогава идва момент, в който дизайнерът вече не разбира какво се случва. И едва на сополи и по някакъв начин, напълно обезобразявайки кода, довежда въпроса до „завършване“. В резултат на това не може да става въпрос за качество и стабилност на работата. За да сведа този фактор до минимум (защото така или иначе не можете да го унищожите напълно), искам да ви дам няколко съвета за писане наCSSстилове.

Правило №1 за писане на CSS – Направете го правилно

Много дизайнери използват реда, в който са написани стиловете, за да дадат различни приоритети. Тоест, ако напишем две свойства с различни стойности в един и същ типCSS style(inline-style,inline-styleи други), тогава ще бъде приложен стилът, който е написан по-долу. Освен това, това се отнася не само засвойствата, но и заселекторите. Тоест, стиловете често се включват на различни страници, в различен ред, така че всяка страница в крайна сметка прилага своя собствена. Разбира се, това е изключително лошо, защото ако случайно нарушите поръчката, грешката ще се появи (и най-лошото е, че не е факт веднага) и ще бъде много трудно да я намерите. Освен това има голяма вероятност от дублиране и това вече е "мръсотия", която в най-добрия случай просто ще увеличи размера на файла, а в най-лошия - ще се провали в най-неочаквания момент.Затова избягвайте максимално влиянието на поръчката!

Правило за писане на CSS №2 – Не се страхувайте от наследяване

По някаква причина повечетоуеб дизайнерисе страхуват от наследяването и това е чудесен начин за съкращаване и опростяване наCSS стила. Вместо това, дизайнерите поставят огромно количество наслоениконтекстниселектори. И така за всеки елемент на страницата. Без съмнение това е необходимо, но само когато е необходимо да се отмени основният стил, а писането за всеки елемент (понякога дори едно и също) е много лош знак.

Правило за писане на CSS #3 - Запазете своя стил

Много важно правило е даспазвате собствения си стил на писане. Например моят стил на писане е:

Тоест имам следните правила:име на селектор, интервал, фигурна скоба, от раздела на следващия ред, име на свойство, двоеточие и стойност, разделена с интервал. Акоселекторътима други свойства, тоот следващия ред, чрез табулация, отново името на свойството, а чрез двоеточие и интервал - стойността. Всичкиселектори(в моя пример -bиp) разделямс празен ред. Това е моят стил на писане. Също така е препоръчително селекторите да се пишат по азбучен ред - това също е правилно и напоследък ги пиша така.Но най-важното е да поддържате собствения си стил винаги и навсякъде. Защото много хора го сменят ден след ден и после трудно възприемат какво са написали.

Правило за писане на CSS #5 - Нулиране на файл

Това правило остава под съмнение, въпреки че без съмнение е правилно, но оставям на вас да го използвате или не. Състои се в следното: трябва да създадетеCSS файл(reset.css), който ще нулира всички стилове, приложени към стандартнитеHTMLелементи. Например премахнете удебеления шрифт от етикетаили премахнетепо-голям размер на текста за заглавия

Дали да използвате този съвет или не, зависи от вас, но според мен това е много голяма загуба на време. И в крайна сметка все още трябва да поставите онези стилове, които първоначално сте изтрили.

Това са всички правила за писане наCSS, за които исках да ви разкажа в тази статия. Ако следвате тези правила, гарантирам, че мръсният код ще бъде премахнат!

Добавете ме като приятелVKontakte: http://vk.com/myrusakov. Ако искате да оцените мен и работата ми, напишете го в моята група: http://vk.com/rusakovmy.

Препоръчайте тази статия на вашите приятели:

Ако харесвате сайта, поставете връзка към него (на вашия сайт, във форума, в контакт):

Тя изглежда така:

  • BB-код на линка за форуми (например можете да го поставите в подписа):
  • Коментари ( 20 ):

    Здравей Майкъл. Можете ли да ми кажете какво е css по подразбиране?

    Това е файлът, в който всички стилове се нулират, така че всички браузъри ще рендират стила по един и същи начин на този етап. Традиционно се нарича reset.css

    тези. този файл не е таблица със стилове?

    Е. Там се задават правила, при които всички отстъпи, полета, рамки и други свойства, дадени от браузърите по подразбиране, се анулират. Въведете reset.css в google и мисля, че първият сайт ще покаже как изглежда този файл.

    Благодаря за отговора. За съжаление търсачките не дадоха толкова изчерпателен отговор като вас. Благодаря отново!

    Reset.css изглежда така: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, център, dl,dt, dd, ol, ul, li, fieldset, формуляр, етикет, легенда, таблица, надпис, tbody, tfoot, thead, tr, th, td, статия, настрана, платно, детайли, вграждане, фигура, figcaption, долен колонтитул, горен колонтитул, hgroup, меню, навигация, изход, рубин, раздел, резюме, време, маркировка, аудио, видео < марж: 0; подплата: 0; граница: 0; размер на шрифта: 100% шрифт: наследяване; вертикално подравняване: базова линия; >/* Нулиране на HTML5 роля на показване за по-стари браузъри */ статия, настрани, подробности, figcaption, фигура, долен колонтитул, заглавка, hgroup, меню, навигация, раздел < дисплей:блок; > тяло < височина на реда: 1; >ol, ul < стил на списък: няма; > цитат, q < кавички: няма; >blockquote:преди, blockquote:след, q:преди, q:след < съдържание: ''; съдържание: няма; >таблица

    Здравей Майкъл. Можете ли да обясните по-подробно за писането на CSS файл (reset.css). Необходимо е да се премахне удебеленото подчертаване на текста в сайта, а страниците са много. Как да го напиша правилно?

    По-горе е пример за това как изглежда. Няма нищо особено в него, той просто зацикля и нулира всички възможни свойства.

    Здравейте, кажете ми как да се отърва от тези празнини отстрани? http://s2.ipicture.ru/uploads/20130321/rrSkV21f.png

    Каквото и да е, няма да гадая.

    Здравейте, каква е стандартната ширина на сайта? Благодаря.

    Гледайки какво. Обикновено правете ширина 990px, ако е фиксирана. И ако е гума, тогава се адаптирайте до 990px ​​​​и повече.

    Здравей Майкъл, би ли обяснил правило №1 по по-прост начин (или с пример). Изобщо не ми достига.

    Първо, препоръчвам да използвате само CSS от етикета за връзка. Второ, трябва да бъде написано така, че дори и с пренареждане на селекторите нищо да не се промени.

    Здравейте! Кой е най-добрият начин за стилизиране на съдържанието на div - чрез присвояване на клас/идентификатор на блока, т.е. самия div, или на съдържанието?

    В зависимост от съдържанието. Ако е текст, тогава е по-добре за блок. Ако е списък или нещо друго, тогава самият списък е по-добър. Не играе роля.Зависи от желаното гнездене

    dobrii ve4er. u menea document css ne delaet nikakih izmenenia,ne mogu poneati v 4iom problem? Благодаря ви предварително.

    може да има до милион проблеми) свързахте ли го дори? прочетете какво е CSS вземете безплатен курс от Michael за HTMl, за да разберете какво и как