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: http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object- oriented-css-oocss/ . trì stylesheets. - dễ dàng chỉnh sửa i i Nguồn: http://www.smashingmagazine.com/2011 /12/ 12/an-introduction-to-object- oriented-css-oocss/