Front-end tīmekļa vietnes izstrāde bieži tiek attēlota kā trīs kāju izkārnījumi, kas sastāv no:
- HTML vietnes struktūrai
- CSS vizuālajiem stiliem
- Javascript uzvedībai
Šīs taburetes otrā daļa, kaskādes stila lapas, atbalsta trīs dažādus stilus, kurus varat pievienot dokumentam.
- Iekļautie stili
- Iegulti stili
- Ārējie stili
Katrs no šiem CSS stiliem piedāvā unikālas priekšrocības un trūkumus.
Iekļautie stili
Iekļautie stili ir stili, kas ir ierakstīti tieši tagā HTML dokumentā. Iekļautie stili ietekmē tikai konkrēto tagu, uz kuru tie tiek lietoti:
Šis CSS noteikums deaktivizē šīs vienas saites standarta pasvītrojuma teksta noformējumu. Tomēr tas nemainīs nevienu citu saiti lapā. Tas ir viens no iekļauto stilu ierobežojumiem. Tā kā tie mainās tikai uz konkrētu vienumu, jums vajadzēs pakārtot HTML ar šiem stiliem, lai panāktu vienotu lapas dizainu. Tā nav labākā prakse: patiesībā tas ir viens solis, kas atcelts no fonts tagus un tīmekļa lapu struktūras un stila piemaisījumus.
Iekļautie stili prasa arī ļoti augstu specifiku. Tas viņus apgrūtina pārrakstīšanu ar citiem, neiesaistītiem stiliem. Piemēram, ja vēlaties vietni padarīt atsaucīgu un, izmantojot, mainīt elementa izskatu noteiktos pārtraukuma punktos plašsaziņas līdzekļu vaicājumi, elementa ievietotie stili to padara grūti izdarāmu.
Ievietotie stili ir piemēroti tikai tad, ja tos izmantojat taupīgi, izmantojot pieeju “Izņēmums no noteikuma”, kas atdala vienu vai divus elementus no viņu vienaudžiem lapā.
Iegultie stili
Iegultie stili atrodas dokumenta galvenē. Viņi ir iekļauti tagus un izskatās līdzīgi ārējiem CSS failiem šajā dokumenta daļā.
Iegultie stili ietekmē tikai tos tagus lapā, kuros tie ir iegulti. Vēlreiz šī pieeja noliedz vienu no CSS stiprākajām pusēm. Tā kā katrā lapā ir stili, kas definēti galvenē, ja vēlaties veikt izmaiņas visā vietnē, piemēram, mainīt krāsu saites no sarkanas līdz zaļai - šīs izmaiņas jums būs jāveic katrā lapā, jo katrā lapā tiek izmantots iegults stils lapa. Šī pieeja ir labāka nekā iekļautie stili, taču daudzos gadījumos tā joprojām ir problemātiska.
Stila tabulas, kas pievienotas dokumenta galvai, šai lapai pievieno arī ievērojamu daudzumu iezīmēšanas koda, kas arī lapu var padarīt grūtāk pārvaldīt nākotnē.
Iegulto stila lapu priekšrocība ir tā, ka tās nekavējoties tiek ielādētas kopā ar pašu lapu, nevis tiek prasīts, lai tiktu ielādēti citi ārējie faili. Šī tehnika var būt ieguvums no lejupielādes ātruma un veiktspējas perspektīvas.
Ārējās stila lapas
Mūsdienās lielākajā daļā vietņu tiek izmantotas ārējās stila lapas. Ārējie stili ir stili, kas tiek ierakstīti atsevišķā dokumentā un pēc tam pievienoti dažādiem tīmekļa dokumentiem. Viņi tiek ielūgti galvenajā dokumentā, izmantojot a tagu dokumenta galvā. Ārējās stila lapas var atrasties tajā pašā serverī, kur atrodas HTML, vai arī tās var pilnībā izvilkt no cita servera. Tas bieži notiek ar aktīviem, piemēram, fontiem, kurus daudzas vietnes aizņemas no Google.
Ārējās stila lapas ietekmēt jebkuru dokumentu, kuram tie ir pievienoti, kas nozīmē, ka, ja jums ir vietne ar 20 lappusēm, kur katrā lapā tiek izmantota viena un tā pati stila lapa (parasti tas tiek darīts), jūs varat vizuāli mainīt katru no šīm lapām, vienkārši rediģējot šo vienu stilu lapa. Šī ekonomika daudz atvieglo vietņu ilgtermiņa pārvaldību.
Lielākā daļa profesionālo tīmekļa dizaineru izmanto primāro CSS failu, lai pārvaldītu vietnes izkārtojumu un dizainu.
Ārējo stila lapu negatīvie aspekti ir tādi, ka tām ir nepieciešamas lapas, lai ielādētu un ielādētu šos ārējos failus. Ne katrā lappusē CSS lapā tiks izmantoti visi stili, tāpēc daudzas lapas ielādēs daudz lielāku CSS lapu, nekā tas faktiski nepieciešams.
Lai gan ir taisnība, ka ārējiem CSS failiem ir veiktspējas trāpījums, to noteikti var samazināt līdz minimumam. Reāli CSS faili ir tikai teksta faili, tāpēc vispirms tie nav lieli. Ja visā jūsu vietnē tiek izmantots viens CSS fails, jūs saņemat arī priekšrocību, ka šis dokuments tiek kešatmiņā saglabāts pēc tā sākotnējās ielādes, kas nozīmē, ka Dažos apmeklējumos pirmajā lapā varētu būt neliels veiktspējas trāpījums, bet nākamajās lapās tiks izmantots kešatmiņā saglabāts CSS fails, tāpēc jebkurš trāpījums būtu noliegts.