Tři typy stylů CSS

Vývoj webových stránek front-end je často reprezentován jako třínohá stolice složená z:

• HTML pro strukturu webu
• CSS pro vizuální styly
• Javascript pro chování

Druhá noha této stoličky, kaskádové šablony stylů, podporuje tři různé styly, které můžete přidat do dokumentu.

1. Inline styly
2. Vložené styly
3. Externí styly

Každý z těchto stylů CSS představuje jedinečné výhody a nevýhody.

Vložené styly

Vložené styly jsou styly, které jsou zapsány přímo do značky v dokumentu HTML. Vložené styly ovlivňují pouze konkrétní značku, na kterou jsou použity:

Toto pravidlo CSS deaktivuje standardní výzdobu podtržení textu pro tento jeden odkaz. Nezměnilo by to však žádný další odkaz na stránce. Toto je jedno z omezení vložených stylů. Vzhledem k tomu, že se mění pouze na konkrétní položce, budete muset vrhnout svůj HTML s těmito styly, abyste dosáhli jednotného designu stránky. To není nejlepší postup: Ve skutečnosti je to jeden krok odstraněný z doby písmo tagy a příměs struktury a stylu na webových stránkách.

Inline styly také vyžadují velmi vysokou specificitu. Díky tomu je obtížné je přepsat jinými, nelineárními styly. Například pokud chcete, aby web reagoval a změnil způsob, jakým prvek vypadá pomocí určitých zarážek mediální dotazy, inline styly na prvku to ztěžují.

Vložené styly jsou vhodné, pouze pokud je používáte střídmě, v přístupu „výjimka z pravidla“, který nastavuje jeden nebo dva prvky od jejich vrstevníků na stránce.

Vložené styly

Vložené styly jsou umístěny v záhlaví dokumentu. Jsou uzavřeni tagy a vypadají podobně jako externí soubory CSS v této části dokumentu.

Vložené styly ovlivňují pouze značky na stránce, do které jsou vloženy. Tento přístup opět popírá jednu ze silných stránek CSS. Protože každá stránka obsahuje styly definované v záhlaví, pokud byste chtěli provést změnu celého webu - jako je změna barvy odkazů z červené na zelenou - tuto změnu byste museli provést na každé stránce, protože každá stránka používá vložený styl prostěradlo. Tento přístup je lepší než vložené styly, ale v mnoha případech stále problematický.

Stylové listy, které jsou přidány do záhlaví dokumentu, také přidávají na tuto stránku značné množství značkovacího kódu, což může také v budoucnu ztížit správu stránky.

Výhodou vložených šablon stylů je, že se načtou okamžitě se samotnou stránkou místo toho, aby vyžadovaly načtení dalších externích souborů. Tato technika může být výhodou z hlediska rychlosti a výkonu stahování.

Externí šablony stylů

Většina webových stránek dnes používá externí šablony stylů. Externí styly jsou styly, které jsou zapsány do samostatného dokumentu a poté připojeny k různým webovým dokumentům. Jsou povoláni do hlavního dokumentu pomocí a tag v záhlaví dokumentu. Externí šablony stylů mohou být umístěny na stejném serveru jako HTML, nebo je lze zcela stáhnout z jiného serveru. To se často stává u podkladů, jako jsou písma, která si mnoho webů vypůjčuje od Googlu.

Externí styly ovlivní jakýkoli dokument, ke kterému jsou připojeny, což znamená, že pokud máte 20stránkový web, kde každá stránka používá stejný styl (obvykle se to děje), můžete vizuálně změnit každou z těchto stránek jednoduchou úpravou daného stylu prostěradlo. Díky této ekonomice je dlouhodobá správa stránek mnohem jednodušší.

Nevýhodou externích šablon stylů je, že vyžadují stránky k načtení a načtení těchto externích souborů. Ne každá stránka použije každý styl v listu CSS, takže mnoho stránek načte mnohem větší stránku CSS, než ve skutečnosti potřebuje.

I když je pravda, že u externích souborů CSS existuje výkonnostní zásah, lze jej určitě minimalizovat. Realisticky jsou soubory CSS pouze textové soubory, takže na začátek nejsou velké. Pokud celý váš web používá jeden soubor CSS, získáte také výhodu, že se tento dokument uloží do mezipaměti poté, co byl původně načten, což znamená, že u některých návštěv by mohlo dojít k mírnému zásahu do výkonu na první stránce, ale následující stránky budou používat soubor CSS uložený v mezipaměti, takže jakýkoli zásah by byl negován.