30 Praktik Terbaik CSS untuk Pemula – CSS merupakan bahasa yang dipakai oleh nyaris tiap developer di sebagian titik. Walaupun ini merupakan bahasa yang sering- kali kita kira remeh, beliau kokoh serta mempunyai banyak gradasi yang bisa menolong( ataupun menyakiti) konsep kita. Selanjutnya merupakan 30 aplikasi CSS terbaik yang hendak membuat Kamu senantiasa menulis CSS yang keras serta menjauhi sebagian kekeliruan yang mudarat.

30 Praktik Terbaik CSS untuk Pemula

CSS
bintanginspirasi.com

1. Make It Readable

benjaminsterling

Keterbacaan CSS Kamu amat berarti, walaupun mayoritas orang melalaikan kenapa itu berarti. CSS Kamu amat gampang dibaca buatnya lebih gampang dipertahankan di era kelak, sebab Kamu hendak bisa menciptakan bagian lebih kilat. Tidak hanya itu, Kamu tidak hendak sempat ketahui siapa yang bisa jadi butuh memandang isyarat Kamu esok.

 

2. Keep It Consistent

Searah dengan melindungi supaya isyarat Kamu bisa dibaca merupakan membenarkan kalau CSS tidak berubah- ubah. Kamu wajib mulai meningkatkan” sub- bahasa” CSS Kamu sendiri yang membolehkan Kamu berikan julukan dengan kilat. Terdapat kategori khusus yang aku untuk di nyaris tiap tema, serta aku memakai julukan yang serupa tiap dikala. Misalnya, aku memakai. caption- right buat terapung lukisan yang bermuatan penjelasan di sisi kanan.

Pikirkan mengenai keadaan semacam apakah Kamu hendak memakai garis dasar ataupun ciri sambung di ID serta julukan kategori Kamu ataupun tidak, serta dalam permasalahan apa Kamu hendak memakainya. Dikala Kamu mulai membuat standar CSS Kamu sendiri, Kamu hendak jadi jauh lebih ahli.

Baca juga : 15+ Bahasa Pemrograman yang Harus Dipelajari Developer

3. Start With a Framework

Sebagian pakar konsep meledek pandangan buat memakai kerangka kegiatan CSS dengan tiap konsep, namun aku yakin kalau bila orang lain sudah mengosongkan durasi buat menjaga perlengkapan yang memesatkan penciptaan, kenapa menghasilkan kembali cakra? Aku ketahui kerangka kegiatan tidak bisa dipakai di tiap ilustrasi, namun beberapa besar durasi mereka bisa menolong.

Banyak pendesain mempunyai kerangka kegiatan mereka sendiri yang mereka untuk dari durasi ke durasi, serta itu pula ilham yang baik. Ini menolong melindungi kestabilan dalam cetak biru.

Pada dikala yang serupa, aku pula mau berkata kalau Kamu wajib memakai kerangka kegiatan cuma bila Kamu telah mengenali banyak mengenai CSS. Nyaris tentu hendak datang waktunya kala Kamu wajib membuat pandangan khusus dari sebagian aturan posisi seorang diri, serta uraian mendalam Kamu mengenai CSS hendak menolong Kamu menuntaskan suatu.

Baca juga : 30 Situs untuk mempelajari coding secara gratis

4. Use a Reset

Beberapa besar kerangka kegiatan CSS mempunyai pengaturan balik bawaan, namun bila Kamu tidak hendak memakainya, paling tidak pikirkan buat memakai pengaturan balik. Penyetelan balik pada dasarnya melenyapkan inkonsistensi browser semacam ketinggian, dimensi font, batas, serta kepala karangan. Penyetelan balik membolehkan aturan posisi Kamu nampak tidak berubah- ubah di seluruh browser.

MeyerWeb merupakan reset klasik. Normalize. css merupakan reset lain yang amat terkenal.

 

5. Atur Stylesheet Dengan Struktur Atas-Bawah

Menata stylesheet dengan cara yang memungkinkan Anda menemukan bagian kode dengan cepat selalu masuk akal. Saya merekomendasikan format top-down yang menangani gaya seperti yang muncul di kode sumber. Jadi contoh stylesheet mungkin diurutkan seperti ini:

