Analisis mendalam semantik HTML dan rangka kerja bahagian hadapan yang berkaitan_HTML/Xhtml_Pengeluaran halaman web

Mengenai semantik

Semantik mengkaji hubungan antara tanda dan simbol serta makna yang diwakilinya. Dalam linguistik, ia adalah kajian tentang makna simbol (seperti perkataan, frasa, atau bunyi) dalam bahasa. Dalam bidang pembangunan bahagian hadapan, semantik terutamanya melibatkan makna yang dipersetujui bagi elemen HTML, atribut dan nilai atribut (termasuk sambungan seperti Microdata). Semantik konvensyen formal ini, yang biasa digunakan dalam spesifikasi, boleh membantu program (dan kemudiannya orang yang terlibat dalam pembangunan) lebih memahami semua aspek tapak web. Walau bagaimanapun, walaupun semantik elemen, atribut dan nilai atribut ini diformalkan, ia masih tertakluk kepada penyesuaian pembangun dan pilihan kolektif. Ini memungkinkan bahawa semantik kontrak formal boleh diubah suai pada masa hadapan (dan ini adalah salah satu prinsip reka bentuk HTML).
Bezakan pelbagai jenis semantik HTML

Mematuhi prinsip penulisan "HTML semantik" adalah salah satu asas pembangunan bahagian hadapan profesional moden. Kebanyakan semantik berkaitan dengan sifat semasa atau jangkaan kandungan (cth: elemen h1, atribut lang, nilai e-mel atribut jenis, Microdata).

Walau bagaimanapun, tidak semua semantik perlu berorientasikan kandungan. Nama kelas tidak boleh "semantik". Tidak kira apa nama pun, pasti ada maksud dan tujuan. Semantik nama kelas boleh berbeza daripada elemen HTML. Kita boleh menggunakan semantik "global" elemen HTML, atribut HTML tertentu, Microdata, dsb., dan kemudian menggunakan semantik khusus "tempatan" tapak web atau aplikasi untuk membezakan semantik khusus ini biasanya disertakan dalam nilai atribut, seperti atribut kelas.

Walaupun "amalan terbaik" yang sepatutnya ini diulangi dalam bahagian atribut kelas spesifikasi HTML5...

…menggalakkan pembangun menggunakan nilai atribut kelas untuk menerangkan kandungan sebenar, dan bukannya menerangkan kandungan yang dijangka dipaparkan.

…tiada sebab yang wujud untuk melakukan ini. Malah, apabila pendekatan ini digunakan pada laman web atau aplikasi yang besar, ia selalunya boleh menjadi penghalang.

Elemen HTML dan atribut lain sudah menyediakan semantik peringkat kandungan
Untuk mesin atau pelawat, nama kelas boleh mendedahkan sedikit atau tiada maklumat semantik yang berguna. Melainkan ia adalah sebahagian kecil daripada nama yang telah dipersetujui (juga boleh dibaca mesin) - Mircoformats
Tujuan utama nama kelas adalah untuk menjadi cangkuk untuk CSS dan JavaScript. Jika anda tidak perlu menambahkan pembentangan dan tingkah laku pada halaman anda, maka anda mungkin tidak perlu menambahkan nama kelas
pada HTML anda harus menyampaikan maklumat yang berguna kepada pembangun. Apabila anda membaca serpihan DOM, ia akan membantu untuk memahami perkara yang dilakukan oleh nama kelas tertentu. Terutamanya dalam pasukan pembangunan berbilang orang, pembangun bahagian hadapan bukanlah satu-satunya yang berurusan dengan komponen HTML.

Berikan contoh yang sangat mudah:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div kelas="berita" >
2.  <h2>Beritah2>
3. [kandungan berita]
4. div>

Apabila kandungan tidak jelas, berita nama kelas tidak dapat memberitahu anda apa-apa. Ia tidak memberi anda maklumat tentang struktur keseluruhan komponen, dan apabila kandungan tidak lagi "berita", nampaknya sangat tidak sesuai untuk menggunakan nama kelas ini. Semantik nama kelas terlalu hampir dengan kandungan, dan seni bina tidak mudah untuk dilanjutkan dan tidak mudah digunakan oleh pembangun lain.
Nama kelas bebas kandungan

