Những Lưu ý - Thủ thuật - Phong cách khi viết mã CSS

1. Cách bố trí thẻ HTML5
- Đối với những người mới bắt đầu với mã HTML
Lầu dài nên dùng các framework có sẵn để nhanh hơn, hoặc nếu không thích bạn hãy cứ tạo phong cách riêng cho chính mình
<header>
  <nav class="mainMenu">
          <ul>
              <li><a></a></li>
          </ul>
  </nav>
</header>
<div class="wrapper">
    <section class="box-1">
          <h1>Title</h1>
         <div><div>
    </section>
    <section class="box-2">
          <h1>Title</h1>
         <div><div>
    </section>
    <aside class="sideBar"><aside>
</div>
<footer></footer>
Note section/ article:
<section >: thẻ html5 chứa bố cục của các thẻ Doc, chứ khối div có bố cục giống nhau.
<article>: chứ nội dung 1 bài viết, 1 blog...
Section có thể chứa article và ngược lại. Vì vậy không thể khẳng định thẻ nào chứa thẻ nào trước, thẻ nào sau. Đôi khi section còn chứa section, article còn chứa cả article....
2. Đặt tên Class cho thẻ:
3. Viết CSS cho từng phần:
*Header:
- thường cho nổi lên khi cuộn, cố định nổi lên top-0 trên đầu => cho người dùng dễ dàng chọn chuyên mục khác mà ko phải mất công cuộn lên lại.
* Banner
- dạng để thẻ <img>
- dạng để background
Note: khác nhau giữa dùng thuộc tính background và thẻ img là. 
- Background: là ảnh đại diện cho 1 thẻ bao cha, nền cho phần tử con trình diễn trên đó, được lấy ra bằng thuộc tính css , background:url().
vd:
<div class ="background">
     <div class ="content-background">
            <h2> title</h2>
            <p>discription</p>
     </div>
</div>
Tuy nhiên: dùng cách này(lấy đúng size ảnh) nếu hình ảnh của bạn quá nhỏ ko đủ kích thước để làm banner. Nếu bạn muốn full width, full height so với trình duyệt thì dùng thêm thuộc tính background-size:cover; width: value em hoặc %; Height: value em hoặc %/(auto, nội dung được bao nhiêu background cao bấy nhiêu); max - height: px, min-height:px
- Dùng  thẻ <img>, các phần tủ ảnh và nội dung là quan hệ ngang nhau, ko có cấp cha con, và để các phần tử về mặt content-text có thể trình diễn được trên <img> phải sử dụng đến các thuộc tính trôi nổi (position, z-index, top-bottom-right-left)
vd:
<div>
     <img src="background.png">
     <h2> title</h2>
     <p>discription</p>
</div>
Để full width (width:100%), full height (heght: 100%)
* Content
* Sidebar
*Footer
*Thuộc tính Css cho các phần tử khác:
Cao-rộng:
- Width: %; các thẻ có chức năng làm bố cục, kích thước lớn.
- Height: % hoặc auto; các thẻ có chức năng làm bố cục, kích thước lớn.
- Max-width: px; Min-width:px; kích thước tối đa, và tối thiểu của đối tượng.
- Max-height:px; Min-height: px; kích thước tối đa, và tối thiểu của đối tượng.
element{ min-width: px(%); < width:%(px); < max-width:px(%);}
element{min-height: px(%); < height: auto(%/px) ; < max-height:px(%);}
Responsive lưu ý những điều cần tránh khi viết css:
http://aptech.vn/kien-thuc-tin-hoc/luu-y-nhung-dieu-can-tranh-khi-viet-css.html
Không dùng 0px để định chiều cao
Không dùng “>” trong CSS
Không nên dùng đơn vị 100% (95% sẽ tốt hơn)
Cố định cỡ chữ bằng đơn vị % và em
Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width), vì IE nó sẽ cộng thêm kích thước padding vào chiều rộng.