Gaya pemrograman seperti kepribadian seseorang. Pemrogram (desainer) yang berbeda sering kali memiliki gaya penulisan yang berbeda. Mengambil tema WordPress sebagai contoh, kita mungkin lebih suka menggunakan file tema dengan gaya kode yang bagus dan sesuai dengan selera kita. Dan apa yang kita lakukan ketika kita harus mempelajari file CSS yang berantakan dan sulit dibaca itu? Anda dapat menggunakan "Styleneat" untuk mengatur ulang dan membangun penyeleksi, sub-selektor, dan properti CSS menurut struktur berjenjang, sehingga membuat file CSS lebih rapi dan mudah dibaca. Lebih mudah untuk menentukan tata letak halaman dan melihat hubungan antara struktur yang berbeda.
Layanan reorganisasi format struktur file CSS "
Styleneat " dapat mengatur ulang file CSS dengan gaya penulisan yang berantakan menjadi struktur berjenjang untuk memfasilitasi pembacaan dan penelitian Anda.
Anda dapat menggunakannya dengan tiga cara berbeda: 1. Tempelkan kode secara langsung; 2. Unggah file CSS; 3. Masukkan alamat file CSS. Ada juga beberapa pengaturan opsi: mengurutkan berdasarkan abjad berdasarkan properti dan penyeleksi CSS; mengatur ulang format multi-baris atau satu baris;
Mari kita lihat efek penggunaannya:
Kode asli:
Contoh Kode Sumber
[www.downcodes.com]
#menubar .menu {
latar belakang:#E9EEF1;
mengapung:kiri;
bantalan:0 10 piksel;
}
#menubar .menu li {
mengapung:kiri;
gaya perbatasan: padat;
warna batas:#FFF;
lebar batas:0 1px;
margin-kiri:-1px;
tipe gaya daftar: tidak ada;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
latar belakang:#EEDDCC;
tipe gaya daftar: tidak ada;
}
#menubar .menus .current_page_item {
latar belakang:#FFF;
berat font: tebal;
}
#menubar .menus li.current_page_item a:hover {
latar belakang:#FFF;
}
Kode yang direstrukturisasi:
Contoh Kode Sumber
[www.downcodes.com]
#menubar .menu {
latar belakang:#E9EEF1;
mengapung:kiri;
bantalan:0 10 piksel;
#menubar .menu li {
mengapung:kiri;
gaya perbatasan: padat;
warna batas:#FFF;
lebar batas:0 1px;
margin-kiri:-1px;
tipe-gaya-daftar: tidak ada;
#menubar .menu li a {
tampilan:blok;
dekorasi teks: tidak ada;
bantalan:5 piksel 10 piksel; }
#menubar .menus li a:hover {
latar belakang:#EEDDCC;
tipe-gaya-daftar: tidak ada;
#menubar .menus .current_page_item {
latar belakang:#FFF;
berat font:tebal;
#menubar .menus li.current_page_item a:hover { latar belakang:#FFF }