Mengekstrak semantik nama kelas daripada struktur dan kefungsian corak reka bentuk ialah pendekatan yang lebih baik. Komponen yang nama kelasnya tiada kaitan dengan kandungannya lebih boleh digunakan semula.

Kita tidak seharusnya takut untuk membuat perhubungan antara setiap lapisan jelas dan jelas (ini harus merujuk kepada lapisan struktur, lapisan kandungan, dsb., nota penterjemah), dan bukannya menggunakan nama kelas untuk menggambarkan kandungan yang jelas dengan ketat. Melakukan ini tidak menjadikan nama kelas "semantik", ia hanya menunjukkan bahawa semantik mereka tidak bergantung pada kandungan. Kami juga tidak perlu takut untuk menggunakan elemen HTML tambahan selagi ia membantu anda mencipta komponen yang lebih kukuh, lebih fleksibel dan lebih boleh digunakan semula. Melakukan ini tidak menjadikan HTML "semantik", ini hanya bermakna anda menandakan kandungan dengan lebih daripada bilangan elemen minimum.
Seni bina bahagian hadapan

Tujuan komponen, templat dan seni bina berorientasikan objek adalah untuk dapat membangunkan bilangan terhad komponen boleh guna semula yang boleh mengandungi jenis kandungan yang berbeza dalam julat tertentu. Dalam aplikasi besar, perkara yang paling penting tentang semantik nama kelas ialah mereka memenuhi tujuan utama mereka dengan pragmatisme - menyediakan prestasi yang bermakna, fleksibel, boleh diguna semula atau cangkuk tingkah laku untuk pembangunan atau penggunaan.
Komponen boleh guna semula dan boleh gubah

Secara amnya, HTML/CSS yang boleh dikembangkan mesti bergantung pada kelas dalam HTML untuk mencipta komponen yang boleh digunakan semula. Komponen yang fleksibel dan boleh diguna semula yang tidak bergantung pada bahagian tertentu pokok DOM mahupun menggunakan jenis elemen tertentu. Ia harus disesuaikan dengan bekas yang berbeza dan tema boleh ditukar dengan mudah. Jika perlu, elemen HTML tambahan (melebihi yang diperlukan untuk menandakan kandungan) boleh menjadikan komponen lebih mantap. Objek media Nicole Sullivan adalah contoh yang baik.

Mengelakkan penggunaan pemilih jenis untuk menyokong kelas boleh menjadikan komponen lebih mudah untuk digabungkan. Dalam contoh berikut, komponen btn dan komponen uilist tidak mudah untuk digabungkan. Masalahnya ialah .btn mempunyai berat yang lebih kecil daripada .uilist a (ini akan mengatasi sebarang sifat kongsi). Dan komponen ulist memerlukan mata penambat sebagai nod anak.

Kod XML/HTMLSalin kandungan ke papan keratan

1. .btn { /* gaya */ }
2. .uilist { /* gaya */ }
3. .uilist a { /* gaya */ }
5. <nav kelas="uilist" >
6.  <a href="#" >Rumaha>
7.  <a href="#" >Mengenaia>
8.  <a kelas="btn" href="#">Log Masuk a> 
9. nav>

Satu cara untuk menggabungkan komponen uilist dengan komponen lain dengan mudah ialah menggunakan kelas untuk menambah gaya pada elemen DOM kanak-kanak uilist. Walaupun ini mengurangkan berat badan, faedah utamanya ialah ia memberi anda pilihan untuk mengendalikan sebarang gaya struktur nod anak.

Kod XML/HTMLSalin kandungan ke papan keratan

1. .btn { /* gaya */ }
2. .uilist { /* gaya */ }
3. .uilist-item { /* styles */ }
5. <nav kelas="uilist" >
6.  <a kelas="uilist- item" href="#">Rumaha> 
7.  <a kelas="uilist- item" href="#">Mengenaia> 
8.  <span kelas="uilist- item"> 
9.  <a kelas="btn" href="#">Log Masuk a> 
10.  jarak> 
11. nav>

Kelas khusus JavaScript

