CSS kode struktur untuk HTML 5

Dalam posting ini saya ingin menggambarkan beberapa panduan yang berguna tentang bagaimana menerapkan struktur CSS kode terorganisir mengingat pengenalan HTML 5 bahasa markup. Mereka bukan aturan umum tetapi saran sederhana yang dapat Anda ikuti untuk meningkatkan pembacaan, pengelolaan, dan organisasi umum dari kode CSS. Saran ini sangat berguna jika Anda harus bekerja pada file CSS yang kompleks yang dinyatakan bisa sulit untuk mengelola.

Saya lebih memilih untuk memisahkan kode CSS dalam tiga bagian yang berbeda: bagian pertama yang berisi tag HTML umum; bagian kedua yang berisi tag struktur, sebuah bagian terakhir dengan kelas kustom.

Bagian 1: Umum tag HTML
Dalam bagian ini saya membagi kode dalam dua subbagian. Sebuah ayat pertama yang berisi kode untuk mereset tag HTML standar dan ayat kedua yang berisi kode untuk mendefinisikan kembali tag HTML standar.

Bagian 1 Ayat 1
Bagaimana Anda tahu, tentang ulang CSS, praktek ini digunakan untuk mengatur ulang gaya default browser untuk elemen HTML standar (tubuh, h1, p, ul, li, ...). Salah satu file yang paling populer untuk reset CSS adalah Eric Meyers CSS ulang . Untuk HTML 5 saya sarankan Anda untuk melihat pada Richard Clark CSS ulang berdasarkan file Mayers. File-file ini mengatur ulang semua tag HTML yang ada dan untuk itu mengandung banyak baris kode CSS. Kenyataannya, pada kebanyakan kasus, hanya tag yang sering digunakan itu perlu diatur ulang adalah tubuh, h1, h2, h3, p, ul, li, bentuk, masukan dan jarang meja, tr dan td. Jadi jika Anda suka, Anda dapat menggunakan versi singkat dari file-file yang hanya berisi elemen HTML Anda benar-benar digunakan dalam halaman Anda:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {

border:0;
margin:0;
padding:0;
font-size:100%;
...

}
Dalam kode sebelumnya saya disorot dalam huruf tebal beberapa HTML 5 tag baru yang Anda butuhkan untuk me-reset (lihat setelah penjelasan singkat tentang mereka).

Bagian 1 Ayat 2
Dalam ayat kedua dari bagian 1 saya hanya mendefinisikan kembali tag HTML standar:

/* Subsection 2: Standard HTML tags redefinition */body,
form, input {

color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

Jika saya perlu mendefinisikan tag standar (untuk <h1> misalnya) dengan sifat yang berbeda tergantung pada posisi dari tag pada halaman (<h1> untuk judul posting dan<h1> untuk judul sidebar) Saya lebih memilih untuk menambahkan CSS terkait kode ke bagian yang berisi tag struktural (Bagian 2). Sebagai contoh, untuk sidebar:

aside {...}

aside h1 {...}

Bagian 2: tag Struktural
Dalam bagian ini saya mendefinisikan semua elemen CSS yang mendefinisikan struktur halaman. Seperti yang saya diantisipasi, HTML 5 memperkenalkan tag baru yang meningkatkan semantik kode. Beberapa dari tag ini adalah: <header>, <nav>, <article>, <section>, <aside>, <footer> ... Anda dapat menggunakan tag bukannya lebih lapisan DIV umum kita digunakan sampai sekarang (misalnya: <div id="nav"> ... </ span>).

Tak lama, gambar di sebelah kanan merupakan tata letak dua kolom yang khas menggunakan HTML 5 tag untuk menentukan struktur halaman. Jika Anda ingin mengetahui informasi lebih lanjut tentang topik ini, saya sarankan Anda untuk melihat artikel-artikel yang sangat baik:

- Smashing Magazine: HTML5 dan Masa Depan Web
- Steve Smith: Tag Struktural di HTML5
- Lachlan Hunt: Preview HTML5

Kode CSS sangat sederhana:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Praktis itu identik dengan kode kita menggunakan DIV dengan lapisan:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}

Untuk setiap elemen HTML Anda dapat menentukan elemen anaknya. Sebagai contoh jika ini adalah kode untuk bar navigasi:
...

<nav>

<ul>

</ul>

</nav>

Kode CSS yang terkait adalah:

nav{...}

nav ul{...}

nav ul li{...}
nav ul li a{...}

Seperti yang saya katakan sebelumnya, dalam rangka meningkatkan pembacaan kode, saya sarankan Anda untuk menggunakan kode indentasi, dan urutan abjad untuk daftar sifat-sifat unsu

nav ul li a{

font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;

}

Apa perubahan terhadap HTML 4? Tidak begitu banyak:

<ul>

</ul>

<div>

Menyederhanakan, jenis tag struktural dalam HTML 5 adalah lapisan DIV dengan ID tertentu dalam HTML 4:

#nav{...}

#nav ul{...}

#nav ul li{...}
#nav ul li a{...}

Bagian 3: Kelas Kustom
Pada bagian terakhir dari file saya CSS saya menambahkan kelas kustom saya dapat menggunakan kembali dalam beberapa bagian (header, sidebar, footer, ...).