Apa yang buruk tentang CSS in-line?

Ketika saya melihat kode dan contoh starter situs web, CSS selalu dalam file terpisah, bernama sesuatu seperti "main.css", "default.css", atau "Site.css". Namun, ketika saya membuat kode sebuah halaman, saya sering tergoda untuk melempar CSS sejajar dengan elemen DOM, seperti dengan mengatur "float: right" pada gambar. Saya merasa bahwa ini adalah "coding buruk", karena sangat jarang dilakukan dalam contoh.

Saya mengerti bahwa jika gaya akan diterapkan ke beberapa objek, sebaiknya ikuti "Don't Repeat Yourself" (DRY) dan tetapkan ke kelas CSS untuk dirujuk oleh setiap elemen. Namun, jika saya tidak akan mengulangi CSS pada elemen lain, mengapa tidak in-line CSS saat saya menulis HTML?

Pertanyaannya: Apakah menggunakan CSS sebaris dianggap buruk, meskipun hanya akan digunakan pada elemen itu? Jika demikian, mengapa?

Contoh (apakah ini buruk?):

<img src="myimage.gif" style="float:right" />

Harus mengubah 100 baris kode ketika Anda ingin membuat situs terlihat berbeda. Itu mungkin tidak berlaku dalam contoh Anda, tetapi jika Anda menggunakan inline css untuk hal-hal seperti

<div style ="font-size:larger; text-align:center; font-weight:bold">

pada setiap halaman untuk menunjukkan header halaman, akan jauh lebih mudah untuk mempertahankannya

<div class="pageheader">  

jika kepala halaman didefinisikan dalam satu stylesheet sehingga jika Anda ingin mengubah tampilan halaman di seluruh situs, Anda mengubah css di satu tempat.

Namun, saya akan menjadi bidat dan mengatakan bahwa dalam contoh Anda, saya tidak melihat masalah. Anda menargetkan perilaku satu gambar, yang mungkin harus terlihat benar pada satu halaman, jadi menempatkan css yang sebenarnya dalam stylesheet mungkin akan berlebihan.

Keuntungan memiliki file css berbeda adalah

1. Mudah mempertahankan halaman html Anda
2. Mengubah Tampilan dan nuansa akan mudah dan Anda dapat memiliki dukungan untuk banyak tema di halaman Anda.
3. File css Anda akan di-cache di sisi browser. Jadi Anda akan berkontribusi sedikit pada lalu lintas internet dengan tidak memuat beberapa kbs data setiap kali halaman di-refresh atau pengguna menavigasi situs Anda.

Pendekatan html5 untuk prototyping css cepat

atau: <style>tag tidak lagi hanya untuk kepala lagi!

Peretasan CSS

Katakanlah Anda sedang debug, dan ingin memodifikasi page-css Anda, buat bagian tertentu hanya terlihat lebih baik. Alih-alih membuat gaya Anda segaris dengan cara cepat dan kotor dan tidak dapat dipelihara, Anda dapat melakukan apa yang saya lakukan hari ini dan mengambil pendekatan bertahap.

Tidak ada atribut gaya inline

Jangan pernah membuat inline css Anda, yang saya maksud: <element style='color:red'>atau bahkan<img style='float:right'> itu sangat mudah, tetapi tidak mencerminkan kekhususan pemilih aktual dalam file css nyata nanti, dan jika Anda menyimpannya, Anda akan menyesali beban pemeliharaan nanti.

Prototipe dengan <style>gantinya

Di mana Anda akan menggunakan inline css, alih-alih gunakan di halaman <style> elemen . Coba itu! Ini berfungsi dengan baik di semua browser, sehingga sangat bagus untuk pengujian, namun memungkinkan Anda untuk memindahkan css seperti itu ke file css global Anda kapan pun Anda mau / perlu! (* ketahuilah bahwa pemilih hanya akan memiliki kekhususan tingkat halaman, alih-alih kekhususan tingkat situs, jadi waspadalah karena terlalu umum) Sama bersihnya seperti pada file css Anda:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refactoring inline css orang lain

Kadang-kadang Anda bahkan bukan masalah, dan Anda berurusan dengan inline css orang lain, dan Anda harus memperbaikinya. Ini merupakan kegunaan lain untuk<style> halaman in, sehingga Anda dapat langsung menghapus inline css dan langsung meletakkannya di halaman dalam kelas atau id atau selektor saat Anda melakukan refactoring. Jika Anda cukup berhati-hati dengan penyeleksi saat menjalankannya, Anda dapat memindahkan hasil akhir ke file global css di bagian akhir hanya dengan salin & tempel.

Agak sulit untuk mentransfer setiap bit css segera ke file global css, tetapi dengan <style>elemen dalam halaman , kami sekarang memiliki alternatif.

Selain jawaban lain .... Internasionalisasi .

