Kod sebagai dokumentasi: Strategi baru dengan grid CSS

Supercool, sebuah syarikat reka bentuk web yang berkembang pesat, mewujudkan laman web tersuai untuk pelanggan seni dan menggunakan sistem CMS kerajinan di luar rak; Ia mempunyai reka bentuk grafik tinggi, serta tipografi dan bimbingan seni yang agak menuntut. Kami telah beralih ke grid CSS sejak beberapa bulan yang lalu. Kami perlahan -lahan beralih untuk membolehkan diri kita mencari paradigma baru dan kaedah reka bentuk dan bukan hanya memindahkan tabiat lama ke sintaks baru.

Setakat ini, kami telah membangunkan beberapa strategi yang sangat berguna untuk mengesan susun atur. Saya telah menulis beberapa campuran yang sangat pandai, menggunakan kawasan dan templat yang dinamakan, dan kami telah menemui beberapa konvensyen asas untuk membuat kod yang sangat mudah dibaca. Saya fikir ia akan menjadi sangat berharga untuk melangkah masuk ke dalam pelaksanaan pengeluaran lengkap satu komponen utama menggunakan grid, menggali beberapa isu reka bentuk yang ditimbulkannya, dan membimbing anda untuk mengelakkan perangkap yang kita hadapi. CSS Grid adalah spesifikasi yang besar dengan banyak cara yang mungkin dan banyak cara yang betul, tetapi pada satu ketika anda perlu menentukan kaedah anda dan mendapatkannya dalam talian.

Saya mengharapkan anda mempunyai pengetahuan tentang CSS, SASS, BEM dan berminat dengan prototaip yang dilaksanakan sepenuhnya, boleh diakses, rangka kerja adat (dengan lebih daripada 50 komponen) tugas dengan dokumen jenis lakaran atau photoshop dalam jadual yang ketat (seperti seminggu).

Pertama, mari kita kenali dan memisahkan tugas pengekodan yang berbeza dalam reka bentuk dan merancang bagaimana kita akan mengendalikannya:

1. Font: Pereka telah menentukan sistem font.
2. Warna: Pertama, kami membina model tema dan kemudian memasukkannya ke dalam bahagian.
3. Kandungan: Unsur -unsur apa yang dimasukkan ke dalam blok ini? Apakah variannya? Di sinilah Bem Mixin kami bermain.
4. Susun atur: Ini adalah bagaimana kandungan diletakkan di blok ini. Anda mungkin mahu melangkau terus ke langkah ini.
5. Kontrak: Ini adalah bagaimana kami memilih untuk menulis semua perkara di atas. Terdapat banyak jawapan yang betul dalam CSS, jadi penting bahawa kita semua bersetuju dengan satu konvensyen, peraturan. Ini sememangnya sepatutnya disenaraikan terlebih dahulu, tetapi demi artikel ini, kita akan meringkaskannya pada akhirnya.

Sistem Font

Kami menggunakan kelas utiliti (seperti H-Teks-H1, H-Teks-Kuda) untuk menetapkan gaya fon. Mungkin terdapat seratus gaya fon dalam projek. Kami menggunakan Typex untuk mengeksport gaya ini secara langsung dari lakaran ke dalam corak kami. Inilah jawatan lain dengan sendirinya, jadi mari kita anggap fon telah diproses. Kami tidak akan memperkenalkan fon ke bahagian komponen kami.

Penggunaan warna

Tema hanya menambah beberapa campuran kecil, jadi idealnya kita tidak akan melihat banyak peraturan warna di bahagian ini. Kami menyimpannya semua di bahagian _themer.scss dari perpustakaan "Mixin and Model" supaya kami dapat memastikan bahawa sistem reka bentuk laman web diikuti. Dengan cara itu, apabila seseorang kembali ke binaan kemudian, mereka mempunyai bahagian rujukan utama untuk menerangkan peraturan reka bentuk dan jenama. Apabila membina dan mengekalkan banyak laman web dalam pasaran yang sama - tetapi masing -masing mempunyai spesifikasi jenama yang berbeza - anda perlu memastikan bahawa satu jenama tidak keliru dengan yang lain! Jadi, seperti fon, kami abstrak peraturan warna dari bahagian -bahagian. Pada asasnya, dalam fail _header.scss kami sebenarnya hanya memberi tumpuan kepada susun atur (sebanyak mungkin).

