Cabaran Kod #2: 4 Petua untuk Skor Tinggi di CSSBattle.dev

cssbattle.dev: Cabaran yang sangat baik untuk meningkatkan kemahiran CSS

mata teras

Cabaran CSSBattle.dev adalah cara terbaik untuk meningkatkan kemahiran CSS; unsur -unsur.
Untuk menyelamatkan aksara dalam cssbattle, dengan berhati -hati pilih unit pengukuran, mengambil kesempatan daripada "warisan" dan "kekhususan" CSS, mengingati bahawa pelayar moden mesra dengan kod pendek dan sedikit tidak teratur.
Tujuan menyertai CSSBattle.dev bukan untuk menggalakkan tabiat pengekodan yang buruk, tetapi untuk menguji, mencuba dan akhirnya memahami CSS lebih mendalam daripada menulis kod pengeluaran yang normal dan mantap.

Anda mungkin telah melihat kami melancarkan cabaran kod kedua lebih seminggu yang lalu - bekerja dengan rakan -rakan kami di CSSBattle.dev. Pertempuran CSS adalah konsep yang agak baru - laman web yang dilancarkan pada bulan April - dan bagaimana ia berfungsi tidak selalu jelas.

Output lalai dan panel editor dalam CSSBattle.

Cukup meletakkan:

Matlamat anda adalah untuk membuat salinan imej "sasaran" menggunakan hanya HTML dan CSS.
anda tidak boleh menggunakan imej luaran.
anda tidak boleh menggunakan SVG (walaupun dalam talian SVG) atau aksara khas.
Semua penyelesaian dijaringkan secara automatik berdasarkan ketepatan dan kecekapan (bilangan aksara).
Pemain yang menghasilkan semula imej sasaran dengan kemenangan skor tertinggi.

Saya harus mengakui bahawa apabila saya mula -mula melihat idea ini, saya agak luar biasa. Siapa yang boleh membuat reka bentuk dengan HTML dan CSS yang kurang daripada "panjang tweet"? Ini pasti mustahil, bukan?

jadi saya mencubanya dan kebanyakannya gagal-tetapi saya juga mendapat sesuatu dan secara beransur-ansur mula memahami beberapa teknik yang diperlukan. Jika anda ingin tahu, saya fikir saya akan memperkenalkan 4 petua untuk membantu anda mendapatkan skor yang lebih tinggi.

Biar saya jelas: Apabila saya menulis ini, saya menduduki tempat ke -24 dalam pusingan pertempuran ini. Saya telah mencapai semua matlamat saya setakat ini dan menduduki tempat ke -26 secara keseluruhan, jadi pasti ada sekurang -kurangnya dua puluh atau tiga puluh pemain dengan penyelesaian yang lebih baik daripada yang saya lakukan. Walau bagaimanapun, saya ingin berkongsi pengetahuan saya - dan menerima nasihat daripada sesiapa sahaja yang mempunyai idea yang lebih baik.

tip #1: Panel output kosong tidak pernah kosong

Kali pertama anda memuatkan sebarang sasaran, anda akan melihat sesuatu yang serupa dengan imej di atas. Editor anda sentiasa dipenuhi dengan sampel HTML dan CSS, menyediakan kedudukan permulaan asas. Walau bagaimanapun, walaupun anda memadam setiap watak dalam editor, panel output anda secara teknikal tidak kosong.

mengapa? Jika anda menyemak kod sumber panel output (Petua: Sekarang matikan fungsi "slaid dan bandingkan" terlebih dahulu), anda akan menemui

Seperti yang ditunjukkan dalam imej di bawah, anda dapat melihat bahawa mereka wujud berturut -turut CSS. Sudah tentu, anda boleh gaya kedua -dua elemen HTML ini tanpa membelanjakan sebarang aksara untuk menciptanya.

Selalu ada HTML dan elemen badan untuk gaya.

Ini tidak bermakna anda tidak akan menambah elemen HTML anda sendiri-

