Писане добър код, webreference
За написването на много HTML и CSS, които трябва да бъдат проучени - .. Различни елементи, атрибути, имоти, ценности и т.н. Основната цел на всеки урок до този момент беше обяснението на различните компоненти на HTML и CSS, надявайки се да ви помогне да разберете основните основите на двата езика. Този урок се върнем назад и да изглежда по-абстрактно HTML картина и CSS.
По-конкретно, този урок е посветен на най-добрите практики писане код в HTML и CSS. Техниките, описани тук служат като обща рамка за писане на HTML и CSS. Те се използват във всеки урок и те винаги трябва да се има предвид при програмирането.
Методи за писане на HTML
Набор от най-добрите практики, предназначени да спасят кода проста и добре организиран. Основни методи в HTML не се различават, целта им е да пиша за маркиране, добре структурирана и съвместим със стандартите. Препоръки описани тук предлагат кратко въведение в методите на писане на HTML и списъкът е по никакъв начин по делото не се ограничава само до тях.
Маркиране стандарти
HTML присъщо прощава се отнася до езика, който позволява на лош код, за да се изпълни и да се покаже с различна степен на точност. Успешно картографиране, обаче, не означава, че нашият код семантично правилен и гарантира, че кодът е съвместим със стандартите. В допълнение, лош код е непредсказуема и не можете да бъдете сигурни, че можете да получите в рамките на картата. Трябва да бъдем внимателни, когато пишете HTML - приспособления за покриване на всички елементи на право на ползване на документи за самоличност и класове правилно, и винаги се тества нашия код.
Следният код съдържа няколко грешки, включително и интрото употреби, стойността на атрибут за идентификатор на няколко пъти, а след това той трябва да бъде уникален елементи стойност
и са затворени в грешен ред в първия параграф, и елемента <р> във втория параграф не се затваря изобщо.
Използването на семантичните елементи
Библиотека елементи в HTML е доста голяма, се състои от повече от 100 позиции на разположение за употреба. Решете кои елементи да се използва, за да опише различно съдържание могат да бъдат трудни, но тези елементи са в основата на семантика. Ние трябва да се разгледа и да се провери повторно кода си и се уверете, че ние сме с помощта на съответните семантични елементи. Хората ще ни благодарят в дългосрочен план за създаването на един по-достъпен сайт и вашата HTML ще бъде много по-лесно да се стил. Ако не сте сигурни за вашия код, намери приятел, който ще ви помогне и ще извърши рутинна проверка на кода.
Следният HTML не използва правилните заглавие и параграф елементи, но вместо това се използват безсмислено стайлинг елементи и групиране на съдържание.
Използвайте правилния структурата на документа
Както бе споменато по-горе, HTML е език прощава оттам страница да се показва без използването на елементи или тип документ, .
и . Без типа на документа и тези структурни елементи, страниците няма да се показват правилно във всеки браузър.Ние винаги трябва да сме сигурни, че използвате правилния структурата на документа, включително типа на документа и елементите .
и . Това прави нашите страници са в съответствие със стандартите и напълно семантични и гарантира, че те ще се покажат като имаме нужда.Дръжте организирана синтаксис
С развитието на HTML страници, за да се контролира се превръща в предизвикателство. За щастие, има няколко прости правила, които могат да ви помогнат да запазим синтаксис е чист и организиран. Те включват следното:
- Използвайте малки букви в имената на елементи, атрибути, и ценности; Отстъпи на поделементи;
- Използвайте строго двойни кавички, вместо единични кавички или не;
- премахване на черта в края на самозатварящи се елементи; По-ниски стойности за булеви атрибути.
Спазването на тези правила ще ви помогнат да запазим код е чист и четлив. Обърнете внимание на две групи от HTML-долу, добро код по-лесно се възприема и разбираемо.
Използвайте практическата стойност на документи за самоличност и класове
Създаване на стойност идентификатори и класове може да бъде един от най-трудните части на писане на HTML. Тези стойности трябва да са практични, по отношение на съдържанието, а не за неговия стил. Използвайки стойността червено, за да опише червения текст не е идеален, тъй като тя описва появата на съдържанието. Ако някога ви се наложи да промените стила на текста, за да синьо, това трябва да се промени, не само CSS, HTML, но и във всеки един случай, когато класът отговаря червено.
По-долу се приема в HTML, което е червено предупреждение. Въпреки това, когато стил предупреждение ще се промени в оранжево, червено името на класа ще бъде безсмислено и най-вероятно ще доведе до объркване.
Използване на алтернативен текст за изображения
Изображенията трябва винаги да включват н атрибут. Екранни четци и друг софтуер да разчитат на атрибута н. за да се осигури контекст за изображенията.
стойност Alt атрибут се описва, че се състои от изображение. Ако изображението не съдържа нищо от съвременни, ALT атрибут върху все още трябва да е активиран, но стойността му трябва да е празен за екранни четци го игнорират и не се чете името на файла с изображението.
Освен това, ако изображението не носи важно значение, че е възможно, например, като част от потребителския интерфейс, когато това е възможно да бъдат включени в CSS като фоново изображение, а не като елемент .
Отделни съдържание от стил
Никога, никога не използват вградени стилове на HTML. Той създава страници, които са прекалено дълго време да се зареди, е трудно да се поддържа и да предизвика главоболие за дизайнери и разработчици. Вместо това, използвайте външни стилови листове с помощта на класове за целеви клетки и как да се използват стилове.
Тук, в лош код желаните промени в стила, трябва да бъде направено в HTML. Следователно, тези стилове не могат да се използват повторно и е вероятно да страдат от консистенцията на стил.
Избягвайте излишно
Когато пишете HTML, че е лесно да се пренасят, добавяне на елемент
Тук елемент там, за изграждане на всички необходими стилове. Въпреки, че тя работи и добавя доста подувам на страницата, в края на краищата ние не сме сигурни, че всеки елемент Това го прави.
Ние трябва да направим всичко, за да запази кода малък и намаляване на маркирането, свързваща няколко стила в един елемент, ако е възможно. В допълнение, трябва да се използват подходящи структурни елементи в HTML5.
Постоянно се реорганизират код
С течение на времето, уеб сайтове и базовия код продължава да се развива и расте, оставяйки след себе си доста малко боклук. Не забравяйте да премахнете стария код и стилове, колкото е необходимо, когато редактирате страницата. Също така, отделете време, за да се оцени и се организира програмата, след като е написана, за начините за намаляването му и да я направи по-лесно управляеми гледам.
Методи за писане на CSS
Подобно на HTML, CSS техники за писане, насочени към запазване на кода лесен и добре организиран. CSS се съдържат и допълнителни принципи, свързани с някои от тънкостите на езика.
CSS напише няколко реда и пространства
Когато пишете CSS е важно да се постави всеки селектор и описание на правилата на нов ред. След това, в рамките на всеки селектор искаме да отстъп описания.
След селектора и на първия описанието отива отваря скоба, която трябва да съдържа пространство пред него. В описанието, което трябва да сложите интервал след дебелото черво, то тогава има собственост, и завършва с точка и запетая.
Използвайте имената на съответните клас
имената на класовете (или стойности) трябва да са модулни и лечение на съдържание в рамките на един елемент, а не да се появява най-напред, колкото е възможно. Тези стойности трябва да бъдат написани по такъв начин, че те приличат на CSS синтаксис. Съответно, имената на класа трябва да са малки, и да използват тирето като разделител.
МАРШАЛОВИ правилни селектори
CSS селектори могат да излязат извън контрол, ако те не са внимателно поддържани. Селектори могат лесно да станат твърде дълги и твърде специфични.
Колкото по-дълго и по-селектора включва подобрения, по-високата степен на конкретност. Колкото по-висока специфичност, толкова по-вероятно, че селектора ще прекъсне CSS каскада и да предизвика нежелани проблеми.
В допълнение, се запази спецификата на нашите селектори възможно най-ниски, нека да не използвате нашите документи за самоличност в селектори. Идентификатори твърде специфично, бързо повишаване на спецификата на селектор и често нарушават каскадата в CSS-файлове. Против идентификатори далеч надхвърлят техните предимства и би било разумно да ги избягвате.
Нека използваме по-кратка и най-вече прави селектори. Посочете само две или три нива на инвестиции и да премахнете колкото твърде дълго селектори, колкото е възможно.
Използвайте конкретни класове, ако е необходимо
Има моменти, когато селектор CSS е толкова дълго време и специфична, че тя вече не носи значение. Това създава забавяне на изпълнението и мощност по време на движение. В този случай, се препоръчва да се използва един и същ клас. клас за кандидатстване за елемента цел да се създаде по-код в HTML, но ще позволи на кода, показан по-бързо и ще премахне всички пречки пред контрол.
Например, ако елементът вградени в във вътрешността на елемента
Използвайте съкратени свойства и стойности
Една от функциите на CSS е възможността за използване на съкращения за свойствата и ценности. Повечето от имотите и ценностите позволи съкратен правопис. Като пример, вместо да пишете четири различни свойства, основаващи се на margin- и техните стойности за определяне на уплътнение около четирите страни на елемента, се използва един марж собственост. която ще определи стойностите на всички четири страни едновременно. Използването на съкратения вариант ви позволява бързо да се идентифицират и определят стила.
В същото време, когато искате да инсталирате една стойност, не трябва да използвате съкратен вариант. При монтаж е само долната граница. Използвайте една долна граница собственост. Това гарантира, че други ценности марж няма да бъдат презаписани, а ние можем лесно да се определи кои от приложимия марж без много познавателни усилия.
Използвайте съкратени цветови стойности шестнадесетични
Ако е възможно, използвайте стенограмите стойност trohsimvolnoe шестнадесетичен цвят, и винаги пишат с малки букви в шестнадесетични стойност на цвят. Идеята, отново, е да остане в съответствие да се избегне объркване и да синтаксис.
Падащо единици имат нулеви стойности
Един от начините за намаляване на количества прост CSS, когато пишете - предприятията за отстраняване имат нулеви стойности. Без значение кой приложена мярка за дължина - от пикселите, проценти, ем и др. - нула винаги е нула. добавяне на един не е необходимо и не носи никаква допълнителна стойност.
Групирането и съгласуване на продавача версия представки
В зависимост от това къде представката е продавач версия - в имота или стойността, подравняването може да се промени. Например, следния код спестява добър фон имот съответствие наляво, докато функцията на линеен градиент () с префикси се измества така, че техните стойности се регулира вертикално. След това, кутия оразмеряване имот с представките се измести така, че те са били монтирани вертикално.
Както винаги, целта - да се направи стила-лесни за четене и редактиране.
продавач версия представки
При използване на префикс, ние трябва да се уверете, че да се сложи версията на собственост или стойност, без префикса в крайна сметка, след като всички версии на префикса. Това гарантира, че браузъри, които поддържат версията без префикса ще показват стила според разположението си в каскадата от четене стилове с началото на файла към дъното.
Модулност на стилове за повторна употреба
CSS е изграден върху който ви позволява да използвате повторно стилове, по-специално, като се използват класове. Поради тази причина, стиловете, възложени на клас, трябва да бъдат модулни и достъпни за обмен на информация между елементите, когато е необходимо.
Ако новинарската секция е представена в блок, който включва границите, цвета на фона, както и други стилове, клас новини може да изглежда добър вариант. Въпреки това, същите стилове могат да бъдат приложени към списъка с предстоящи събития. Клас новина не е подходящо в този случай. Клас подвиг кутия ще направи повече смисъл и може да се използва широко в целия сайт.
Надяваме се, че принципите на писане красив HTML и CSS стават все по-ясни. Въпреки, че всеки език има своя собствена сложност, повечето от тези методи могат да бъдат разделени между двата езика, както и с много други програмни езици.
Лично ние трябва да направим всичко възможно, за да подкрепят тези принципи, по време на работа в екип, ние също трябва да направим всичко възможно да се обучават екип тези техники. От друга страна, отборът може да бъде ценни предложения и методи, които ние трябва да следват.
За да подчертае някои от основните теми в този урок, нашата HTML и CSS винаги трябва да:
Тези методи са само началото, а защото езици се развиват, а ние пишем повече и по-HTML и CSS, ще се разработят нови методи. Всичко това е част от прекрасната знанието на HTML и CSS.
Сега вие сте въоръжени с някои мощни познания за това как да се създаде уеб сайтове в HTML и CSS, и аз съм се радвам да видя, че правите с тях. Дръж ме в течение за това как това се случи и успешното създаване вас!
Ресурси и връзки
Всеки урок е снабден с набор от средства за допълнително обучение и открития. По-долу е изложен един дълъг списък от ресурси и полезни връзки.
HTML и CSS
Дизайн вдъхновение
Рамки и стилово ръководство
Когато пишете HTML, че е лесно да се пренасят, добавяне на елемент
Ние трябва да направим всичко, за да запази кода малък и намаляване на маркирането, свързваща няколко стила в един елемент, ако е възможно. В допълнение, трябва да се използват подходящи структурни елементи в HTML5.
Постоянно се реорганизират код
С течение на времето, уеб сайтове и базовия код продължава да се развива и расте, оставяйки след себе си доста малко боклук. Не забравяйте да премахнете стария код и стилове, колкото е необходимо, когато редактирате страницата. Също така, отделете време, за да се оцени и се организира програмата, след като е написана, за начините за намаляването му и да я направи по-лесно управляеми гледам.
Методи за писане на CSS
Подобно на HTML, CSS техники за писане, насочени към запазване на кода лесен и добре организиран. CSS се съдържат и допълнителни принципи, свързани с някои от тънкостите на езика.
CSS напише няколко реда и пространства
Когато пишете CSS е важно да се постави всеки селектор и описание на правилата на нов ред. След това, в рамките на всеки селектор искаме да отстъп описания.
След селектора и на първия описанието отива отваря скоба, която трябва да съдържа пространство пред него. В описанието, което трябва да сложите интервал след дебелото черво, то тогава има собственост, и завършва с точка и запетая.
Използвайте имената на съответните клас
имената на класовете (или стойности) трябва да са модулни и лечение на съдържание в рамките на един елемент, а не да се появява най-напред, колкото е възможно. Тези стойности трябва да бъдат написани по такъв начин, че те приличат на CSS синтаксис. Съответно, имената на класа трябва да са малки, и да използват тирето като разделител.
МАРШАЛОВИ правилни селектори
CSS селектори могат да излязат извън контрол, ако те не са внимателно поддържани. Селектори могат лесно да станат твърде дълги и твърде специфични.
Колкото по-дълго и по-селектора включва подобрения, по-високата степен на конкретност. Колкото по-висока специфичност, толкова по-вероятно, че селектора ще прекъсне CSS каскада и да предизвика нежелани проблеми.
В допълнение, се запази спецификата на нашите селектори възможно най-ниски, нека да не използвате нашите документи за самоличност в селектори. Идентификатори твърде специфично, бързо повишаване на спецификата на селектор и често нарушават каскадата в CSS-файлове. Против идентификатори далеч надхвърлят техните предимства и би било разумно да ги избягвате.
Нека използваме по-кратка и най-вече прави селектори. Посочете само две или три нива на инвестиции и да премахнете колкото твърде дълго селектори, колкото е възможно.
Използвайте конкретни класове, ако е необходимо
Има моменти, когато селектор CSS е толкова дълго време и специфична, че тя вече не носи значение. Това създава забавяне на изпълнението и мощност по време на движение. В този случай, се препоръчва да се използва един и същ клас. клас за кандидатстване за елемента цел да се създаде по-код в HTML, но ще позволи на кода, показан по-бързо и ще премахне всички пречки пред контрол.
Например, ако елементът вградени в във вътрешността на елемента
Използвайте съкратени свойства и стойности
Една от функциите на CSS е възможността за използване на съкращения за свойствата и ценности. Повечето от имотите и ценностите позволи съкратен правопис. Като пример, вместо да пишете четири различни свойства, основаващи се на margin- и техните стойности за определяне на уплътнение около четирите страни на елемента, се използва един марж собственост. която ще определи стойностите на всички четири страни едновременно. Използването на съкратения вариант ви позволява бързо да се идентифицират и определят стила.
В същото време, когато искате да инсталирате една стойност, не трябва да използвате съкратен вариант. При монтаж е само долната граница. Използвайте една долна граница собственост. Това гарантира, че други ценности марж няма да бъдат презаписани, а ние можем лесно да се определи кои от приложимия марж без много познавателни усилия.
Използвайте съкратени цветови стойности шестнадесетични
Ако е възможно, използвайте стенограмите стойност trohsimvolnoe шестнадесетичен цвят, и винаги пишат с малки букви в шестнадесетични стойност на цвят. Идеята, отново, е да остане в съответствие да се избегне объркване и да синтаксис.
Падащо единици имат нулеви стойности
Един от начините за намаляване на количества прост CSS, когато пишете - предприятията за отстраняване имат нулеви стойности. Без значение кой приложена мярка за дължина - от пикселите, проценти, ем и др. - нула винаги е нула. добавяне на един не е необходимо и не носи никаква допълнителна стойност.
Групирането и съгласуване на продавача версия представки
В зависимост от това къде представката е продавач версия - в имота или стойността, подравняването може да се промени. Например, следния код спестява добър фон имот съответствие наляво, докато функцията на линеен градиент () с префикси се измества така, че техните стойности се регулира вертикално. След това, кутия оразмеряване имот с представките се измести така, че те са били монтирани вертикално.
Както винаги, целта - да се направи стила-лесни за четене и редактиране.
продавач версия представки
При използване на префикс, ние трябва да се уверете, че да се сложи версията на собственост или стойност, без префикса в крайна сметка, след като всички версии на префикса. Това гарантира, че браузъри, които поддържат версията без префикса ще показват стила според разположението си в каскадата от четене стилове с началото на файла към дъното.
Модулност на стилове за повторна употреба
CSS е изграден върху който ви позволява да използвате повторно стилове, по-специално, като се използват класове. Поради тази причина, стиловете, възложени на клас, трябва да бъдат модулни и достъпни за обмен на информация между елементите, когато е необходимо.
Ако новинарската секция е представена в блок, който включва границите, цвета на фона, както и други стилове, клас новини може да изглежда добър вариант. Въпреки това, същите стилове могат да бъдат приложени към списъка с предстоящи събития. Клас новина не е подходящо в този случай. Клас подвиг кутия ще направи повече смисъл и може да се използва широко в целия сайт.
Надяваме се, че принципите на писане красив HTML и CSS стават все по-ясни. Въпреки, че всеки език има своя собствена сложност, повечето от тези методи могат да бъдат разделени между двата езика, както и с много други програмни езици.
Лично ние трябва да направим всичко възможно, за да подкрепят тези принципи, по време на работа в екип, ние също трябва да направим всичко възможно да се обучават екип тези техники. От друга страна, отборът може да бъде ценни предложения и методи, които ние трябва да следват.
За да подчертае някои от основните теми в този урок, нашата HTML и CSS винаги трябва да:
Тези методи са само началото, а защото езици се развиват, а ние пишем повече и по-HTML и CSS, ще се разработят нови методи. Всичко това е част от прекрасната знанието на HTML и CSS.
Сега вие сте въоръжени с някои мощни познания за това как да се създаде уеб сайтове в HTML и CSS, и аз съм се радвам да видя, че правите с тях. Дръж ме в течение за това как това се случи и успешното създаване вас!
Ресурси и връзки
Всеки урок е снабден с набор от средства за допълнително обучение и открития. По-долу е изложен един дълъг списък от ресурси и полезни връзки.