Memandangkan kami bersetuju untuk sentiasa menggunakan mixin kami untuk tematik, ini adalah cara memasukkannya ke atas elemen:

 <code>@include var($property, $value);</code>

Kami kemudian akan menyediakan model tema yang menggambarkan bagaimana warna berfungsi di laman web ini dan memohon kepada komponen:

 <code>@include theme;</code>

Berikut adalah model tema sampel yang akan kami gunakan dengan tajuk halaman ini. Ia sangat mudah.

Kami memasangkan warna dengan hitam atau putih. Kami bergantung pada peraturan kontras dan flip mereka untuk penekanan, mungkin pada peristiwa (seperti melayang) atau menyerlahkan panggilan untuk bertindak. Itulah yang perlu kita lakukan untuk mencapai matlamat ini, dan sekarang kita mempunyai dokumentasi tentang bagaimana warna sebenarnya berfungsi di laman web ini. Jika kita perlu debug atau melanjutkan UI, kita boleh mengakses dan menyemaknya.

Kami juga ingin menyediakan warisan untuk membantu kami, jadi mari mengenal pasti beberapa konvensyen yang berguna:

• Tetapkan pengisian ikon SVG ke CurrentColor dalam saluran paip anda (dengan cara, saiz lalai dalam CSS adalah width: 1em; height: 1em; font-size: inherit; ).
• Sediakan di pangkalan<a></a> Untuk CurrentColor.
• Tulis singkatan, mewarisi sempadan (seperti 1px solid atau 1px solid currentColor ).

Dengan model topik ini, kami boleh menghasilkan beberapa topik, mungkin menyimpannya sebagai kelas utiliti, atau gelung melalui senarai pengubah dalam komponen, atau hanya membenarkan pengguna menetapkan pembolehubah secara langsung pada blok dalam CMS. Apabila IE 11 menyumbang kurang daripada 1% statistik kami, kami boleh berbuat lebih banyak dengan pembolehubah, tetapi itu sudah cukup untuk kegunaan semasa kami.

Jangan menyimpang dari topik ini. Bagaimana dengan Grid? !

Komponen Kandungan

Grid membolehkan kita menerangkan dengan tepat apa yang kita ada di setiap bahagian dengan cara yang baru. Ini benar-benar penukar permainan untuk agensi reka bentuk yang membina UI baru untuk setiap projek, dan ketika kami meneroka, kami menemui aplikasi baru (dan menarik) itu.

Untuk menyediakan konteks: Kami menggunakan CMS Craft untuk menyesuaikan setiap antara muka untuk pelanggan kami dan membuat bidang tersuai untuk memenuhi keperluan khusus mereka dan model kandungan mereka. Kami mempunyai alat dalaman yang boleh mengekstrak peristiwa dari API tiket dan membuat penyertaan daripadanya, yang kemudiannya boleh diedit dan dilanjutkan dalam CMS (atau dibuat sepenuhnya). Pelanggan boleh mengisi atau mengedit medan bernama di kawasan halaman tetap dan juga boleh menambah keseluruhan blok berjenama yang direka bentuk ke susun atur setiap halaman kerana mereka membina mereka.

