Apa yang buruk tentang CSS in-line?


170

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" />

1
Saya selalu menentang inline css, bahkan untuk satu item, TETAPI saya melihat begitu banyak situs komersial penuh dengan atribut style, sehingga membuat saya bertanya-tanya apa sebenarnya praktik yang diterima itu?
yu_ominae

3
Saya pikir gaya inline malas. Saya mengatakan ini karena saya sering melakukannya sendiri, jadi saya tahu - mengapa - saya melakukannya, karena saya tidak tahu apakah style akan tetap ada, jadi saya biasa melakukannya tepat di sebelah html. Saat ini, dengan dukungan html5 dan pragmatis untuk <style> </style> di mana saja, saya menggunakan tag <style> terdekat saat mengacaukan tata letak, dan kemudian memigrasikannya ke file inti / css utama setelahnya. Manfaat yang sama dari kecepatan dan kedekatan, hampir tidak ada kerugian (efek samping pada elemen off-halaman karena spesifisitas menjadi satu).
Kzqai

3
@yu_ominae - ingatlah bahwa "situs komersial" tidak selalu mematuhi praktik terbaik; sebenarnya sangat jarang. Faktor penentu adalah jika pengembang tahu, peduli dan punya waktu; atau jika manajer bersedia mengalokasikan waktu dan mengarahkan staf untuk menerapkan. Ketika prioritas pekerjaan adalah untuk memenuhi tenggat waktu, kualitas biasanya menurun.
BryanH

1
Perlu dicatat bahwa meskipun "situs komersial" tampaknya menggunakan gaya inline, ini bisa merupakan hasil dari menggunakan panggilan jQuery tertentu (misalnya css()) yang menerapkan gaya inline.
Dave Becker

Jawaban:


203

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.


18
Anda mengatakan bahwa teladan saya tidak menjadi masalah, tetapi Anda juga mengakui bahwa Anda sesat. Saya suka pendekatan itu.
ChessWhiz

8
Jika saya memiliki nikel untuk setiap kali saya harus memodifikasi float gambar atau css lain yang awalnya akan menjadi "hanya untuk satu elemen" ... ... well, saya akan keluar untuk makan malam di luar di restoran yang bagus.
Kzqai

8
Skenario lain ketika tidak hanya boleh menggunakan gaya sebaris, tetapi satu-satunya cara untuk gaya apa pun: email HTML.
Christophe Marois

Tetapi htmlfile itu sendiri di-cache juga.

Menanggapi user663031: Situs web dengan banyak halaman memiliki banyak halaman HTML yang berbeda, tetapi dapat menggabungkan semua gaya mereka hanya dalam satu file CSS yang dapat di-cache dengan mudah.
Sinthorion

68

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.

2
Saya bertanya pada diri sendiri pertanyaan ini tentang setiap bulan, (cukup baru untuk pemrograman web) dan ini adalah pertama kalinya saya membaca apa pun tentang file css yang sedang di-cache. Itu melakukannya untuk saya di sana!
ganders

Saya juga berpikir tentang cache, tetapi dalam kasus saya, saya harus berurusan dengan CSS gabungan yang terdiri dari 15k baris, tidak mungkin untuk mempertahankan semua porsi besar sampah yang hanya dapat digunakan sekali pada satu halaman yang tidak tidak ada lagi. Jadi, Anda melemparkan kode CSS ke semua orang pada setiap kunjungan untuk satu halaman sementara yang hanya dilihat oleh 1% dari lalu lintas Anda. Saya tidak yakin argumen trafik internet berlaku di setiap kasus. Untungnya Komponen Web akan mengubah banyak hal!
Shadoweb

@Shadowbob - bukankah lebih baik memiliki file css yang lebih kecil daripada yang besar? Memiliki satu generik mungkin yang digunakan untuk semua halaman, tetapi kemudian memiliki style sheet terpisah yang kecil untuk halaman lain. Seharusnya lebih mudah dirawat. Dan jika trafik menjadi masalah, maka untuk produksi mungkin dapat bergabung menjadi satu, dalam proses pembuatan.
Darius.V

26

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.


23

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


16

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?


12
"selalu, selalu menang" - kecuali! Penting digunakan dalam stylesheet
James Westgate

