Loncat ke Konten Utama

10 CSS trik untuk meningkatkan alur kerja Anda

Divi: tema WordPress termudah untuk digunakan

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Menulis CSS tidaklah mudah, karena jika Anda tidak berhati-hati, Anda dapat menulis kode yang berantakan, lambat, dan membutuhkan banyak waktu untuk men-debug kode saat menulis kode Anda.

Mari langsung ke intinya: dalam tutorial ini, saya telah mengumpulkan beberapa tip yang dapat Anda gunakan untuk meningkatkan kinerja Anda dalam menulis kode CSS. Anda dapat menerapkannya kapan saja pada proyek lama atau baru Anda.

Kita akan mengeksplorasi:

1. Pengumpulan properti

Jika Anda menemukan bahwa Anda telah menulis properti yang sama lebih dari sekali, verifikasi bahwa Anda tidak dapat memotongnya dengan menghapus kelas dan ID yang tidak perlu. Kemudian tambahkan semua properti umum dalam satu kurung kurawal.

Jika Anda dapat menautkan bagian Anda, Anda akan dapat membuat file yang lebih efisien dalam pengoperasiannya dan akan jauh lebih cepat.

2. Gunakan pengidentifikasi untuk konstanta

Batasan yang disayangkan dari CSS adalah Anda tidak dapat mendefinisikan konstanta, seperti di PHP. Konstanta adalah istilah yang dapat Anda tentukan sekali yang digunakan oleh sisa skrip terlepas dari cakupan kode dan inklusi.

Anda dapat berhenti membuat beberapa gaya beberapa kali, untuk memilih jenis yang Anda tetapkan sebagai blok desain Anda. Karena CSS tidak dibuat untuk memprogram situs Anda, CSS hanya akan memungkinkan Anda bertindak sebagai desainer interior, jadi boleh dikatakan, CSS tidak memiliki kapasitas untuk mendukung konstanta.

Namun, ini adalah sesuatu yang akan sangat berguna, terutama jika menggabungkan properti Anda tidak akan berhasil untuk Anda.

Yang dapat Anda lakukan adalah membuat ID yang menyertakan semua gaya yang Anda butuhkan. Saat Anda benar-benar perlu menggunakannya, cukup tambahkan selektor yang Anda perlukan untuk deklarasi. Yang akan membuat Anda menulis kode CSS Anda lebih cepat.

3. Komentar pada konstanta Anda

Tentu saja, CSS tidak mendukung konstanta, tetapi itu tidak berarti Anda masih tidak dapat menulis referensi untuk apa yang seharusnya menjadi konstanta. Mengapa tidak mencantumkan gaya umum dalam komentar beberapa baris?

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Terserah Anda untuk menentukan bagaimana Anda akan mengetik komentar-komentar ini, tetapi Anda dapat membuat semacam tabel materi yang mirip dengan yang ini:

/ * * CSS 'Konstanta' * * Latar Belakang: #ccc9c9 * Deep abu-abu, teks: #3a3838 * latar belakang konten utama: #e7e7e7 * * /

Ini sangat berguna bagi saya, karena tidak selalu mudah bagi saya untuk mengetahui dengan cepat apa detail fungsional dari blok kode (Konstan). Memiliki panggilan balik di sekitar membantu mempercepat proses pengkodean, karena Anda tahu persis di mana mencarinya dan Anda tidak perlu mencari melalui segunung CSS untuk menemukan titik di mana Anda merujuk ke gaya tertentu.

4. Selektor yang dikelompokkan

Kenapa berhenti disana? Saat Anda melakukannya, mengapa tidak mengelompokkan banyak pemilih yang bisa disatukan? Ini akan menyelamatkan Anda dari kesulitan mengetik gaya yang sama beberapa kali:

h1, h2, h3, h4, p {padding: 1 em; font-family: "Times New Roman", waktu, serif; } navigasi navigasi, navigasi navigasi {padding-top: 0,5 em; }

Meskipun ini mungkin tidak berfungsi di semua kasus dan contoh di atas pasti tidak akan berlaku untuk kebutuhan spesifik Anda, ini dapat berfungsi sebagai pengingat untuk kali berikutnya Anda membuat kode dan perlu menghemat waktu. dan di luar angkasa.

5. Gunakan preprosesor

Praprosesor CSS adalah ekstensi dari bahasa CSS biasa yang membantu Anda membuat kode lebih cepat sambil menambahkan banyak fitur lain yang biasanya tidak dapat Anda tambahkan dengan mudah.

Praprosesor CSS yang paling umum di WordPress adalah SASS dan LESS, dan Anda bisa belajar menggunakan keduanya.

Praprosesor CSS membuat pekerjaan jauh lebih mudah, dan cukup normal untuk melihat berapa banyak pengembang yang memasukinya setelah mereka memahaminya.

6. Kelas pseudo