Terdapat banyak UI. Pelanggan mempunyai banyak kawalan ke atas kandungan, dan kami mempunyai banyak kawalan ke atas HTML, jadi kami dapat memastikan bahawa terdapat kod semantik yang boleh diakses berkualiti tinggi pada halaman. Kami bersama -sama membangunkan model kandungan semasa proses penemuan dan kemudian biarkan mereka membuat kandungan dengan bebas. Mereka menambah apa yang mereka mahu dan kami pastikan ia berfungsi dan sentiasa kelihatan betul. Lebih baik daripada betul! Super . (Maaf !: P)

Jadi sebagai pemaju saya perlu menimbang keutamaan bersaing:

• Kebolehcapaian, ketersediaan
• Reka bentuk penjenamaan dan grafik
• prestasi
• Kesihatan Penyelenggaraan dan KodBase

Mari lihat mereka satu demi satu:

Kebolehcapaian

Boleh diakses, HTML logik adalah kegemaran saya. Sekurang -kurangnya, projek saya perlu mendapatkan skor kebolehaksesan hijau dalam skor rumah api. (Saya bercanda, saya mahu jalan dan halaman teras yang lazat 100!) Diuji menggunakan beberapa pembaca skrin (tab papan kekunci, navigasi papan kekunci), simulator penglihatan rendah, dasher, akses suara dan suis binari. (Saya juga bekerja untuk robot dan kek, jadi ia adalah sebahagian besar kerja pembangunan saya.) Saya telah menambah nombor telefon yang boleh diklik dan alamat e -mel ke halaman berulang kali. Saya hanya mahu orang pergi ke mana mereka mahu pergi.

Saya telah bimbang tentang bagaimana kandungan dapat disusun semula oleh Grid (dan Flexbox). Sekarang saya telah melakukan beberapa binaan, saya benar -benar fikir Grid dapat membantu kita menyelesaikan masalah ini. Dengan grid CSS, tidak ada sebab untuk memindahkan HTML untuk susun atur. Kita boleh kembali ke urutan linear yang merawat seluruh dokumen sebagai logik sebagai kebimbangan utama kita.

Jenama dan prestasi dan penyelenggaraan

Tempat-tempat seni memerlukan reka bentuk grafik standard tinggi, bersatu pada cetakan dan web, dan memerlukan bahan-bahan yang sentiasa berubah (seperti program, manual, tiket, poster, mikro-websites, dll.) Untuk mengedarkan penonton mereka, termasuk kewajipan pemasaran kontrak yang mesti dipenuhi. Seperti yang anda bayangkan, kami mempunyai banyak imej besar yang berkualiti tinggi yang memerlukan pemprosesan keutamaan dan sering datang dengan jenama yang dipimpin oleh percetakan yang kuat. Ini bermakna kita mungkin perlu menyediakan halaman dengan kira -kira lima belas fon tersuai (termasuk variasi ketebalan, fon paparan, dan lain -lain) serta CSS yang kompleks. Kita perlu mengekalkan diri kita yang diperkemas mungkin. Kami sedang menghantar kira -kira 20 kb Nano Gzipped CSS, tetapi saya sedang berusaha untuk mengurangkannya lagi.

Walau bagaimanapun, kami menyimpan panjang penuh nama rantau grid dengan menetapkan pengenalpastian mengurangkan palsu dalam tugas PostCSS. Mempunyai rajah susun atur yang ada di DevTools lebih berguna daripada menjimatkan jumlah bait yang kecil. Demi mengekalkan, mendokumentasikan diri dan masa depan anda sendiri yang merendahkan laman web ini tanpa akses repo di kereta api yang tertunda di Sowerby Bridge: Pastikan peta.

Kesihatan Kod

Cara untuk mengimbangi semua keperluan bersaing ini adalah untuk mengartikulasikan dan membuat persetujuan supaya kurang kandungan perlu diperbaiki dalam ujian dan bahawa isu -isu yang diselesaikan tetap diselesaikan . Kami menyemak semua komponen yang kami bina dan pastikan mereka selalu bermula dengan tajuk, pautan menunjuk ke lokasi, tindakan pencetus butang, objek yang boleh dikira disampaikan sebagai senarai dan awalan dengan tajuk mercu tanda, navigasi adalah<nav></nav> , Masa adalah<time></time> , Sup div adalah sarapan pagi - Asas.