Bergantung pada bahasa konten - Anda seringkali perlu menyesuaikan gaya suatu elemen.

Salah satu contoh yang jelas adalah bahasa kanan-ke-kiri.

Katakanlah Anda menggunakan kode Anda:

<img src="myimage.gif" style="float:right" />

Sekarang katakan Anda ingin situs web Anda mendukung bahasa rtl - Anda perlu:

<img src="myimage.gif" style="float:left" />

Jadi sekarang, jika Anda ingin mendukung kedua bahasa, tidak ada cara untuk menetapkan nilai untuk mengapung menggunakan gaya inline.

Dengan CSS ini mudah diatasi dengan atribut lang

Jadi Anda bisa melakukan sesuatu seperti ini:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

CSS sebaris akan selalu, selalu menang diutamakan atas setiap CSS tautan-gaya. Ini dapat menyebabkan sakit kepala yang sangat besar bagi Anda jika dan ketika Anda pergi dan menulis lembar gaya kaskade yang tepat, dan properti Anda tidak berlaku dengan benar.

Itu juga menyakiti aplikasi Anda secara semantik: CSS adalah tentang memisahkan presentasi dari markup. Ketika Anda menyatukan keduanya, banyak hal menjadi lebih sulit untuk dipahami dan dipelihara. Ini prinsip yang sama dengan memisahkan kode basis data dari kode pengontrol Anda di sisi server.

Terakhir, bayangkan Anda memiliki 20 tag gambar tersebut. Apa yang terjadi ketika Anda memutuskan bahwa mereka harus melayang ke kiri?

Inti dari CSS adalah memisahkan konten dari presentasinya. Jadi, dalam contoh Anda, Anda mencampur konten dengan presentasi dan ini mungkin "dianggap berbahaya".

Menggunakan CSS sebaris jauh lebih sulit untuk dipertahankan.

Untuk setiap properti yang ingin Anda ubah, menggunakan CSS sebaris mengharuskan Anda untuk mencari kode HTML yang sesuai, alih-alih hanya melihat ke dalam file CSS yang jelas dan mudah-mudahan terstruktur dengan baik.

Ini hanya berlaku untuk kode tulisan tangan. Jika Anda menghasilkan kode, saya pikir tidak masalah menggunakan gaya inline di sini dan kemudian, terutama dalam kasus di mana elemen dan kontrol membutuhkan perlakuan khusus.

KERING adalah konsep yang baik untuk kode tulisan tangan, tetapi dalam kode yang dihasilkan mesin, saya memilih "Law of Demeter": "Apa yang dimiliki bersama, harus tetap bersama". Lebih mudah untuk memanipulasi kode yang menghasilkan tag Style daripada mengedit gaya global untuk kedua kalinya dalam file CSS yang berbeda dan "jauh".

Jawaban untuk pertanyaan Anda: itu tergantung ...

Saya pikir bahkan jika Anda ingin memiliki gaya tertentu untuk satu elemen, Anda harus mempertimbangkan kemungkinan bahwa Anda mungkin ingin menerapkan gaya yang sama pada elemen yang sama di halaman yang berbeda.

Suatu hari seseorang mungkin meminta untuk mengubah atau menambahkan lebih banyak perubahan gaya ke elemen yang sama di setiap halaman. Jika Anda memiliki gaya yang ditentukan dalam file CSS eksternal, Anda hanya perlu membuat perubahan di sana, dan itu akan tercermin dalam elemen yang sama di semua halaman, sehingga menghemat sakit kepala Anda. :-)

Kode bagaimana Anda suka kode, tetapi jika Anda meneruskannya kepada orang lain, yang terbaik adalah menggunakan apa yang dilakukan orang lain. Ada alasan untuk CSS, lalu ada alasan untuk sebaris. Saya menggunakan keduanya, karena hanya lebih mudah bagi saya. Menggunakan CSS luar biasa ketika Anda memiliki banyak pengulangan yang sama. Namun, ketika Anda memiliki banyak elemen berbeda dengan properti yang berbeda maka itu menjadi masalah. Satu contoh untuk saya adalah ketika saya memposisikan elemen pada halaman. Setiap elemen sebagai properti atas dan kiri yang berbeda. Jika saya memasukkan semuanya ke dalam CSS yang benar-benar akan mengganggu saya keluar antara halaman html dan css. Jadi CSS sangat bagus ketika Anda ingin semuanya memiliki font, warna, efek hover yang sama, dll. Tetapi ketika semuanya memiliki posisi yang berbeda, tambahkan instance CSS untuk setiap elemen dapat benar-benar menyebalkan. Itu hanya pendapat saya saja. CSS benar-benar memiliki relevansi hebat dalam aplikasi yang lebih besar ketika Anda harus menggali kode. Gunakan plugin pengembang web Mozilla dan itu akan membantu Anda menemukan elemen ID dan Kelas.