Menggunakan beberapa bentuk kelas khusus JavaScript boleh mengurangkan risiko pecah JavaScript akibat perubahan dalam gaya atau struktur komponen. Kaedah yang saya dapati yang berfungsi dengan baik ialah menggunakan kelas tertentu hanya untuk cangkuk JavaScript - js-* - dan jangan tambahkan sebarang penerangan pada nama kelas.

Kod XML/HTMLSalin kandungan ke papan keratan

1. <a href="/log masuk" kelas="btn btn-primary-js-login">a>

Apabila anda mengubah suai struktur atau gaya komponen, anda mungkin secara tidak sengaja menjejaskan gelagat JavaScript yang diperlukan dan fungsi kompleks Kaedah ini boleh mengurangkan kemungkinan.
Pengubah Suai Komponen

Komponen selalunya mempunyai variasi yang hanya berbeza sedikit daripada komponen asas. Contohnya, warna latar belakang atau sempadan yang berbeza. Terdapat dua mod utama untuk mencipta variasi komponen ini. Saya memanggil mereka corak "nama kelas tunggal" dan corak "nama kelas berbilang".

Corak nama kelas tunggal

Kod XML/HTMLSalin kandungan ke papan keratan

1. .btn, .btn-primary { /* Gaya templat butang */ }
2. .btn-primary { /* Gaya khas butang utama */ }
4. <butang kelas="btn" >Lalaibutang>
5. <butang kelas="btn- utama">Log masukbutang>

Pola nama kelas berbilang

Kod XML/HTMLSalin kandungan ke papan keratan

1. .btn { /* Gaya templat butang */ }
2. .btn-primary { /* Gaya khas butang utama */ }
4. <butang kelas="btn" >Lalaibutang>
5. <butang kelas="btn btn -utama">Log masukbutang>

Jika anda menggunakan prapemproses, anda boleh menggunakan ciri @extend Sass untuk mengurangkan beberapa kerja penyelenggaraan yang terlibat apabila menggunakan corak "nama kelas tunggal". Walau bagaimanapun, walaupun dengan bantuan prapemproses, saya masih lebih suka menggunakan mod "nama kelas berbilang" dan mengubah suai nama kelas dalam HTML.

Saya dapati ini adalah corak yang lebih berskala. Sebagai contoh, anda ingin melaksanakan komponen btn asas dan menambah 5 jenis butang dan 3 saiz tambahan. Jika anda menggunakan mod "nama kelas berbilang", anda hanya memerlukan 9 kelas, dan jika anda menggunakan mod "nama kelas tunggal", anda memerlukan 24 kelas.

Ia juga memudahkan untuk menyesuaikan konteks kepada komponen jika diperlukan. Anda mungkin ingin membuat beberapa pelarasan terperinci pada mana-mana btn yang muncul dalam komponen lain.

Kod XML/HTMLSalin kandungan ke papan keratan

1. /* Stilanpassung „Mehrere Klassennamen“ */
2. .thing .btn { /* Entsprechende Stilanpassung */ }
4. /* Stilanpassung „Einzelner Klassenname“ */
5. .thing .btn,
6. .thing .btn-primary,
7. .thing .btn-danger,
8. .thing .btn-etc { /* Entsprechende Stilanpassung */ }

Der Modus „Mehrklassenname“ bedeutet, dass Sie nur einen einzigen internen Komponentenselektor verwenden müssen, um den Stil aller Arten von BTN-Elementen zu ändern. Das Muster „Einzelklassenname“ bedeutet, dass Sie beim Erstellen einer neuen Schaltflächenvariante alle möglichen Schaltflächentypen berücksichtigen und den Selektor anpassen müssen.
Strukturierter Klassenname

Wenn Sie eine Komponente erstellen – und ihr ein „Thema“ hinzufügen – werden einige Klassen zur Unterscheidung der einzelnen Komponenten verwendet, einige Klassen werden als Modifikatoren der Komponente verwendet und andere Klassen werden zum Zuordnen von DOM-Knoten verwendet in einer größeren abstrakten Komponente enthalten.

Es ist schwierig, die Beziehung zwischen btn (Komponente), btn-primary (Modifikator), brn-group (Komponente) und btn-group-item (Komponenten-Unterobjekt) zu beurteilen, da diese Namen den Zweck nicht klar ausdrücken der Klasse. Es gibt kein einheitliches Muster.