Dengan grid CSS, tidak ada sebab untuk memindahkan HTML untuk susun atur . Kandungan anda sentiasa boleh mengalir secara logik, sementara perubahan susun atur berlaku di CSS. Dan, kerana tidak ada keperluan untuk margin atau padding untuk membuat jarak, anda hanya boleh mengisytiharkan:

 <code>.o-grid .o-grid { width:100%; }</code>

... untuk memastikan bahawa bilangan kumpulan bersarang secara visual menduduki grid halaman yang sama. HTML boleh membimbing perkara dengan lebih jelas: lebih dekat dengan dokumen.

Terdapat banyak perkara untuk menguruskan antara tajuk dan tindakan, dan cabaran saya adalah untuk menjejaki semua bidang ini dalam semua komponen ini sambil memastikan saya dengan setia melaksanakan spesifikasi reka bentuk supaya mereka boleh dilalui, boleh diimbangi, boleh dibaca dan mudah dibaca dalam beberapa cara yang logik dan mudah difahami.

Mari kita memperkenalkan campuran grid pertama saya yang mengejutkan.

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

Menggunakan Mixin ini di mana sahaja:

1. Setiap bahagian komponen kini bermula dengan senarai semua elemen yang mungkin, yang merupakan dokumentasi yang sangat berguna, terutama ketika perumpuran sebenarnya komponen depan.
2. Mixin bertanggungjawab untuk memperuntukkan kawasan grid.
3. Nama elemen dan komponen tetap konsisten dalam lakaran, CSS, dan HTML, dan sebarang ketidakkonsistenan akan sangat jelas kerana susun atur akan gagal. Saya tegas, tetapi adil.
4. Penamaan BEM secara automatik dikuatkuasakan, tetapi tidak merosakkan perkara di bahagian ini.

Sekarang, di bahagian ini, kami akan mengisytiharkan hanya kawasan grid-template, menggunakan kata-kata bahasa Inggeris biasa, memberikan kami satu siri peta susun atur yang juga sepadan dengan bidang pangkalan data. Sangat mudah dibaca!

Berikut adalah contoh cara menggunakan mixin ini:

Kami memutuskan untuk melekat dengan kawasan yang dinamakan untuk grid dalaman kerana saya membaca artikel hebat di laman web ini menerangkan bagaimana autoprefixer mengendalikan grid IE 11 jika anda berpegang dengan sifat yang disokong yang disenaraikan - dan ia berlaku dalam kebanyakan kes. Jika anda melihat kes ujian ini menggunakan mod debug berguna dengan autoprefixer yang digunakan dalam ujian penyemak imbas anda, anda akan melihatnya berfungsi.

Tetapi ada perangkap! Anda perlu menetapkan elemen sebaris sebagai blok untuk memastikan mereka sentiasa beroperasi sebagai unit grid dalam IE 11. Komen garis penanda dalam contoh untuk melihat apa lagi yang akan berlaku:

Aduh! Berhati -hati dengan kepingan itu. Anda mungkin mendapati bahawa beberapa versi IE 11 tidak akan mengambil pembetulan ini, dalam hal ini anda mungkin cuba menggunakan normal<div> Tags ... mengeluh.<p> Saya tidak memasukkan <code>display: grid dalam mixin ini kerana dalam beberapa kes, grid sebenar ditetapkan pada bekas dalaman, sebagai contoh, tetapi kami masih mahu kawasan grid untuk memadankan kelas BEM yang betul.

Jadi:

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

Mari kita letakkan perkara -perkara ini.

susun atur