,

, , dan lain-lain-tetapi sentiasa cuba untuk mengutamakan "elemen terbina dalam" percuma. Teknik #2: Berhati -hati pilih unit pengukuran

sasaran CSSBattle sentiasa 400px lebar dan 300px tinggi, jadi anda boleh menerangkan dengan betul titik pusat sebagai kiri: 200px (10 aksara) dan atas: 150px (9 aksara). Walau bagaimanapun, anda boleh menerangkan kedudukan yang tepat seperti kiri: 50% (8 aksara) dan atas: 50% (7 aksara). Ini adalah simpanan 4 aksara yang mudah.

Walau bagaimanapun, peratusan tidak selalu menang. Kedudukan atas: 100px (9 aksara) Menukar ke atas: 33.33% (10 aksara) - Satu langkah ke belakang. Mencari perlawanan terbaik memerlukan banyak percubaan dan kesilapan. Unit pengukuran yang berpotensi berguna termasuk:

piksel: px

Peratusan: %

• Rems: Rem
• ems: em
• inci: dalam
• mm: mm
• pound: pc
• titik: pt
• Unit Ketinggian Viewport: VH
• Unit Lebar Viewport: VW
• milimeter kuar: q
Jenis Unit Terakhir- "Q"-adalah unit yang agak kurang dikenali. Tetapi kerana ia adalah watak - saya merasa sangat berguna dalam pertempuran CSS. Saya mendapati bahawa 50px menukar kepada 53 q.
Juga ambil perhatian bahawa jika anda tidak secara jelas mengisytiharkan jenis unit, beberapa sifat CSS menganggap bahawa anda merujuk kepada piksel. Dalam erti kata lain, lebar: 80 adalah sama dengan lebar: 80px. Begitu juga dengan ketinggian dan margin. Sebaliknya, jika anda tidak mengisytiharkan unit ukuran, kotak bayang-bayang akan gagal sepenuhnya.

tip #3: CSS adalah cascading - memanfaatkannya

CSS sangat baik pada "warisan" dan "kekhususan". Warisan membolehkan kanak -kanak mendapatkan gaya mereka dari elemen ibu bapa mereka. "Khusus" bermaksud bahawa peraturan yang luas akan dilindungi oleh peraturan yang lebih berhati -hati atau baru -baru ini.

Peraturan yang paling luas dalam CSS adalah * Wildcard, yang bermaksud "digunakan untuk semua elemen". Oleh itu, peraturan berikut menggunakan latar belakang #222 untuk semua kandungan. Jika kita tidak menambah apa -apa HTML tambahan, itu

dan

.

Jika kita kemudian menambah peraturan yang lebih spesifik untuk mencari hanya

, kita hanya gaya tanpa menamakannya secara langsung - menjimatkan 3 aksara.