Generic classes (body, a, p, h1, etc.)
#header
#nav-menu
#main-content

Ini juga membantu jika Anda melacak berbagai bagian situs web di stylesheet dengan komentar.

/****** main content *********/
styles go here…
/****** footer *********/
styles go here…

6. Combine Elements

Elemen pada style sheet terkadang memiliki atribut yang sama. Alih-alih menulis ulang scrip kode sebelumnya, bagaimana jika menggabungkannya? Misalnya, elemen h1, h2, dan h3 Anda mungkin memiliki font dan warna yang sama:

h1, h2, h3 {font-family: tahoma, color: # 333}

Kita bisa menambahkan karakteristik unik ke masing-masing gaya tajuk ini jika kita mau (mis. H1 {size: 2.1em}) nanti di lembar gaya.

 

7. Create Your HTML First

Banyak desainer membuat CSS sambil membuat HTML. Tampaknya logis untuk membuat keduanya secara bersamaan, tetapi jika Anda membuat seluruh model HTML terlebih dahulu, Anda sebenarnya dapat menghemat lebih banyak waktu. Alasan di balik metode ini adalah Anda mengetahui semua elemen tata letak situs, tetapi Anda tidak tahu CSS apa yang diperlukan untuk desain tersebut. HTML pra-tata letak dapat memvisualisasikan seluruh halaman dan mempertimbangkan CSS dengan cara yang lebih holistik dari atas ke bawah.

 

8. Use Multiple Classes

Terkadang berguna untuk menambahkan beberapa kelas ke sebuah elemen. Misalkan Anda memiliki div “box” yang ingin Anda tempatkan dengan benar, dan Anda sudah memiliki kelas .right di CSS Anda, yang menempatkan semuanya di sebelah kanan. Anda cukup menambahkan kelas tambahan ke deklarasi sebagai berikut:

<div class=”box right”></div>

Anda dapat menambahkan sejumlah kelas (dipisahkan oleh spasi) ke deklarasi mana pun. Ini adalah salah satu situasi di mana Anda harus mempertimbangkan setiap situasi. Meskipun sangat membantu untuk membuat nama kelas yang memberikan beberapa petunjuk tentang bagaimana pengaruhnya terhadap tata letak, Anda juga harus menghindari nama kelas yang memerlukan peralihan konstan antara HTML dan CSS. Hati-hati saat menggunakan id dan nama kelas (seperti “kiri” dan “kanan”). Saya akan menggunakannya, tetapi hanya untuk contoh di posting blog. bagaimana bisa? Mari kita bayangkan bahwa selama perjalanan, Anda memutuskan bahwa Anda lebih suka melihat kotak itu melayang ke kiri. Dalam kasus ini, Anda harus kembali ke HTML dan mengubah nama kelas-yang semuanya cocok untuk rendering halaman. Ini tidak romantis. Ingat: HTML digunakan untuk markup dan konten. CSS untuk demonstrasi.

 

9. Use the Right Doctype

Deklarasi doctype sangat memengaruhi apakah markup dan CSS Anda akan divalidasi atau tidak. Faktanya, keseluruhan tampilan dan nuansa situs Anda bisa sangat berubah bergantung pada doctype yang Anda nyatakan.

Pelajari lebih lanjut tentang doctype mana yang akan digunakan di A List Apart. Anda cukup mulai menggunakan <! DOCTYPE html> saat membuat halaman berdasarkan HTML5.

 

10. Use Shorthand

Kamu bisa mengecilkan isyarat Kamu dengan cara penting dengan memakai kependekan dikala membuat CSS. Buat bagian semacam padding, batas, font, serta sebagian yang lain, Kamu bisa mencampurkan style dalam satu baris. Misalnya, div bisa jadi mempunyai style selanjutnya:

#crayon {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}

Kamu dapat mencampurkan style itu dalam satu baris, semacam ini:

#crayon {
margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
}

Bila Kamu menginginkan dorongan lebih lanjut, selanjutnya merupakan bimbingan menyeluruh mengenai properti kependekan CSS.

 

11. Comment Your CSS