Mari kita kenal pasti beberapa peraturan tambahan untuk memastikan komponen ini dapat dengan mudah meluncur ke dalam susun atur halaman. Pada masa penulisan, tidak ada sub-grid yang tersedia (tetapi akan ada!), Jadi komponen ini tidak tahu grid induknya. Ini berlaku untuk memadankan pendekatan komponen BEM dengan baik - kerana setiap komponen adalah rata dan terpencil untuk mengehadkan warisan. Saya tidak menganjurkan BEM di sini (atau Bem -ish yang kami gunakan) - Saya hanya mengatakan bahawa jika anda sudah menggunakannya, itu bonus tambahan.

Dalam contoh ini, pereka menetapkan susun atur halaman dengan 12 lajur grid dan jarak 20px (1.25rem), tanpa bahagian mengimbangi dalam keseluruhan tapak. Komponen kami adalah kawasan halaman yang akan menduduki semua lajur 12 grid. Semasa tempoh peralihan ini, kami masih menggunakan grid persediaan jenis ini kerana kami mempunyai banyak sistem yang masih berdasarkan idea ini yang perlu diintegrasikan dengan. Oleh itu, ini adalah konvensyen di bawah keadaan ini: untuk kawasan lebar penuh, padamkan jurang grid dan tulis templat grid ke unit pecahan (FR) sebanyak 12.

Melakukannya bermaksud:

1. Penglihatan grid dalaman ini secara kasar mengikuti grid di mana ia tinggal;
2. Mudah melihat peraturan reka bentuk asas dalam kod; dan
3. Adalah mudah untuk menyelaraskan perkara dengan tepat jika diperlukan.

Nota cepat mengenai penjajaran

Tunggu ... apa maksud saya dengan "penjajaran tepat"? Bukankah sudah sejajar dengan tepat?

Nah, tidak. Kaedah unit pecahan membahagikan ruang dengan sempurna, jadi anda berakhir di jarak. Dua lajur juga akan meletakkan anda di tengah -tengah jarak. Dua lajur yang satu lajurnya adalah 2/3 dan 1/3 yang lain akan dibahagikan pada 1/3 dari jarak itu, dan sebagainya.

Penjajaran penjajaran tidak sukar kerana kita tahu lebar jarak grid halaman. Sebagai contoh, pada segmentasi seragam, kita boleh memasukkan jurang grid.

Walau bagaimanapun, kita tidak boleh melakukan ini dengan mana -mana segmentasi lain. Apa yang boleh kita lakukan ialah menambah jurang itu sebagai margin -apa sahaja saiz kotak yang anda tetapkan, margin akan ditambah secara dalaman. Dalam contoh ini, kita mempunyai tiga lajur (dua kawasan bernama dan satu ruang kosong) yang membahagikan jarak kita menjadi tiga bahagian:

Ini adalah cara untuk mengira margin ini: pastikan jumlah unit FR adalah 12. Bahagikan jurang grid dengan bilangan lajur dalam grid induk dan kalikan seperti ini:

Pengganda margin kanan N adalah sama dengan jumlah unit FR di sebelah kanan n. Margin kiri N adalah sama dengan jumlah unit FR di sebelah kiri n.

Oleh itu, untuk nilai grid-template-columns ialah 2fr 3fr 2fr 4fr 1fr :

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

Jika anda mendapati diri anda menulis calc() dengan kerap, anda juga boleh menulisnya sebagai mixin. Sebagai contoh, inilah cara menyelaraskan grid dalaman dengan grid induk:

... dan inilah cara untuk mengira margin secara automatik apabila nama itu ditentukan secara dalaman tetapi nombornya ditentukan di luar grid:

Saya percaya anda boleh memikirkan penyelesaian lain seperti beralih kepada baris bernama, atau menambah lajur tambahan lebar tetap, atau menulis semua peta dengan 12 kawasan bernama setiap baris. Terdapat banyak cara untuk menangani perkara ini, tetapi saya fikir banyak kaedah menghapuskan kelebihan kawasan yang dinamakan. Kawasan ini memberikan kami gambarajah susun atur yang boleh dibaca yang mengandungi apa yang perlu diketahui oleh diri masa depan kita. Ia adalah kod sebagai dokumentasi.