Bahkan jika Anda hanya menggunakan gaya sekali seperti dalam contoh ini Anda masih mencampur CONTENT dan DESIGN. Cari "Pemisahan masalah".

Menggunakan gaya sebaris melanggar prinsip Separation of Concerns, karena Anda secara efektif mencampur markup dan gaya dalam file sumber yang sama. Ini juga, dalam banyak kasus, melanggar prinsip KERING (Jangan Ulangi Diri Sendiri) karena mereka hanya berlaku untuk satu elemen, sedangkan kelas dapat diterapkan ke beberapa dari mereka (dan bahkan dapat diperpanjang melalui keajaiban aturan CSS! ).

Selain itu, penggunaan kelas yang bijaksana bermanfaat jika situs Anda mengandung skrip. Sebagai contoh, beberapa lib JavaScript populer seperti JQuery sangat bergantung pada kelas sebagai penyeleksi.

Akhirnya, menggunakan kelas menambah kejelasan tambahan untuk DOM Anda, karena Anda secara efektif memiliki deskriptor yang memberi tahu Anda apa elemen dari suatu node yang ada di dalamnya. Sebagai contoh:

<div class="header-row">It's a row!</div>

Jauh lebih ekspresif daripada:

<div style="height: 80px; width: 100%;">It's...something?</div>

Css dalam halaman adalah hal yang saat ini karena Google menilai itu sebagai memberikan pengalaman pengguna yang lebih baik daripada css yang dimuat dari file terpisah. Solusi yang mungkin adalah dengan meletakkan css dalam file teks, memuatnya dengan php, dan mengeluarkannya ke dalam kepala dokumen. Di <head>bagian ini termasuk ini:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Letakkan css yang diperlukan dalam styles / style1.txt dan itu akan dimuntahkan di <head>bagian dokumen Anda. Dengan cara ini, Anda akan memiliki css dalam halaman dengan manfaat menggunakan templat gaya, style1.txt, yang dapat dibagikan oleh setiap dan semua halaman, memungkinkan perubahan gaya seluruh situs dilakukan hanya melalui satu file itu. Selain itu, metode ini tidak memerlukan browser untuk meminta file css terpisah dari server (sehingga meminimalkan waktu pengambilan / rendering), karena semuanya dikirimkan sekaligus oleh php.

Setelah menerapkan ini, gaya satu kali saja dapat dikodekan secara manual jika diperlukan.

CSS sebaris baik untuk kode yang dihasilkan mesin, dan bisa baik-baik saja ketika sebagian besar pengunjung hanya menelusuri satu halaman di suatu situs, tetapi satu hal yang tidak dapat dilakukan adalah menangani permintaan media untuk memungkinkan tampilan yang berbeda untuk layar dengan ukuran yang berbeda. Untuk itu, Anda perlu memasukkan CSS baik dalam lembar gaya eksternal atau dalam tag gaya internal.

Meskipun saya sepenuhnya setuju dengan semua jawaban yang diberikan di atas bahwa menulis CSS dalam file terpisah selalu lebih baik dari penggunaan kembali kode, rawatan, pemisahan yang lebih baik dari kekhawatiran ada banyak skenario di mana orang lebih suka inline CSS dalam kode produksi mereka -

File CSS eksternal menyebabkan satu panggilan HTTP tambahan ke browser dan dengan demikian latensi tambahan. Alih-alih jika CSS dimasukkan secara inline, maka browser dapat langsung mem-parsingnya. Terutama melalui panggilan HTTP SSL lebih mahal dan menambahkan latensi tambahan ke halaman. Ada banyak alat yang tersedia yang membantu menghasilkan halaman HTML statis (atau cuplikan halaman) dengan memasukkan file CSS eksternal sebagai kode sebaris. Alat-alat ini digunakan pada fase Build and Release di mana biner produksi dihasilkan. Dengan cara ini kita mendapatkan semua kelebihan CSS eksternal dan juga halaman menjadi lebih cepat.

Menurut Spesifikasi HTML AMP , Anda perlu meletakkan CSS di file HTML Anda (vs. stylesheet eksternal) untuk tujuan kinerja. Ini tidak berarti inline CSS tetapi mereka tidak menentukan stylesheet eksternal .

Daftar optimasi yang tidak lengkap yang mungkin dilakukan oleh sistem yang dilayani adalah:

• Ganti referensi gambar dengan gambar berukuran ke viewport pemirsa.
• Sejajarkan gambar yang terlihat di atas flip.
• Variabel CSS sebaris.
• Preload komponen yang diperluas.
• Minimalkan HTML dan CSS.

Selain jawaban lain, Anda tidak dapat menargetkan elemen semu atau elemen semu di CSS sebaris