Serupa semacam bahasa lain, ialah ilham baik buat menanggapi isyarat Kamu di sebagian bagian. Buat meningkatkan pendapat, lumayan tambahkan atau* di balik pendapat, serta* atau buat menutupnya, semacam ini:

/* Here’s how you comment CSS */

 

12. Memahami Perbedaan Antara Elemen Blok dan Inline

Bagian gulungan merupakan bagian yang dengan cara natural menghilangkan tiap baris sehabis dideklarasikan, melingkupi semua luas ruang yang ada. Bagian sealur cuma mengutip ruang sebesar yang diperlukan, serta tidak memforsir baris terkini sehabis dipakai.

Berikut adalah daftar elemen yang biasanya sebaris:

span, a, strong, em, img, br, input, abbr, acronym

Dan elemen bloknya:

div, h1…h6, p, ul, li, table, blockquote, pre, form

 

13. Abjadkan Properti Anda

Walaupun ini lebih ialah bayaran yang ceroboh, ini dapat bermanfaat buat pemindaian kilat.

#cotton-candy {
color: #fff;
float: left;
font-weight:
height: 200px;
margin: 0;
padding: 0;
width: 150px;
}

Ini kira- kira kontroversial sebab Kamu wajib mempertaruhkan kecekatan buat sedikit tingkatkan keterbacaan. Tetapi, Kamu tidak butuh ragu buat menjajalnya bila bagi Kamu itu hendak menolong Kamu.

 

14. Gunakan Kompresor CSS

Kompresor CSS menolong mengecilkan dimensi file CSS dengan menghilangkan sela waktu baris, spasi, serta mencampurkan bagian. Campuran ini bisa amat kurangi dimensi file, yang memesatkan pencantuman browser. CSS Minifier serta HTML Compressor merupakan 2 perlengkapan online luar lazim yang bisa mengecilkan CSS.

Butuh dicatat kalau menyusutkan CSS Kamu bisa tingkatkan kemampuan, namun Kamu kehabisan beberapa dari keterbacaan CSS Kamu.

 

15. Memanfaatkan Kelas Generik

