Pada corak jenis dan panduan gaya

Selama enam tahun yang lalu, saya telah menggunakan apa yang saya panggil "corak jenis" dalam reka bentuk web, mencapai hasil yang positif. Artikel ini meneroka corak ini, pelaksanaannya dalam CSS, dan bagaimana mereka dapat menyelaraskan aliran kerja tipografi anda.

Fikirkan ini sebagai setara dengan "gaya perenggan" HTML/CSS dalam perisian penerbitan desktop seperti QuarkXpress, InDesign, atau Coreldraw. Dalam reka bentuk buku, anda mungkin perlu menyesuaikan tipografi tajuk di seluruh buku secara dinamik. Ini memerlukan kawalan pusat ke atas corak tipografi.

Kebanyakan perisian reka bentuk menawarkan fungsi ini, walaupun antara muka mereka berbeza -beza. Gaya perenggan "asas" biasanya wujud, dari mana yang lain diperolehi. Gaya perenggan menguruskan unsur-unsur peringkat blok, manakala gaya watak mengendalikan unsur-unsur sebaris (tebal, rentang unik).

Prinsip teras tetap konsisten: kunci: pasangan nilai , mencerminkan harta CSS: pasangan nilai .

 H1 {
  Font-Family: "Helvetica Neue", Sans-Serif;
  saiz font: 20px;
  Font-Weight: Bold;
  Warna: Fuchsia;
}

Setelah ditakrifkan, gaya digunakan untuk teks. Simbol "" sering menunjukkan pengubahsuaian gaya. Menetapkan semula gaya menggunakan perubahan projek.

Walaupun ini menyerupai kelas CSS, reka bentuk laman web memberikan kerumitan. Saiz skrin berbeza-beza secara drastik, menuntut gaya konteks-menyedari yang menyesuaikan diri dengan sewajarnya.

Kawalan tipografi penting

Pembangunan awal sering memperkenalkan HTML semantik:

<h1 id="Tahap-Tahap"> Tahap Tahap 1</h1>
<p>Teks perenggan.</p>
<h2 id="Tahap-Tahap">Tahap Tahap 2</h2>
<p>Lebih banyak teks perenggan.</p>

Dipasangkan dengan CSS yang mensasarkan unsur -unsur ini:

 H1 {
  saiz font: 50px;
  Warna: #FF0066;
}

H2 {
  saiz font: 32px;
  Warna: RGBA (0,0,0, .8);
}

p {
  saiz font: 16px;
  Warna: DeepSkyBlue;
  Talian ketinggian: 1.5;
}

Ini berfungsi, mewujudkan hierarki visual. Gaya ejen pengguna menyediakan gaya lalai, memastikan hierarki asas walaupun tanpa CSS.

Kerumitan dalam projek yang lebih besar

Apabila laman web berkembang, kerumitan meningkat. Pada mulanya, kelas unik mungkin cukup, tetapi ini menjadi tidak mampan. Kelas kes khas muncul:

<h1 id="Tajuk-utama"> Tajuk utama</h1>
<p>Perenggan dengan <em>penekanan</em> .</p>
<p>Perenggan biasa.</p>

Kemudian, kelas berkembang:

<h1 id="Tajuk-utama"> Tajuk utama</h1>
<main><h2 id="Subheading">Subheading</h2>
<p> Teks perenggan</p></main>

Pemaju baru mungkin berjuang dengan saiz fon lalai dan margin, yang membawa kepada hacks seperti margin-top: -20px . Ini mewujudkan "perjuangan" terhadap CSS Cascade, sering disebabkan oleh ketidaktentuan gaya ejen pengguna.

Senario dunia nyata

Bayangkan menerima dokumen Photoshop yang sempurna dengan pelbagai warna, susun atur, dan gaya tipografi. Mengenal pasti gaya yang boleh diguna semula di banyak halaman memerlukan usaha yang ketara. Pertimbangan skrin kecil sering diabaikan, dan corak yang tidak konsisten merentasi saiz skrin yang berbeza selanjutnya merumitkan perkara. Panduan gaya mungkin wujud tetapi kekurangan kekhususan yang diperlukan untuk pembangunan front-end.

