Tiga Jenis Gaya CSS

Pengembangan situs web front-end sering direpresentasikan sebagai bangku berkaki tiga yang terdiri dari:

• HTML untuk struktur situs
• CSS untuk gaya visual
• Javascript untuk perilaku

Kaki kedua bangku ini, Cascading Style Sheets, mendukung tiga gaya berbeda yang dapat Anda tambahkan ke dokumen.

1. Gaya sebaris
2. Gaya yang disematkan
3. Gaya eksternal

Masing-masing gaya CSS ini menyajikan manfaat dan kekurangan yang unik.

Gaya Sebaris

Gaya sebaris adalah gaya yang ditulis langsung dalam tag di dokumen HTML. Gaya sebaris hanya memengaruhi tag tertentu yang menerapkannya:

Aturan CSS ini menonaktifkan dekorasi teks garis bawah standar untuk tautan yang satu ini. Namun, itu tidak akan mengubah tautan lain di halaman. Ini adalah salah satu batasan gaya sebaris. Karena mereka hanya berubah pada item tertentu, Anda perlu mengotori HTML Anda dengan gaya ini untuk mencapai desain halaman terpadu. Itu bukan praktik terbaik: Faktanya, itu adalah satu langkah yang dihapus dari hari-hari fon tag dan campuran struktur dan gaya di halaman web.

Gaya sebaris juga membutuhkan kekhususan yang sangat tinggi. Ini membuat mereka sulit untuk ditimpa dengan gaya non-inline lainnya. Misalnya, jika Anda ingin membuat situs responsif dan mengubah tampilan elemen pada titik putus tertentu dengan menggunakan pertanyaan media, gaya sebaris pada elemen membuat ini sulit dilakukan.

Gaya sebaris hanya sesuai bila Anda menggunakannya dengan hemat, dalam pendekatan "pengecualian terhadap aturan" yang membedakan satu atau dua elemen dari rekan-rekan mereka di halaman.

Gaya Tertanam

Gaya yang disematkan berada di kepala dokumen. Mereka terbungkus dalam tag dan terlihat seperti file CSS eksternal di dalam bagian dokumen itu.

Gaya yang disematkan hanya memengaruhi tag pada halaman tempat mereka disematkan. Sekali lagi, pendekatan ini meniadakan salah satu kekuatan CSS. Karena setiap halaman menampilkan gaya yang ditentukan di header, jika Anda ingin membuat perubahan di seluruh situs — seperti mengubah warna tautan dari merah ke hijau — Anda perlu membuat perubahan ini di setiap halaman, karena setiap halaman menggunakan gaya yang disematkan lembar. Pendekatan ini lebih baik daripada gaya sebaris tetapi masih bermasalah dalam banyak kasus.

Stylesheet yang ditambahkan ke kepala dokumen juga menambahkan sejumlah besar kode markup ke halaman itu, yang juga dapat membuat halaman lebih sulit untuk dikelola di masa mendatang.

Manfaat dari lembar gaya yang disematkan adalah bahwa mereka memuat segera dengan halaman itu sendiri, daripada memerlukan file eksternal lain untuk dimuat. Teknik ini bisa menjadi keuntungan dari kecepatan download dan perspektif kinerja.

Lembar Gaya Eksternal

Sebagian besar situs web saat ini menggunakan lembar gaya eksternal. Gaya eksternal adalah gaya yang ditulis dalam dokumen terpisah dan kemudian dilampirkan ke berbagai dokumen web. Mereka dipanggil ke dokumen utama menggunakan a tag di kepala dokumen. Lembar gaya eksternal dapat berada di server yang sama dengan HTML, atau dapat ditarik dari server lain sepenuhnya. Ini sering terjadi pada aset, seperti font, yang dipinjam banyak situs dari Google.

Lembar gaya eksternal memengaruhi dokumen apa pun yang dilampirkan, yang berarti bahwa jika Anda memiliki situs web 20 halaman di mana setiap halaman menggunakan stylesheet yang sama (biasanya begini caranya), Anda dapat membuat perubahan visual pada setiap halaman tersebut hanya dengan mengedit satu gaya itu lembar. Ekonomi ini membuat manajemen situs jangka panjang menjadi lebih mudah.

Kelemahan dari style sheet eksternal adalah mereka membutuhkan halaman untuk mengambil dan memuat file eksternal ini. Tidak setiap halaman akan menggunakan setiap gaya dalam lembar CSS, begitu banyak halaman akan memuat halaman CSS yang jauh lebih besar dari yang sebenarnya dibutuhkan.

Meskipun benar bahwa ada hit kinerja untuk file CSS eksternal, itu pasti dapat diminimalkan. Secara realistis, file CSS hanyalah file teks, jadi awalnya tidak besar. Jika seluruh situs Anda menggunakan satu file CSS, Anda juga mendapatkan manfaat dari dokumen yang di-cache setelah awalnya dimuat, yang berarti mungkin ada sedikit pencapaian kinerja pada halaman pertama untuk beberapa kunjungan, tetapi halaman berikutnya akan menggunakan file CSS yang di-cache, jadi setiap klik akan menjadi dinegasikan.