<code>*{background:#222}</code>

mari kita melangkah lebih jauh.

Dalam CSS, "& gt;" bermaksud "hanya jika x adalah ibu bapa y" (iaitu x & gt; y {}). Jadi jika kita menulis:

<code>*{background:#222}</code>

... kita bercakap tentang "hanya gunakan peraturan ini kepada mana -mana elemen yang terletak di dalam elemen lain" - dengan kata lain, mana -mana elemen kanak -kanak. Oleh kerana elemen tidak pernah menjadi elemen kanak -kanak, hanya

mendapat peraturan kedua. Kami menyelamatkan watak lain.

<code>*{background:#222}
body{background:#F2994A}</code>

tip #4: Penyemak imbas berkuasa. Biarkan mereka bekerja

Sebaik sahaja anda mendapat semua hasil di hujung jari anda, satu -satunya cara praktikal untuk memotong watak adalah untuk menghapuskan kod yang secara teknikal diperlukan tetapi tidak penting untuk rendering akhir. Anda mungkin mengatakan bahawa pelayar moden akan bersahabat dengan kod pendek dan sedikit tidak teratur. Ini termasuk tetapi tidak terhad kepada:

akhir penghapusan

• akhir penghapusan tag html (iaitu
)
• hujung akhir memotong blok gaya}
• Keluarkan kebanyakan ruang dan karakter kembali aksara. Percubaan dan kesilapan di sini adalah rakan anda.

Sudah tentu, tidak bermakna untuk mengadopsi pengoptimuman yang melampau dalam pengeluaran CSS. Anda akan berkompromi kebolehpercayaan kod anda untuk simpanan remeh. Tetapi CSSBatts akan mengajar anda lebih banyak tentang bagaimana pelayar berfikir dan apa yang mereka suka dan tidak suka.

Jadi, adakah cssbattle menggalakkan tabiat pengekodan yang buruk?

Saya mendengar beberapa menyebut bahawa ini adalah kelemahan yang berpotensi. Malah, veteran CSS Eric Meyer baru -baru ini menimbulkan persoalan ini dalam CSSBattle.Dev Maklum Balas Spektrum:

Adakah pergantungan pada penggunaan kelemahan parser (terutamanya mengenai pemisahan ruang) untuk mendapatkan skor yang lebih rendah yang disengajakan, atau adakah kesan sampingan? -Ik Meyer

Saya tidak fikir begitu. Bagi saya, ia adalah satu cara untuk menguji, bereksperimen dan akhirnya mendapat pemahaman yang lebih mendalam tentang CSS daripada menulis kod pengeluaran yang normal dan mantap.

anda boleh membandingkannya dengan puisi haiku Jepun. Haiku adalah format yang dibina atas sekatan yang ketat -apa -apa sekatan 3 baris dan 17 suku kata.

Bahkan tuan haiku terbesar di dunia tidak mengharapkan untuk bercakap atau menulis dengan haiku yang dibina dengan teliti setiap hari. Walau bagaimanapun, ini tidak bermakna apabila kita membaca (atau menulis) Haiku, kita tidak dapat mempelajari pelajaran penting dari pemilihan perkataan, irama, keseimbangan dan kecantikan.

Menulis "CSS Battles Code" tidak sama dengan menulis "Kod Pengeluaran" - tetapi ia akan mengajar anda kursus yang anda tidak boleh belajar di tempat lain.

Soalan Lazim Mengenai CSSBattle Dev (FAQ)

Apakah cssbattle dev dan bagaimana ia berfungsi?

CSSBattle Dev adalah platform dalam talian di mana pemaju boleh bersaing antara satu sama lain untuk cabaran pengekodan CSS. Platform ini menyediakan imej sasaran, dan tugas anda adalah untuk menyalinnya menggunakan HTML dan CSS. Semakin dekat output anda adalah untuk imej sasaran, semakin tinggi skor anda. Platform ini menggunakan sistem pemarkahan yang unik yang mengambil kira ketepatan output dan panjang kod. Kod yang lebih pendek, semakin tepatnya, semakin tinggi skor.

Bagaimana untuk meningkatkan skor saya di cssbattle dev?

Meningkatkan skor anda dalam cssbattle dev memerlukan gabungan ketepatan dan kesederhanaan. Output anda perlu hampir dengan imej sasaran yang mungkin, dan kod anda perlu secepat mungkin. Anda boleh melakukan ini dengan menguasai sifat dan nilai CSS, memahami bagaimana sifat CSS yang berbeza berinteraksi antara satu sama lain, dan belajar bagaimana menulis kod ringkas dan cekap.

Apakah beberapa petua untuk menguasai cssbattle dev?

Menguasai cssbattle dev memerlukan amalan dan pemahaman yang mendalam tentang CSS. Berikut adalah beberapa petua:

1. Memahami Model Kotak: Model kotak CSS adalah asas reka bentuk susun atur. Adalah penting untuk memahami bagaimana padding, sempadan, dan margin berfungsi.
2. kedudukan induk: Memahami bagaimana nilai kedudukan yang berbeza (statik, relatif, mutlak, tetap) mempengaruhi kedudukan elemen dapat membantu anda meletakkan unsur -unsur dengan tepat.
3. belajar menggunakan sifat disingkat: Sifat disingkat membolehkan anda menentukan pelbagai sifat dalam satu baris, membantu anda menulis kod yang lebih pendek dan bersih.

Bagaimana saya mempelajari lebih lanjut mengenai sifat dan nilai CSS?

Terdapat banyak sumber yang tersedia dalam talian untuk mempelajari sifat dan nilai CSS. Laman web seperti MDN Web Docs, CSS-Tricks, dan W3Schools menyediakan panduan dan tutorial yang komprehensif di CSS. Di samping itu, berlatih pada platform seperti CSSBattle Dev dapat membantu anda memahami bagaimana sifat dan nilai yang berbeza berfungsi dalam senario kehidupan sebenar.

Jika saya baru ke CSS, bolehkah saya mengambil bahagian dalam cssbattle dev?

Sudah tentu! CSSBattle Dev adalah platform yang sangat baik untuk pemula untuk belajar dan mengamalkan CSS. Cabaran berbeza dari mudah hingga sukar, jadi anda boleh memulakan dengan cabaran mudah dan secara beransur -ansur bergerak ke arah cabaran yang lebih kompleks apabila kemahiran anda bertambah baik.

Bagaimanakah sistem penarafan cssbattle dev berfungsi?

Sistem penarafan cssbattle dev didasarkan pada dua faktor: ketepatan dan panjang kod. Platform ini membandingkan output anda dengan imej sasaran dan mengira skor berdasarkan seberapa baik mereka sepadan. Ia juga mengambil kira panjang kod - semakin pendek kod, semakin tinggi skor.

Bolehkah saya melihat penyelesaian peserta lain di cssbattle dev?

Ya, selepas menyerahkan penyelesaian anda sendiri, anda boleh melihat penyelesaian dari peserta lain. Ini adalah cara yang baik untuk mempelajari cara yang berbeza untuk menyelesaikan cabaran yang sama dan dapat membantu anda meningkatkan kemahiran pengekodan anda.

Apakah beberapa kesilapan biasa yang harus dielakkan dalam cssbattle dev?

Beberapa kesilapan umum yang harus dielakkan dalam cssbattle dev termasuk: tidak memahami sepenuhnya model kotak CSS, tidak menggunakan sifat disingkat, dan tidak mengoptimumkan kod untuk menjadikannya ringkas. Ia juga penting untuk menguji kod anda dengan teliti untuk memastikan ia dapat menyalin imej sasaran dengan tepat.

Bolehkah saya menggunakan cssbattle dev untuk mempersiapkan wawancara kerja?

Ya, CSSBattle Dev adalah alat yang berguna untuk menyediakan temuduga kerja. Ia dapat membantu anda meningkatkan kemahiran menyelesaikan masalah anda, belajar menulis kod yang cekap, dan mendapatkan pemahaman yang lebih mendalam tentang CSS. Walau bagaimanapun, ingat bahawa wawancara kerja juga boleh merangkumi aspek pembangunan web yang lain, jadi ia tidak sepatutnya menjadi satu -satunya alat penyediaan anda.

bagaimana saya tetap bermotivasi semasa belajar CSS melalui cssbattle dev?

Pembelajaran CSS dengan CSSBattle Dev boleh mencabar, tetapi ia juga boleh menjadi sangat menarik. Aspek kompetitif platform dapat mendorong anda untuk meningkatkan kemahiran anda. Anda juga boleh menetapkan matlamat peribadi, seperti mencapai skor tertentu atau menyelesaikan beberapa cabaran tertentu untuk terus bermotivasi. Ingat, kunci untuk menguasai CSS (atau sebarang kemahiran) adalah kegigihan dalam amalan dan kesabaran.

Atas ialah kandungan terperinci Cabaran Kod #2: 4 Petua untuk Skor Tinggi di CSSBattle.dev. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!