Im letzten Jahr habe ich mit Benennungsmustern experimentiert, um die Beziehung zwischen den Darstellungen von Knoten in einem DOM-Fragment schnell zu verstehen, ohne zwischen HTML-, CSS- und JS-Dateien hin und her wechseln zu müssen, um es zusammenzusetzen. Die Struktur der Website. Dieses Muster wird weitgehend vom Benennungsansatz des BEM-Systems beeinflusst, aber in eine Form angepasst, die meiner Meinung nach einfacher zu navigieren ist.

Code kopieren

Der Code lautet wie folgt:

t-template-name
t -template- name--modifier-name
t-template-name__sub-object
t-template-name__sub-object--modifier-name

Komponentenname
Komponentenname--Modifikatorname
Komponentenname__Unterobjekt
Komponentenname__Unterobjekt--Modifikatorname

is-state-type

js-action-name
js-component-type

Ich behandle einige Strukturen als abstrakte „Vorlagen“ und andere als klarere Komponenten (oft auf „Vorlagen“ aufgebaut). Diese Unterscheidung ist jedoch nicht immer notwendig.

Dies ist nur ein Benennungsmuster, das ich bisher nützlich fand. Das Benennungsmuster kann jede beliebige Form annehmen. Der Vorteil dieses Benennungsmusters besteht jedoch darin, dass mehrdeutige Klassennamen vermieden werden und nur (einzelne) Konnektoren oder Unterstriche oder das CamelCase-Format verwendet werden.
Hinweise zur Rohdateigröße und HTTP-Komprimierung

Jede Diskussion über modulares und erweiterbares CSS bringt Bedenken hinsichtlich der Dateigröße und des „Aufblähens“ mit sich. Nicole Sullivans Bemerkungen erwähnen häufig die Dateigrößenspeicherung (und Wartungsverbesserungen) und zitieren die Erfahrungen von Unternehmen wie Facebook, die diesen Ansatz übernehmen. Um noch einen Schritt weiter zu gehen, dachte ich, ich würde einige der HTTP-Komprimierungseffekte, die ich auf die Vorverarbeitungsausgabe hatte, sowie den intensiven Einsatz von HTML-Klassen mit Ihnen teilen.

Als Twitter Bootstrap zum ersten Mal herauskam, habe ich das kompilierte CSS neu geschrieben, um die Größe besser mit manuell manipulierten Dateien vergleichen zu können. Nach der Minimierung aller Dateien war die manuell bearbeitete CSS-Datei 10 % kleiner als die Präprozessorausgabe. Wenn jedoch alle Dateien mit gzip komprimiert werden, ist die vom Präprozessor ausgegebene CSS-Datei 5 % kleiner als beim manuellen Betrieb.

Dies unterstreicht die Bedeutung des Vergleichs der Dateigrößen nach der HTTP-Komprimierung, da eine reduzierte Dateigröße nicht die ganze Wahrheit sagt. Dies impliziert, dass erfahrene CSS-Entwickler, die Präprozessoren verwenden, sich keine allzu großen Sorgen über einen gewissen Grad an Duplizierung im kompilierten CSS machen sollten, da dieser nach der HTTP-Komprimierung kleiner wird. Die Vorteile der Verarbeitung von wartbarerem CSS-Code durch einen Präprozessor überwiegen die Bedenken hinsichtlich der Ästhetik oder der Dateigröße des Roh-CSS und des minimierten Ausgabe-CSS.

In einem anderen Experiment habe ich eine 60 KB große HTML-Datei aus dem Internet gecrackt (bestehend aus vielen wiederverwendbaren Komponenten) und jedes ihrer Klassenattribute gelöscht. Nach dieser Verarbeitung reduziert sich die Dateigröße auf 25 KB. Wenn sowohl die Originaldatei als auch die extrahierte Datei mit gzip komprimiert werden, betragen ihre Größen 7,6 KB bzw. 6 KB – ein Unterschied von nur 1,6 KB. Die tatsächlichen Auswirkungen einer großzügigen Verwendung von Klassen auf die Dateigröße sind nicht mehr der Rede wert.