6
Saya hidup dengan asumsi bahwa manusia itu manusiawi dan tidak menggunakan keburukan semacam itu. =)
issa marie tseng

3
@ JamesWestgate hingga seseorang menggunakan! Penting dalam inline css untuk mengganti override ....
Kzqai

11

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


7
Saya akan membayar Anda 5 dolar untuk mengirimkan "Gaya CSS Inline Dianggap Berbahaya" ke ACM.
BalinKingOfMoria Reinstate CMs

11

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.


3
+1 - Saya benar-benar mengeluh ketika desainer kami melakukan itu sebagai perbaikan cepat, hanya untuk mendapatkan sesuatu untuk disejajarkan. Menggunakan CSS eksternal seharusnya berarti tidak pernah harus melakukan penggantian teks besar, kecuali tentu saja beroperasi pada lembar gaya tunggal. Saya mendapat template panel kontrol yang dirilis kepada saya kemarin dan butuh 2 1/2 jam untuk menemukan contoh di mana ikon diubah dengan gaya inline. Maddening, Aku memberitahumu .. menjengkelkan :)
Tim Post

1
Ketika Anda memiliki 50+ SCSS dan elemen Inspect Anda hanya menunjuk ke CSS yang dikompres, saya tidak yakin itu CSS yang menang dengan kesederhanaan!
Shadoweb


@TimPost ada alasan mengapa fitur "
inspect

9

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 ...


7
Saya pikir ini benar-benar jawaban yang benar. Mantra "pemisahan keprihatinan" hanyalah satu kriteria. "Lokalitas" juga penting untuk kemudahan perawatan. Aspek kuncinya adalah apakah gaya tersebut dapat digunakan kembali atau tidak pada tingkat semantik, bukan hanya sintaksis. Jika itu masalahnya, maka lembar itu masuk akal. Misalnya, saya tidak akan membuat kelas untuk "float: right" hanya karena dua elemen menggunakannya. Itu tergantung pada elemen yang secara semantik sama. Gaya "warna" biasanya terkait secara semantik (bagian dari tema), dan biasanya berbentuk lembaran.
Koriander

5

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. :-)


4

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.


2

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


1

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>

1

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.


Iya! ini sangat penting dalam upaya untuk meminimalkan "waktu untuk melukis pertama" jika semua css Anda ada di file itu akan menunda DOM sampai stylesheet telah diunduh oleh pengguna. Memiliki gaya kritis Anda dalam simpul <styles> sebaris di kepala, Anda dapat mulai merender DOM segera dan menunda stylesheet eksternal. Memainkan faktor besar dalam ~ koneksi 3G dan kecepatan yang dirasakan. +1 untuk jawaban Anda
DOfficial

1

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.


0

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.


3
Anda melewatkan sesuatu: latensi. Masalah yang jauh lebih besar , sungguh: Menanamkan CSS berarti setiap permintaan halaman harus mengandung CSS itu, sedangkan sebaliknya, browser dapat menyimpannya.
Andrew Barber

Kamu benar. Itu sebabnya kami sebaris CSS ketika ukuran kode sangat kecil sehingga tidak menyebabkan terlalu banyak overhead pada ukuran halaman. Ada artikel yang sangat menarik di Yahoo! Halaman pedoman Perf developer.yahoo.com/performance/rules.html yang mengatakan 60-80% pengguna datang ke situs Anda setiap hari dengan cache kosong ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Tentu saja itu benar-benar tergantung pada popularitas situs web - Semakin populer suatu situs, peluang memiliki cache yang tidak kosong lebih banyak.
Diptendu

Meskipun ada kemungkinan bahwa pengguna mengakses situs Anda dengan cache kosong, kecil kemungkinan mereka akan mengakses halaman Anda dengan cache kosong. Kecuali jika halaman tersebut adalah sekali pakai (yaitu setiap pengguna hanya melihatnya sekali), itu akan berkinerja lebih baik dengan file css terpisah.
astex

Saat ini banyak halaman web modern dirancang sebagai Aplikasi Halaman Tunggal, halaman penuh hanya dimuat pertama kali. Lain kali dan selanjutnya halaman diubah melalui panggilan AJAX. Jadi, bahkan jika halaman itu multiuse, CSS eksternal akan dimuat hanya sekali.
Diptendu

0

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.

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.