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.. Giới

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

– 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

• 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ửai

http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/