Разработката на уебсайт отпред често се представя като табуретка с три крака, състояща се от:
- HTML за структурата на даден сайт
- CSS за визуалните стилове
- Javascript за поведение
Вторият крак на тази табуретка, Cascading Style Sheets, поддържа три различни стила, които можете да добавите към документ.
- Вградени стилове
- Вградени стилове
- Външни стилове
Всеки от тези CSS стилове представя уникални предимства и недостатъци.
Вградени стилове
Вградените стилове са стилове, които се записват директно в маркера в HTML документа. Вградените стилове засягат само конкретния маркер, към който са приложени:
Това правило на CSS деактивира стандартната декорация на подчертан текст за тази връзка. Това обаче няма да промени никоя друга връзка на страницата. Това е едно от ограниченията на вградените стилове. Тъй като те се променят само за определен елемент, ще трябва да затрупате вашия HTML с тези стилове, за да постигнете единен дизайн на страницата. Това не е най-добрата практика: Всъщност това е една стъпка, премахната от дните на
шрифт тагове и примесите на структура и стил в уеб страниците.Вградените стилове също изискват много висока специфичност. Това ги прави трудни за презаписване с други, нелинейни стилове. Например, ако искате да направите даден сайт отзивчив и да промените начина, по който даден елемент изглежда на определени точки на прекъсване, като използвате медийни заявки, вградените стилове на елемент затрудняват това.
Вградените стилове са подходящи само когато ги използвате пестеливо, в подхода "изключение от правилото", който определя един или два елемента от техните връстници на страницата.
Вградени стилове
Вградените стилове се намират в главата на документа. Те са затворени в тагове и приличат много на външни CSS файлове в тази част на документа.
Вградените стилове засягат само етикетите на страницата, в която са вградени. За пореден път този подход отрича една от силните страни на CSS. Тъй като всяка страница съдържа стилове, дефинирани в заглавката, ако искате да направите промяна в целия сайт - като промяна на цвета на връзки от червено до зелено - ще трябва да направите тази промяна на всяка страница, тъй като всяка страница използва вграден стил лист. Този подход е по-добър от вградените стилове, но все още е проблематичен в много случаи.
Таблиците със стилове, които се добавят към главата на документ, също добавят значително количество код за маркиране към тази страница, което също може да направи страницата по-трудна за управление в бъдеще.
Предимството на вградените таблици със стилове е, че те се зареждат незабавно със самата страница, вместо да изискват да се зареждат други външни файлове. Тази техника може да се възползва от скоростта на изтегляне и перспективата за производителност.
Външни таблици със стилове
Повечето уебсайтове днес използват външни таблици със стилове. Външните стилове са стилове, които се записват в отделен документ и след това се прикачват към различни уеб документи. Те се извикват в основния документ с помощта на етикет в главата на документа. Външните таблици със стилове могат или да се намират на същия сървър като HTML, или да бъдат изцяло извлечени от друг сървър. Това често се случва с активи, като шрифтове, които много сайтове заемат от Google.
Външни таблици със стилове засягат всеки документ, към който са прикачени, което означава, че ако имате уебсайт от 20 страници, където всяка страница използва една и съща таблица със стилове (това обикновено се прави), можете да направите визуална промяна на всяка една от тези страници, като просто редактирате този стил лист. Тази икономия улеснява много дългосрочното управление на сайта.
Повечето професионални уеб дизайнери използват основен CSS файл, за да управляват оформлението и дизайна на сайта.
Недостатъкът на външните таблици със стилове е, че те изискват страници за извличане и зареждане на тези външни файлове. Не всяка страница ще използва всеки стил в CSS листа, толкова много страници ще заредят много по-голяма CSS страница, отколкото всъщност е необходима.
Въпреки че е вярно, че има хит за производителност за външни CSS файлове, той със сигурност може да бъде сведен до минимум. Реално погледнато, CSS файловете са само текстови файлове, така че те не са големи за начало. Ако целият ви сайт използва един CSS файл, вие също получавате предимството на този документ да бъде кеширан след първоначалното му зареждане, което означава, че може да има леко посещение на производителността на първата страница за някои посещения, но следващите страници ще използват кеширания CSS файл, така че всяко попадение ще бъде отречен.