Kamu hendak menciptakan kalau terdapat style khusus yang Kamu lakukan kesekian kali. Ternyata meningkatkan style khusus ke tiap ID, Kamu bisa membuat kategori generik serta meningkatkannya ke ID ataupun kategori CSS yang lain( memakai bayaran# 8).

Misalnya, aku menciptakan diri aku memakai float: right and float: left berkali- kali dalam konsep aku. Jadi aku lumayan meningkatkan kategori. left serta. right ke stylesheet aku, serta mereferensikannya di bagian.

 

.left {float:left}
.right {float:right}

<div id=”coolbox” class=”left”>…</div>

Dengan cara ini, Anda tidak harus terus-menerus menambahkan float: left ke semua elemen yang perlu di-float.

 

16. Gunakan margin: 0 otomatis ke Tata Letak Tengah

Banyak pendatang baru CSS tidak ketahui kenapa Kamu tidak dapat sedemikian itu saja memakai float: center buat menggapai dampak berfokus pada bagian tingkat gulungan. Jika saja semudah itu! Sayangnya, Kamu wajib memakai tata cara ini buat memfokuskan div, alinea, ataupun bagian lain di aturan posisi Kamu:

batas: 0 auto; atau atau maksimum, bottom- and left, right values, respectively.

Dengan menyatakan kalau batas kiri serta kanan sesuatu bagian wajib sama, browser tidak memiliki opsi tidak hanya memfokuskan bagian di dalam bagian yang memuatnya.

 

17. Jangan Hanya Membungkus div Di Sekitar Itu

Saat memulai, ada godaan untuk membungkus div dengan ID atau kelas di sekitar elemen dan membuat gayanya.

<div class=”header-text”><h1>Header Text</h1></div>

Terkadang mungkin tampak lebih mudah untuk hanya membuat gaya elemen unik seperti contoh di atas, tetapi Anda akan mulai mengacaukan lembar gaya Anda. Ini akan bekerja dengan baik:

<h1>Header Text</h1>

Kemudian Anda dapat dengan mudah menambahkan gaya ke h1 sebagai ganti div induk.

 

18. Gunakan Alat Pengembang Peramban

Peramban web modern dilengkapi dengan beberapa alat penting yang harus dimiliki oleh pengembang web mana pun. Alat pengembang ini sekarang menjadi bagian dari semua browser utama, termasuk Chrome, Firefox, Safari, dan Edge. Di antara banyak fitur yang disertakan dengan alat pengembang Chrome dan Firefox (seperti debugging JavaScript, memeriksa HTML, dan melihat kesalahan), Anda juga dapat memeriksa, memodifikasi, dan mengedit CSS secara real time.

 

19. Hack Less

Jauhi peretas spesial peramban sebisa bisa jadi. Membenarkan kalau konsep nampak tidak berubah- ubah di seluruh browser memanglah membuat tekanan pikiran, namun memakai serbuan peretasan cuma hendak membuat konsep Kamu susah dipertahankan di era kelak. Tidak hanya itu, memakai file reset( amati# 4) bisa melenyapkan nyaris seluruh rendering drift dampingi browser.

 

20. Gunakan Pemosisian Mutlak Secara Hemat

Penentuan posisi absolut adalah aspek praktis dari CSS, yang memungkinkan Anda menempatkan elemen secara akurat di lokasi piksel yang tepat pada halaman. Namun, karena pemosisian absolut elemen lain di laman diabaikan, jika Anda benar-benar memosisikan beberapa elemen di sekitar tata letak, tata letak bisa menjadi sangat rumit.

 

21. Gunakan Text-transform

text-transform adalah properti CSS yang sangat berguna yang memungkinkan Anda untuk “membakukan” format teks di situs web Anda. Misalnya, Anda ingin membuat beberapa judul yang hanya menggunakan huruf kecil. Cukup tambahkan atribut text-transform ke gaya tajuk seperti yang ditunjukkan di bawah ini: Konversi teks: huruf kecil; Sekarang, semua huruf dalam judul akan menjadi huruf kecil secara default. text-transform memungkinkan Anda menggunakan atribut sederhana untuk mengubah teks (huruf besar pertama, semua huruf besar, atau semua huruf kecil).

 

22. Jangan Gunakan Margin Negatif untuk Menyembunyikan h1 Anda

Kerapkali, orang hendak memakai lukisan buat bacaan header mereka serta setelah itu memakai display: none ataupun batas minus buat menghasilkan h1 dari laman. Matt Cutts, yang dikala itu jadi kepala regu Webspam Google, dengan cara sah berkata kalau ini merupakan ilham yang kurang baik, sebab Google bisa jadi menganggapnya selaku spam.

Semacam yang dibilang Cutts dengan cara akurat, jauhi merahasiakan bacaan logo Kamu dengan CSS. Lumayan maanfaatkan tag alt. Sedangkan banyak yang mengklaim kalau Kamu sedang bisa memakai CSS buat merahasiakan tag h1 sepanjang h1 serupa dengan bacaan logo, aku lebih memilah buat melaksanakan kekeliruan di bagian yang nyaman.

23. Pengesahan CSS serta XHTML Anda

Memvalidasi CSS serta XHTML Kamu tidak cuma membagikan rasa besar hati: ini menolong Kamu dengan kilat menciptakan kekeliruan dalam isyarat Kamu. Bila Kamu lagi melakukan konsep serta sebab alibi khusus terdapat yang tidak selesai, coba jalankan markup serta validator CSS serta amati kekeliruan apa yang timbul. Umumnya Kamu hendak menciptakan kalau Kamu kurang ingat menutup div di sesuatu tempat ataupun melupakan titik koma di properti CSS.

24. Rems serta Ems vs. Piksel

Senantiasa terdapat perbincangan yang kokoh mengenai apakah lebih bagus memakai piksel( px) ataupun ems serta rems dikala memastikan dimensi font. Piksel merupakan metode yang lebih statis buat memastikan dimensi font, serta ems lebih bisa diskalakan dengan bermacam dimensi browser serta fitur seluler. Dengan timbulnya bermacam tipe penjelajahan website( laptop, seluler, dan lain- lain.), Ems serta rems terus menjadi jadi default buat pengukuran dimensi font sebab membolehkan wujud elastisitas terbanyak.

25. Janganlah Menyepelehkan Daftar

Catatan merupakan metode terbaik buat menyuguhkan informasi dalam bentuk tertata yang gayanya gampang dimodifikasi. Berkah properti display, Kamu tidak butuh cuma memakai list selaku ciri bacaan. Catatan pula baik buat membuat menu pelayaran serta sejenisnya.

Banyak pendatang baru memakai div buat membuat tiap bagian dalam catatan sebab mereka tidak menguasai metode memakai catatan dengan betul. Usaha buat memakai memoles bagian catatan penataran buat menata informasi di era kelak proporsional.

26. Jauhi Penyeleksi Ekstra

Amat gampang buat tanpa siuman meningkatkan selektor ekstra ke CSS kita yang mencampuradukkan lembar style. Salah satu ilustrasi biasa meningkatkan penyeleksi ekstra merupakan dengan catatan.

body#container. someclass ul li….

Dalam perihal ini, cuma li. someclass hendak bertugas dengan bagus.

. someclass li…

Meningkatkan pemilih bonus tidak hendak bawa Armageddon ataupun semacamnya, namun mereka melindungi CSS Kamu tidak sesederhana serta sebersih bisa jadi.

27. Tambahkan Batas serta Padding ke Seluruh Elemen

Browser modern lumayan sebentuk dalam metode merender bagian, namun browser lama mengarah merender bagian dengan cara berlainan. Misalnya, Internet Explorer menunjukkan bagian khusus dengan cara berlainan dari Firefox ataupun Chrome, serta tipe Internet Explorer yang berlainan diperlihatkan dengan cara berlainan satu serupa lain.

Salah satu perbandingan penting antara tipe browser lama merupakan gimana padding serta batas diperlihatkan. Bila Kamu belum memakai reset, Kamu bisa jadi mau memastikan batas serta padding buat seluruh bagian di laman, supaya nyaman. Kamu bisa melaksanakan ini dengan kilat dengan pengaturan balik garis besar, semacam:

* margin: 0; padding: 0;

Saat ini seluruh bagian mempunyai padding serta batas 0, melainkan didetetapkan oleh style lain di stylesheet.

28. Maanfaatkan Sebagian Stylesheet

Tergantung pada kekalutan konsep serta dimensi web, sering- kali lebih gampang buat membuat lebih kecil, sebagian lembar style dari satu lembar style raksasa. Tidak hanya lebih gampang buat diatur oleh pendesain, sebagian stylesheet membolehkan Kamu buat meninggalkan CSS di laman khusus yang tidak membutuhkannya.

Misalnya, aku bisa jadi mempunyai program polling yang hendak mempunyai sekumpulan style istimewa. Ternyata memasukkan style polling ke stylesheet penting, aku dapat membuat poll. css serta stylesheet cuma ke laman yang menunjukkan polling.

Tetapi, yakinkan buat memikirkan jumlah permohonan HTTP yang terbuat. Banyak pendesain lebih senang meningkatkan dengan sebagian lembar style, kemudian menggabungkannya jadi satu file. Ini kurangi jumlah permohonan HTTP jadi satu. Tidak hanya itu, semua file hendak di- cache di pc konsumen.

29. Cek Bagian Tertutup Awal Dikala Debugging

Bila Kamu mencermati kalau konsep Kamu nampak kira- kira miring, terdapat mungkin besar itu sebab Kamu meninggalkan penutup&lt; atau div
. Kamu bisa memakai validator XHTML buat menolong mengendus seluruh tipe kekeliruan semacam ini.

30. Coba Maanfaatkan Layout Flexbox serta Grid Ternyata Floats

Di era kemudian, amat biasa serta butuh memakai pelampung buat membuat seluruh tipe aturan posisi. Sayangnya, pelampung tiba dengan banyak permasalahan. Selaku gantinya, Kamu bisa mulai memakai materi aturan posisi yang jauh lebih kokoh yang diucap dengan flexbox serta aturan posisi grid. Flexbox hendak menolong Kamu membuat aturan posisi satu format, serta kisi hendak menolong Kamu dengan aturan posisi 2 format.

 

Benjamin Sterling - Informasi jQuery Terlengkap