bài báo cáo CSS Reset Normalize CSS OBJECT ORIENTED CSS

CSS Reset & Normalize CSS
OBJECT ORIENTED CSS
Sự không đồng nhất trong việc hiển thị HTML của các trình
duyệt thường được giải quyết bằng cách sử dụng CSS Reset hay
Normalize.css.
1. CSS Reset
a. Giới thiệu
Bản chất của CSS Reset là ghi đè lên các thiết lập hiển thị các
thẻ HTML mặc định của trình duyệt. CSS Reset sẽ đưa các thiết
lập hiển thị về ‘zero’ của các thẻ HTML. Điều này giúp tạo một
điểm khởi đầu giống nhau cho việc hiển thị giao diện trang web
trên các trình duyệt. Tất nhiên, điều này cũng đòi hỏi bạn phải
dành thời gian xây dựng lại giao diện cho các thẻ HTML nếu
bạn muốn người dùng xem được trang web một cách dễ dàng.
Một trong những phiên bản reset CSS cơ bản nhất là sử dụng
selector ‘*’ (universal selector) để áp dụng style cho tất cả thẻ
HTML. Phiên bản này chỉ bao gồm một dòng css đơn giản có
chức năng xóa margin và padding của tất cả các thẻ HTML:
* { margin: 0; padding: 0; }
Tuy nhiên phương pháp này không có hiệu suất tốt và không
đáp ứng đầy đủ các trường hợp. Vì vậy, một số phiên bản CSS
Reset được nghiên cứu và sử dụng khá phổ biến hiện nay như
YUI Reset, Eric Meyer’s Reset, HTML5 Doctor CSS Reset.

b. Ý nghĩa
tạo một điểm khởi đầu giống nhau cho việc hiển thị giao diện
trang web trên các trình duyệt, giải quyết việc không đồng
nhất trong việc hiển thị html giữa các trình duyệt
=> trang html hiển thị giống nhau giữa các trình duyệt.
c. Cách sử dụng
Bạn có thể tự tạo cho mình một CSS Reset riêng dựa trên kinh

nghiệm hoặc tham khảo các phiên bản đang phổ biến. Bởi vì
CSS Reset hoạt động ở tầng thấp, nên việc đảm bảo chất lượng
và hiệu quả cần được chú ý.
– Chỉ reset các style cần thiết, vì vậy không nên dùng selector
‘*’ mặc dù nó có thể giúp css trở nên ngắn gọn hơn nhiều.
– Giữ cho code ngắn gọn, rõ ràng, tránh dư thừa các kí tự,
khoảng trắng hay các định nghĩa class không cần thiết.
– CSS Reset phải được nạp trước các tập tin css khác.

Các thuộc tính thường được reset về ‘zero’ như sau:
margin: 0;
padding: 0;
border: 0
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
color: #000;
text-decoration: none;
line-height: 1.4em;
…
d. Các phiên bản CSS Reset phổ biến
Phiên bản đầu tiên của CSS Reset được Yahoo đưa ra
năm 2006 với tên gọi: YUI Reset. YUI Reset sẽ chọn lọc
và reset những thuộc tính cần thiết một cách hợp lý cho
từng thẻ.
YUI Reset được chia thành hai phiên bản Global (thông
thường) và Contextual.
– Global: áp dụng reset cho cả trang.
– Contextual: chỉ reset các thẻ con của thẻ chứa class

“yui3-cssreset”.
– Eric Meyer’s Reset: một phiên bản được cải tiến từ
YUI 2 Reset bởi Eric Meyer
– HTML5 Doctor CSS Reset: dựa trên Eric Meyer’s
Reset, phiên bản này hỗ trợ thêm các thẻ mới có trong
HTML5
2. Normalize.css
a. Giới thiệu
Normalize.css là một tập tin CSS nhỏ cung cấp tốt hơn tính
nhất quán cho trình duyệt thông qua “style” mặc định của các
phần tử HTML.
thay vì ‘xóa hoàn toàn’ định dạng của các thẻ HTML,
Normalize.css chỉ xóa bỏ sự khác biệt về style giữa các trình
duyệt.
b. Ý nghĩa
o Bảo vệ mặc định của trình duyệt hữu ích hơn là xóa
chúng.
o Bình thường hóa “style” cho một loạt các phần tử
HTML.
o Kiểm tra lỗi chính xác
o Cải thiện khả năng sử dụng

