Inline, embedded, dan style sheet eksternal: Inilah yang perlu Anda ketahui
Pengembangan situs web front-end sering digambarkan sebagai bangku 3 kaki. Kaki-kaki ini adalah sebagai berikut:
Kaki kedua dari bangku ini, CSS atau Cascading Style Sheets, adalah apa yang kita lihat di sini hari ini. Secara khusus, kami ingin mengatasi 3 jenis gaya yang dapat Anda tambahkan ke dokumen.
- Gaya sebaris
- Gaya tertanam
- Gaya eksternal
Setiap jenis gaya CSS ini memiliki kelebihan dan kekurangannya, jadi mari kita lihat lebih dalam masing-masing secara individual.
Inline Styles
Gaya sebaris adalah gaya yang ditulis langsung di tag dalam dokumen HTML. Gaya sebaris hanya memengaruhi tag khusus yang diterapkan. Berikut ini contoh gaya sebaris yang diterapkan pada tautan standar, atau jangkar, tag:
Aturan CSS ini akan mengubah dekorasi teks garis bawah standar dari tautan yang satu ini. Namun, tidak akan mengubah tautan lain di halaman. Ini adalah salah satu batasan gaya inline. Karena mereka hanya berubah pada item tertentu, Anda perlu membuang HTML Anda dengan gaya ini untuk mencapai desain halaman yang sebenarnya. Itu bukan praktik terbaik. Bahkan, itu adalah satu langkah dihapus dari hari-hari tag "font" dan campuran struktur dan gaya di halaman web.
Gaya inline juga memiliki kekhususan yang sangat tinggi.
Ini membuat mereka sangat sulit untuk ditimpa dengan gaya non-inline lainnya. Misalnya, jika Anda ingin membuat situs responsif dan mengubah cara elemen melihat titik-titik pemutusan tertentu dengan menggunakan kueri media , gaya sebaris pada elemen akan membuat ini sangat sulit dilakukan.
Pada akhirnya, gaya sebaris benar-benar tepat ketika digunakan dengan sangat hemat.
Bahkan, saya jarang menggunakan gaya sebaris di halaman web saya.
Gaya Tertanam
Gaya tertanam adalah gaya yang tertanam di kepala dokumen. Gaya yang disematkan hanya memengaruhi tag pada halaman yang disematkan. Sekali lagi, pendekatan ini meniadakan salah satu kekuatan CSS. Karena setiap halaman akan memiliki gaya dalam
, jika Anda ingin membuat perubahan di seluruh situs, seperti mengubah warna tautan dari merah ke hijau, Anda perlu melakukan perubahan ini di setiap laman, karena setiap laman menggunakan lembar gaya tersemat. Ini lebih baik daripada gaya sebaris, tetapi masih bermasalah dalam banyak hal.
Stylesheet yang ditambahkan ke
dokumen juga menambahkan kode markup dalam jumlah signifikan ke halaman itu, yang juga dapat membuat halaman lebih sulit dikelola di masa depan.
Manfaat dari style sheet yang disematkan adalah bahwa beban langsung dengan halaman itu sendiri, daripada membutuhkan file eksternal lainnya untuk dimuat. Ini bisa menjadi keuntungan dari kecepatan unduhan dan perspektif kinerja .
Lembar Gaya Eksternal
Sebagian besar situs web saat ini menggunakan style sheet eksternal. Gaya eksternal adalah gaya yang ditulis dalam dokumen terpisah dan kemudian dilampirkan ke berbagai dokumen web. Lembar gaya eksternal dapat memengaruhi dokumen apa pun yang dilampirkan, yang berarti bahwa jika Anda memiliki situs web 20-halaman di mana setiap halaman menggunakan lembar gaya yang sama (ini biasanya bagaimana hal itu dilakukan), Anda dapat membuat perubahan visual bagi setiap orang. dari halaman itu hanya dengan mengedit style sheet itu.
Ini membuat pengelolaan situs jangka panjang jauh lebih mudah.
Kelemahan ke style sheet eksternal adalah bahwa mereka membutuhkan halaman untuk mengambil dan memuat file eksternal ini. Tidak setiap halaman akan menggunakan setiap gaya dalam lembar CSS, sehingga banyak halaman akan memuat halaman CSS yang jauh lebih besar dari yang sebenarnya dibutuhkan.
Meskipun benar bahwa ada pemukul kinerja untuk file CSS eksternal, itu pasti dapat diminimalkan. Secara realistis, file CSS hanya file teks, sehingga umumnya tidak terlalu besar untuk memulai. Jika seluruh situs Anda menggunakan 1 file CSS, Anda juga mendapatkan manfaat dari dokumen yang sedang di-cache setelah dimuat pada awalnya.
Ini berarti bahwa ada sedikit kinerja yang ditampilkan pada halaman pertama beberapa kunjungan, tetapi halaman berikutnya akan menggunakan file cache cache, sehingga setiap klik akan diabaikan. File CSS eksternal adalah bagaimana saya membangun semua halaman web saya.