Malah panduan gaya terperinci tidak dapat disesuaikan dengan dokumen reka bentuk, yang membawa kepada kekeliruan. Awal karier anda, anda mungkin merasa bertanggungjawab untuk menguraikan segala -galanya, menerjemahkan nilai piksel ke dalam CSS. Walau bagaimanapun, ini membawa kepada peraturan yang diduplikasi:

 .blog Artikel P { / * ... Styles ... * /}
.mengandalkan .main-message { / * ... gaya serupa ... * /}
/ * ... lebih banyak gaya diduplikasi ... */

Anda mungkin cuba menggabungkan gaya dalam pemilih body , tetapi ini boleh menjadi terlalu luas.

Semakan reka bentuk

Perubahan reka bentuk memerlukan mengemas kini banyak peraturan CSS, yang membawa kepada konflik dan kerumitan selanjutnya. Penyelesaian ini sering melibatkan membuat kelas dan memohonnya kepada unsur -unsur, memisahkan susun atur dan corak jenis:

 standard-teks { / * ... gaya ... * /}
.heading-1 { / * ... gaya ... * /}
.Medium-Heading { / * ... Styles ... * /}

Ini meningkatkan keupayaan dan membolehkan gaya plug-and-play, tetapi tidak menangani situasi di mana pengubahsuaian HTML adalah mustahil (misalnya, CMS).

Bekerja dengan CMS

Apabila berurusan dengan CMS, anda tidak mempunyai kawalan HTML langsung. Mixins dalam preprocessors seperti sass menawarkan penyelesaian:

 @mixin standard-type () { / * ... gaya ... * /}
.context .thing {@include standard-type (); }

Walau bagaimanapun, hanya mengaitkan campuran dengan tahap tajuk mungkin mengehadkan. Sebaliknya, pertimbangkan gaya menganjurkan dengan "suara" (contohnya, calm-voice , loud-voice , attention-voice ), mencerminkan nada yang dikehendaki kandungan.

 @mixin tenang-suara () { / * ... gaya ... * /}
@Mixin Loud-Voice () { / * ... Styles ... * /}
@mixin perhatian-suara () { / * ... gaya ... * /}

Pendekatan ini meningkatkan makna dan memudahkan komunikasi silang disiplin. Memohon campuran ini dalam konteks article :

 artikel {
  H1 {@include loud-voice (); }
  H2 {@include perhatian-voice (); }
  p {@include calm-voice (); }
}

Ini memerlukan mengendalikan pelbagai struktur kandungan dan potensi ketidakkonsistenan. Peraturan CSS tambahan mungkin diperlukan untuk menguruskan jarak dan elemen lain.

Stylus, satu lagi preprocessor, menawarkan sintaks ringkas tetapi kini tidak mempunyai alat yang mantap.

Jenis Corak: Penyelesaiannya

Corak jenis, sama ada dilaksanakan melalui campuran atau kelas, menyediakan sistem plug-and-play untuk gaya yang konsisten. Mereka boleh digabungkan dengan kelas utiliti. Panduan gaya hidup, menggabungkan corak jenis, memudahkan kerjasama pasukan dan mengurangkan pixel-pushing. Pendekatan ini memberi manfaat kepada semua saiz.

Saiz fon berubah boleh diuruskan menggunakan clamp() dan unit vmin untuk reka bentuk responsif. Walaupun pendekatan ini menjana lebih banyak CSS, mengutamakan kebolehkerjaan dan kerjasama pasukan adalah penting.

Beyond CSS: Kerjasama

Corak jenis memupuk kerjasama antara pereka dan pemaju. Pereka visual boleh memberi tumpuan kepada estetika, sementara pemaju menguruskan struktur dan susun atur. Panduan gaya hidup berfungsi sebagai satu sumber kebenaran, menyelaraskan proses reka bentuk. Pendekatan ini mengurangkan keperluan untuk mockups yang sempurna piksel, yang membolehkan penerokaan reka bentuk yang lebih berulang. Perenggan dan gaya perenggan dan gaya ilustrator menawarkan inspirasi, tetapi kekurangan responsif. Panduan gaya yang komprehensif mungkin termasuk nisbah padding, warna, dan lebar garis, mempromosikan konsistensi reka bentuk. Butiran akhir ditapis secara bersamaan pada peranti sebenar.

Atas ialah kandungan terperinci Pada corak jenis dan panduan gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!