c. Cách sử dụng
Trước tiên, tải normalize.css từ GitHub . Có 2 cách chính
để sử dụng.

- Phương pháp 1 : sử dụng normalize.css như một điểm
khởi đầu cho các cơ sở CSS riêng của bạn, tùy biến các
giá trị để phù hợp với yêu cầu của thiết kế .

- Phương pháp 2: bao gồm normalize.css bị ảnh hưởng và
xây dựng trên đó , trọng giá trị mặc định sau trong CSS
của bạn nếu cần thiết.
1


 So sánh reset css và normalize.css
CSS RESET

NORMALIZE CSS
• Reset nhằm mục đích
loại bỏ tất cả các style
mặc định được hiển thị
bởi trình duyệt, thay
vào đó là các thiết kế
của người lập trình.
• Ưu điểm : có quyền
kiểm soát nhiều hơn
Normalize

• chỉ đổi những style
khác biệt giữa các trình
duyệt.
• So với CSS Reset,
Normalize.css có các
ưu điểm:
- Giữ lại các style mặc
định có ích.
- Sửa các lỗi chung của
các trình duyệt.

- Không làm rối mắt khi
bạn dùng công cụ



debug.
- Có tính module.

3. OBJECT ORIENTED CSS(OOCSS)
a) Giới thiệu
OBJECT ORIENTED CSS( OOCSS) là một mô hình trực
quan lặp đi lặp lại, có thể được tóm tắt thành một đoạn độc
lập của HTML, CSS, và có thể JavaScrip.
 có thể được tái sử dụng nhiều lần trong một trang web
b) Nguyên tắc của OOCSS
- Separate structure and skin



3 element trên có cách định dạng riêng, nó đã đc áp dụng với các
ID không thể tái sử dụng để xác định style. Tuy nhiên vẫn có 1
vài style chung. Các style chung tồn tại để cso tính thống nhất
của sự thiết kế.
Chúng ta có thể gộp các đoạn css chung lại như sau:


Hiện tại các element đều sử dụng class, các style chung
đc kết hợp lại để tái sử dụng vào class “skin” và loại bỏ
sự trùng lặp không cần thiết. Chúng ta có thể áp dụng
class skin cho các element hoặc trộn lẫn với các class

khác mà kết quả thu đc tương tự ví dụ 1 ngoại trừ code ít
hơn khả năng tái sử dụng.

- Separate container and content
Nguyên tắc thứ 2 được miêu tả trên trang OOCSS GitHub là sự
tách biệt giữa vùng chứa và nội dung của nó. Ví dụ:

style trên áp dụng cho những thẻ h3 thuộc #sidebar. Nếu ta
muốn áp nó dụng cho thẻ h3 thuộc #footer, nhưng với font size
và text-shadow khác ?



Với OOCSS, chúng tôi tách những tính năng phổ biến vào mô-
đun, hoặc các đối tượng, có thể được tái sử dụng ở bất cứ đâu.
Các phong cách được khai báo sử dụng bộ chọn con cháu trong
những ví dụ trên là không thể tái sử dụng, vì họ là phụ thuộc vào
một thùng chứa đặc biệt (trong trường hợp này là các bên hoặc
chân).
Khi chúng tôi sử dụng xây dựng lớp học dựa trên mô-đun
OOCSS, chúng tôi đảm bảo rằng phong cách của chúng tôi
không phụ thuộc vào bất kỳ yếu tố có chứa. Điều này có nghĩa
họ có thể được tái sử dụng bất cứ nơi nào trong tài liệu, bất kể
bối cảnh cơ cấu.

d. Ý nghĩa
• Trang web nhanh hơn
- Ít trùng lặp mã
- Kích thước file nhỏ hơn
- Tải về nhanh hơn

• Linh hoạt và đa dạng
- Tái sử dụng các styles (Modules của css có thể được
thêm vào bất cứ nơi nào)
- Dễ dàng cải thiện chỉ 1 khối của đoạn code thay vì nhiều
• Dễ dàng duy trì stylesheets.
- dễ dàng chỉnh sửa
i




i
Nguồn: />oriented-css-oocss/