Seperti yang dijelaskan oleh spesialis CSS Eric Meyer,  daftar gaya tautan dalam urutan tertentu adalah penting. Jika tidak, Anda mungkin akan mendapatkan tautan bergaya yang tidak berfungsi seperti yang Anda harapkan.

Anda dapat mengatasi ini dan menghemat waktu dengan tidak harus menyelesaikan masalah semacam ini di masa mendatang dengan mengikuti urutan sederhana untuk kelas pseudo dari tautan. Anda dapat mengingat pesanan ini dengan perangkat berikut:

a: link {deklarasi} a: dikunjungi {deklarasi} a: aktif {deklarasi}

gaya tautan yang belum dikunjungi ditetapkan terlebih dahulu, kemudian dikunjungi, pada gerakan mouse dan tautan aktif. Sejujurnya, urutannya tidak terlalu penting, tujuannya adalah agar Anda dapat mengingat kombinasi ini sesederhana mungkin. Urutan ini disebut pseudo-class "LoVe / HAte", karena huruf yang digunakan dalam pseudo-class.

Sayangnya, ini tidak termasuk pseudo-class "fokus", meskipun bisa dianggap sebagai pseudo-class "aktif". Ada juga frase mnemonik yang menyertakan kelas semu ini " LoVe Hancur Memudar Pergi ":

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

a: link {deklarasi} a: deklarasi} a: hover {declaration} a:

7. Gunakan singkatan CSS

Jika Anda ingin membuat kode dengan cepat dan efisien, tetapi tanpa kurva belajar yang lebih curam dengan bantuan preprocessor, Anda dapat membuat kode singkatan CSS. Aturannya jauh lebih mudah dipelajari sehingga memudahkan Anda untuk menggunakannya.

Dengan pintasan CSS, Anda dapat menyingkat beberapa baris menjadi satu, tanpa kehilangan fungsionalitas. Misalnya, di bawah ini Anda akan melihat 3 baris yang berlaku untuk batas elemen:

#maincontent {border-width: 1px; border-style: solid; border-color: hitam; }

Baris ini bisa lebih sederhana:

#maincontent {border: 1px solid black; }

8. Gunakan jalan pintas untuk gambar

Pintasan CSS mungkin tidak selalu menjadi solusi terbaik untuk Anda, tetapi Anda dapat mengadopsi aturan ini saat bekerja dengan warna.

Alih-alih menggunakan kode heksadesimal 6 digit, Anda hanya dapat menggunakan 3 digit.

#ffffff = #fff #1144bb = #14b #ffcc44 = #fc4

Dengan kata lain, jika Anda melihat bahwa kode warna memiliki pasangan (nilai pertama dan kedua, ketiga dan keempat, dan dua nilai terakhir) di mana setiap pasangan memiliki karakter yang sama. Anda dapat menghilangkan salah satu karakter ini untuk setiap pasangan.

Butuh beberapa saat untuk membiasakan diri, tetapi pengorbanan itu tidak sia-sia. Jika bentuk pintasan lain tidak umum, Anda tidak perlu khawatir di sini, karena pintasan warna hampir tidak asing lagi bagi semua orang.

9. Tautan tidak membutuhkan kutipan dan spasi

Saat Anda menambahkan URI ke lembar gaya Anda, format biasa dan benar termasuk spasi tunggal dan ganda dan tanda kutip, seperti dalam contoh ini:

tubuh {
background-image: url (“Http://www.example.com/deepgray-pattern.png”);
}

Setelah “url (“, ada spasi, tanda kutip, dan spasi penutup yang sebenarnya opsional.

Untuk menghemat lebih banyak waktu dan ruang, baris yang sama ini dapat ditulis seperti ini:

tubuh {
background-image: url (Http://www.example.com/deepgray-pattern.png);
}

Anda akan melihat bahwa spasi dan tanda kutip tidak terlalu dibutuhkan.

10. Analisis kode CSS Anda

Penting untuk menganalisis stylesheet Anda setelah selesai untuk memastikannya sebersih dan seringan mungkin. Ini bisa menyakitkan, tetapi yang lebih penting bisa memakan waktu lama untuk mencapainya.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Untungnya, ada alat gratis seperti CSS Analyzer, Menggambar CSS et CSS Lint. Yang perlu Anda lakukan adalah memasukkan kode Anda, pilih beberapa opsi dan klik tombol untuk langsung mendapatkan laporan untuk kode CSS Anda.

CSS Lint bahkan lebih parah dan dapat mengganggu sensitivitas Anda atas nama kemajuan dengan membantu Anda meningkatkan keterampilan pengkodean Anda.

Apa pun itu, itu semua adalah opsi mudah yang tersedia untuk membantu Anda menyederhanakan penguraian stylesheet Anda untuk memastikannya sesuci mungkin.

Sekian tips yang dapat Anda gunakan pada berbagai proyek CSS Anda. Jangan ragu untuk memberi kami tip Anda.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
13 saham
saham12
menciak
Register1