Untuk menjadi jelas, masalah reka bentuk yang saya jalankan untuk menyelesaikannya bukan masalah penjajaran. Dengan grid, penjajaran mudah. Masalahnya adalah untuk tidak menyelesaikan masalah susun atur langsung, tetapi untuk menyelesaikannya dengan cara yang menyokong matlamat kami, iaitu, dapat memahami dalam enam bulan:

1. Unsur -unsur apa yang dimasukkan dalam komponen.
2. Bagaimana mereka dibentangkan.
3. Mengapa kod itu ditulis dengan cara ini.

Spesifikasi grid sangat besar dan mudah hilang dalam pilihan. Mungkin pelan yang lebih baik adalah untuk menetapkan semula ke grid 12-kolumn dan menggunakan spesifikasi angka apabila penjajaran mutlak diperlukan (iaitu secara eksplisit menghubungkan ke grid halaman kami, yang menggunakan spesifikasi angka)-tetapi saya rasa ada penyelesaian yang lebih bijak dan mudah untuk ditemui. Untuk laman web ini, kami akhirnya menulis objek grid halaman dan menambah sel-sel grid dalaman bersarang untuk menggunakan kelas: .o-page-grid\_\_sidebar .

Apa pendapat anda? Saya pasti meramalkan pandangan yang berbeza mengenai perkara ini. ? ‍♀️

Grid sebenar!

Kita boleh menggunakannya untuk membuat tajuk halaman biasa:

Sebagai alternatif, kita boleh membuat variasi laman web:

Jadi, bagaimana dengan tajuk wira yang melampaui bekas kita? Sudah tentu! Atau kita boleh memberikannya di luar bekas:

Apa yang seterusnya? Tajuk acara tema dengan bar maklumat lebar penuh (tampal) dan butang dalaman yang sejajar dengan bar sisi pada grid induk? Betul. Saya akan memasukkan grid induk supaya lebih mudah dilihat:

Jadi bagaimana dengan carian dengan penjajaran berpusat? Mari gunakan teknik lajur lipat:

Berikut adalah demonstrasi semua variasi ini sebagai satu bahagian. Ya, itu peta! Ini pembungkusan!

Bersetuju

Wow, kami banyak menutupi! Tetapi anda dapat melihat bagaimana sistem fleksibel dan didokumentasikan sendiri seperti ini, bukan?

1. Fon diproses oleh sistem fon berasingan.
2. Warna diproses oleh seksyen tema yang menggambarkan peraturan warna asas reka bentuk dan bukan sekadar elemen teduhan buat sementara waktu.
3. Unsur -unsur dipanggil apa yang mereka, dalam bahasa Inggeris, dan disertakan dengan template mixin di bahagian atas bahagian. Senarai ini boleh dimasukkan sebagai rujukan dalam ranting atau dalam templat.
4. Sentiasa gunakan HTML yang betul dan bersarang tidak memecahkan grid. Ini bermakna anda boleh memohon sebilangan grid bersarang ke ruang susun atur yang sama dengan menetapkan konvensyen.
5. Penjajaran tepat dilakukan dalam spesifikasi angka, bukan spesifikasi nama (tetapi perhatikan bahawa anda boleh menggunakan spesifikasi nama untuk penjajaran).
6. Menyokong IE 11.

Saya juga mempunyai penerangan ringkas dan satu lagi contoh komponen yang dibina menggunakan kawasan yang dinamakan. Dalam contoh ini, kad itu bukan kawasan, tetapi komponen yang diletakkan di dalam grid, jadi tidak ada sebab untuk menggunakan konvensyen FR 12. Bahagian objek media yang anda boleh harapkan adalah seperti berikut:

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>

Atas ialah kandungan terperinci Kod sebagai dokumentasi: Strategi baru dengan grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!