Kelebihan dan Kekurangan Eksternal, Internal, dan Inline CSS

MATERI PENDUKUNG


Eksternal CSS

Kelebihan:
  • Ukuran file HTML yang lebih kecil Karena file CSS dibuat terpisah, ukuran kode HTML menjadi lebih kecil dan secara bersamaan membuat kode HTML menjadi lebih rapih dan terorganisir.


Kekurangan:
  • Membutuhkan proses load file CSS Karena file CSS diletakkan terpisah dari HTML, browser memerlukan waktu untuk meload file CSS sebelum dapat merender HTML dengan benar. Terlebih lagi jika ada banyak file CSS eksternal yang diload, ini jelas akan membuat proses load halaman menjadi lama.


Pada prakteknya, banyak pemilik situs yang membuat konfigurasi terpisah untuk setiap bagian-bagian utama. Hal ini seperti misalnya membuat file khusus untuk bagian header (header.css), bagian sidebar (sidebar.css), bagian footer (footer.css) dan lain sebagainya. Konfigurasi yang dibuat terpisah ini umumnya demi kemudahan proses Debugging dikemudian hari. Namun, karena konfigurasi ini dibuat terpisah, proses load file pada halaman jelas akan bertambah, kita perlu meload semua aset ini secara terpisah. Semakin banyak aset yang perlu diload, semakin lama pula waktu load yang dibutuhkan. Berikut adalah contoh dokumen HTML yang meload beberapa file css: 

	  
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <link rel="stylesheet" href="https://example.com/file/header.css"/>
    <link rel="stylesheet" href="https://example.com/file/sidebar.css"/>
    <link rel="stylesheet" href="https://example.com/file/footer.css"/>
  </head>
  <body>
	<!-- body -->
  </body>
</html>

Untuk kasus seperti di atas, proses load akan sangat terasa jika itu adalah kunjungan pertama. Untuk kunjungan-kunjungan selanjutnya (misal saat pengguna merefresh halaman atau membuka halaman lain yang masih menggunakan file-file css yang bersangkutan), waktu load akan lebih cepat, hal ini karena sistem cache browser.


Internal CSS

Kelebihan:
  • Proses load halaman yang cepat Dibandingkan dengan metode eksternal, penerapan internal memiliki keunggulan dari sisi kecepatan load halaman. Pada metode internal, karena CSS langsung ditempatkan pada dokumen HTML, browser tidak perlu meload file CSS terlebih dahulu, hal ini membuat load halaman lebih cepat dibandingkan dengan metode eksternal.


Kekurangan:
  • Ukuran file HTML yang besar Sebuah situs umumnya memiliki konfigurasi CSS yang sangat banyak. Penerapan metode internal yang langsung menempatkan deklarasi CSS pada dokument HTML tentu membuat kode HTML menjadi sangat besar.
  • Proses debugging yang lebih sulit Penggunaan metode internal umumnya akan menempatkan deklarasi CSS pada satu tempat. hal ini akan membuat proses debugging menjadi lebih sulit. Pengembang mungkin memerlukan waktu lebih lama untuk menuju/menemukan bagian-bagian dalam CSS yang akan disesuaikan/diperbaiki.
  • Browser tidak men-cache CSS Dengan menempatkan CSS langsung pada HTML, browser tidak dapat men-cache CSS. Dengan kata lain, browser perlu membaca dan merender konfigurasi setiap kali halaman dimuat.


Inline CSS

Metode inline adalah metode penambahan CSS pada elemen HTML (bukan dokumen HTML). Ini lebih diperuntukkan untuk kebutuhan-kebutuhan kecil. Metode ini sering digunakan untuk me-replace deklarasi utama. 

	  
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <style>
      p {
        background:blue; /*blue akan terganti oleh red (baris 15)*/
        color:white;
        padding:20px;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <p style='background:red'>Paragraf</p>
  </body>
</html>

Paragraf

Komentar