[Webmaster] CSS Framework + CSS reset: bắt thiết kế từ con số 0

Bạn không phải viết đi viết lại cùng một code CSS hay (X)HTML-Markup. Cho dù bạn bắt tay vào dự án nào đi nữa, tại một điểm nào đó, bạn phải xác định các class và ID mà bạn đã từng xác định trong các dự án trước. Để tránh các sai lầm không cần thiết, bạn có thể bắt đầu từ những chi tiết vụn vặt đã gần hoàn chỉnh thay vì từ một file trống không. Nó có thể chứa một vài định nghĩa cơ bản dùng để viết trong code… Bạn không phải viết đi viết lại cùng một code CSS hay (X)HTML-Markup. Cho dù bạn bắt tay vào dự án nào đi nữa, tại một điểm nào đó, bạn phải xác định các class và ID mà bạn đã từng xác định trong các dự án trước. Để tránh các sai lầm không cần thiết, bạn có thể bắt đầu từ những chi tiết vụn vặt đã gần hoàn chỉnh thay vì từ một file trống không. Nó có thể chứa một vài định nghĩa cơ bản dùng để viết trong code. Tuy nhiên, khi đã quyết định tạo một scratch, bạn cần phải chắc chắn rằng nó thực sự bulletproof, hơn nữa, nếu stylesheet cũng đặt ra các quy tắc tạo kiểu chữ tối ưu và thiết kế dạng cơ bản thì tức là bạn đang cố bắn một mũi tên trúng hai đích.

Và đây là lúc CSS Framework và CSS Reset trở nên hữu dụng. Chúng cho phép bạn có một markup và stylesheet mặc định hoàn hảo, giúp tiết kiệm thời gian và đảm bảo code chất lượng tốt nhất ngay từ ban đầu. Nhưng CSS Framework là gi? Và tại sao bạn cần Reset?

Hãy cùng xem ý tưởng đằng sau CSS Framework, những ưu điểm, nhược điểm, những Framework phổ biến nhất và hàng tá stylesheet mặc định có thể dùng trong thiết kế.

  • Bài viết này một phần đề cập tới các công cụ và kĩ thuật dùng khung lưới. Có thể bạn muốn tìm hiểu về ý tưởng đằng sau phương pháp thiết kế dựa trên khung lưới, hãy xem bài viết Thiết kế bằng phương pháp dựa trên khung lưới
  • Bạn có thể tìm thấy hàng trăm khuôn mẫu CSS trong bài viết Các layout và khuôn mẫu CSS miễn phí của chúng tôi
  • Hãy lưu ý rằng bài viết này tiếp cận CSS Framework một cách gần hơn, không phải là các môi trường phát triển web như Framework CSS lập trình máy chủ mở rộng như CakePHP và cũng không phải các Coda hay Dreamweaver .

CSS Framework là gì?

  • Một framework (thường khá trừu tượng) là một cấu trúc dựa trên khái niệm cơ bản mà bạn có thể dùng như một “scratch” cho các dự án web. Ví dụ, thay vì làm đi làm lại việc xác lập lại toàn cầu, đường cơ sở nhất quán, các nguyên tắc thiết kế kiểu chữ hay các kiểu form cơ bản trong mỗi lần làm một dự án mới; bạn có thể chuẩn bị một kiểu mặc định một lần và sử dụng lại trong các lần sau. Đó chính là CSS Framework.
  • CSS framework không được lớn hay phức tạp, nó có thể chứa một bộ các kiểu CSS đơn giản, như:
    • typography.css dành cho các nguyên tắc thiết kế kiểu chữ cơ bản
    • grid.css dành cho các layout dựa trên Khung lưới hoặc
    • layout.css cho các layout chung
    • form.css cho việc tạo kiểu form cơ bản
    • general.css cho các nguyên tắc chung khác

    Trong phân đoạn code, bạn cũng có thể đi xa hơn, ví dụ: cấu trúc, tạo kiểu chữ, trình bày thiết kế và các phần đặc biệt (như menu, điều hướng), in, web lưu động, tweak (hầu hết là các hack trình duyệt kiểu cũ), workaround trình duyệt riêng biệt (thông qua lệnh điều kiện IE. “Nhìn chung việc phân đoạn code trong framework đáng để làm, nhưng nó có thể thêm vào máy chủ yêu cầu http trong mỗi lần xem trang.” [Tiếp cận CSS framework dần dần viết bởi Gary Barber]

  • “Framework là một bộ công cụ, thư viện, quy ước và những ứng dụng tốt nhất, tách ra các nhiệm vụ thông thường, đưa vào các module chung để có thể tái sử dụng. Mục đích ở đây là tạo điều kiện cho nhà thiết kế và chuyên viên thiết kế tập trung vào các nhiệm vụ đặc biệt của dự án, thay vì phải làm đi làm lại những cái đã có sẵn.” [framework dành cho các nhà thiết kế, viết bởi Jeff Croft]

Các ưu điểm của framework CSS

    • Tăng năng suất và tránh các lỗi thông thường.

Nếu bạn phát triển vài trang có bản chất tương tự, một đoạn trích code CSS có thể làm tăng năng suất của bạn một cách bất ngờ, giúp bạn tránh được các lỗi thông thường và đơn giản hoá việc xử lí code CSS.

    • Bình thường hoá cơ sở code/class.

Bạn có một code CSS và (X)HTML-markup mặc định thông thường, vì vậy bạn luôn dùng cùng ID và class name trong các dự án khác nhau. Sự nhất quán code trong suốt nhiều dự án giúp bạn dễ dàng duy trì một trang web thay vì phải đào sâu nghiên cứu mã nguồn của mỗi dự án để hiểu bạn đã thực sự xây dựng một trang web như thế nào.

    • Tiến trình công việc trong một nhóm trôi chảy hơn.

Nếu một framework CSS được lưu trữ cẩn thận, nó có thể được dùng trong nội bộ một nhóm như một điểm chung; do vậy, bạn có thể tránh các hiểu lầm và đảm bảo cho một tiến trình làm việc tối ưu. Nó giúp bạn tránh các lỗi, hoàn thành đúng kế hoạch mà vẫn đảm bảo chất lượng sản phẩm và không vượt quá kinh phí.

    • Đạt được tính tương tích trình duyệt tối ưu.

Vì framework CSS của bạn là “bulletproof” nên bạn không cần phải lo lắng đến các vấn đề về tính tương thích trình duyệt và có thể bắt đầu mã hoá ngay lập tức.

    • Có một code hoàn chỉnh, cấu tạo tốt.

CSS Framework cung cấp cho bạn một nền tảng xuyên suốt cho mọi trang web; nhờ đó bạn có cách tạo kiểu cơ bản cho mọi yếu tố html trong phần đầu của các dự án. Bạn đã từng quên code hay abbr? Đó chính là mấu chốt.

Nhược điểm của CSS Framework

      • Bạn cần có thời gian để hiểu đầy đủ về framework.

“Thông thường đối với những người sử dụng, thời gian cần thiết để hiểu về cấu trúc của framework lớn hơn nhiều công việc mã hoá từ đầu. Tại sao tôi không dùng framework

      • Bạn cần có một hiểu biết cụ thể về cấu trúc code.

Khi sử dụng framework CSS bên ngoài bạn vẫn cần một hiểu biết kĩ càng về code của mình. Bạn cần biết chính xác thực tế framework của bạn được tạo dựng như thế nào. “Bằng cách tạo dựng một trang từ đầu, bạn có thể tăng hiểu biết về cấu trúc trang, điều mà bạn không thể học được từ bất cứ tài liệu nào”. Tại sao tôi không dùng framework

      • Bạn có thể tiếp nối các lỗi của người khác.

Nếu dùng framework CSS bên ngoài, có thể bạn sẽ gặp rắc rối trong việc phải tốn nhiều thời gian để sửa các lỗi của một ai đó, có khi còn mất thời gian hơn nhiều so với việc sửa lỗi của chính mình.

      • Bạn phát triển trang dựa trên một framework chứ không phải là một kiến thức vững chắc về CSS.

“Một vấn đề lớn của framework là khi các nhà thiết kế gắn mình với một framework tương phản với code cơ bản. Hiểu biết đạt được trong trường hợp này bao quanh một framework cụ thể, điều này sẽ cực kì hạn chế các nhà thiết kế.” Không nên sử dụng các framework CSS

      • Bạn nhận được một mã nguồn phồng lên.

“Cho dù nó thuộc framework language phía máy chủ hay thư viện JavaScript, vẫn có một tỉ lệ lớn code không bao giờ được thực hiện. While not a major issue server side, this can greatly degrade the performance of a client side framework such as a JavaScript library.” [Không nên sử dụng các framework CSS]

      • Không thể đóng khung CSS về mặt ngữ nghĩa.

“CSS và (X)HTML có liên quan chặt chẽ với nhau. (X)HTML về bản chất là một ngôn ngữ không thể bao trong kiểu của một framework. Mỗi dự án có một đặc điểm riêng biệt trong cấu trúc tài liệu, các class và ID. Một framework CSS loại bỏ một cách tiêu cực phần lớn giá trị về mặt ngữ nghĩa khỏi markup của một tài liệu. Và theo ý kiến của tôi thì nên tránh điều này.” [Please Do Not Use CSS Frameworks viết bởi Jonathan Christopher]

    • Lờ đi tính độc đáo của dự án.

Nên thiết kế dựa trên phần nội dung, chứ không phải dựa trên những khuôn mẫu tiêu chuẩn dùng đi dùng lại.

Các framework CSS YAML (Yet Another Multicolumn Layout)
yaml css framework
Framework (X)HTML/CSS mở rộng của Dirk Jesse cung cấp rất nhiều khuôn mẫu mặc định cho một số dự án web đơn giản hoặc phức tạp hơn. YAML dựa trên các tiêu chuẩn web và hỗ trợ mọi trình duyệt web hiện đại. Tất cả các lỗi render lớn của Internet Explorer đều được ngăn chặn. YAML hỗ trợ đầy đủ tất cả các phiên bản IE, từ 5.x/Win cho tới 7.0.

Bên cạnh một số layout tiêu chuẩn, framework này cũng cung cấp một stylesheet gỡ rối, stylesheet in những như nhiều công cụ mạnh khác để phát triển web trong YAML. Tất cả các yếu tố CSS của framework này cũng như các phương pháp layout đều được lưu trữ kĩ lưỡng thoroughly documentedtrong cả tiếng Anh và tiếng Đức, được bổ sung thêm rất nhiều ví dụ.

Bạn cũng có thể dùng một trình tạo YAML Builder để phát triển layout về hình ảnh trong trình duyệt web của mình. Bạn có thể chọn một Doctype, những yếu tố layout cơ bản (#header, #footer, …), các cột nội dung cũng như sắp xếp các cột theo ý thích và đặt độ rộng layout và cột. Bạn cũng có thể kéo và thả, xếp chồng các khuôn mẫu phụ và nội dung giả, hiển thị và đưa ra mã hoàn chỉnh (XTHML markup và CSS) và chuyển đổi giữa chế độ nháp và duyệt trước layout hoàn chỉnh.

Blueprint

Blueprint css framework

blueprint css framework

Framework CSS Blueprint, được tạo bởi một sinh viên công nghệ người Na uy, Olav Frihagen Bjørkøy. Đây là một nền tảng rấthứa hẹn cho việc phát triển các khung lưới tạo kiểu chữ bằng CSS. Framework này cung cấp một khung lưới có thể tuỳ biến dễ dàng, một đường cơ sở tạo kiểu chữ và một stylesheet để in. Nó cũng sử dụng các cỡ, phông chữ liên quan, cung cấp một CSS reset và tránh khỏi các code bloat It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. Về cái cuối cùng thì không phải lúc nào cũng đúng isn’t always true .

Ngoài ra, bạn cũng có thể dùng Blueprint Grid CSS Generator để tạo ra những phiên bản khuôn mẫu Blueprint linh hoạt hơn. Với tính linh hoạt của Blueprint CSS Framework, bạn có thể để 8, 10,16 hay 24 cột trong thiết kế – một thứ đang trở thành tiêu chuẩn trong phương pháp thiết kế dựa trên khung lưới.

Yahoo! UI Library CSS Foundation
Yahoo! UI Library đưa ra một bộ framework CSS: nền tảng cốt lõi của YUI CSS bao gồm: Reset CSS , Base CSS , Fonts CSS , và gói Grids CSS .

Trong khi Reset CSS loại bỏ và trung hoà các cách tạo yếu tố HTML mặc định không nhất quán, thì Base CSS ứng dụng nền tảng tạo kiểu nhất quán cho các yếu tố HTML thông thường qua các trình duyệt loại A.

Fonts CSS giúp bình thường hoá và kiểm soát tạo kiểu chữ qua nhiều trình duyệt; framework này cung cấp độ cao đường và kích cỡ phông chữ nhất quán, hỗ trợ cho người dùng điều chỉnh cỡ chữ trong trình duyệt. Có thể hoạt động trên cả chế độ Quirks và chế độ Standard.

Grids CSS cung cấp bốn độ rộng trang định sẵn, sáu khuôn mẫu định sẵn và cho phép xếp chồng các vùng được chia nhỏ gồm 2,3, hay 4 cột. Một file 4kb chứa hơn 1000 layout trang. Framework này hỗ trợ tuỳ chỉnh dễ dàng độ rộng của các layout, hỗ trợ các layout hay thay đổi độ rộng cũng như các layout với độ rộng đã được định sẵn 750px, 950px, và 974px. Nó cũng cho phép tuỳ chỉnh dễ dàng tới bất cứ kích cỡ nào. YUI còn cung cấp — một giao diện đơn giản dành cho việc tuỳ chỉnh các đường kẻ ô.

Bạn cần nhận thức được rằng những framework này thường bị chỉ trích are often criticized vì bloating mã bằng markup không có ngữ nghĩa và tạo ra quá nhiều lớp không cần thiết, ID, div-container trong CSS. Thư viện Yahoo! UI còn cung cấp một tài liệu chi tiết với nhiều ví dụ, hướng dẫn, các khuôn mẫu và công cụ. CSS Global Reset (CSS Baseline)

      • Global Reset được dùng để đảm bảo các trang web của bạn dù được thực hiện bằng các trình duyệt mặc định khác nhau, sử dụng các giá trị lề, đệm và độ cao của đường khác nhau nhưng vẫn được trình bày giống hệt nhau. Global Reset đảm bảo rằng tất cả (hoặc có thể là phần lớn) các trình duyệt render các trang giống hệt nhau.
      • * { lề: 0; đệm: 0; } là một thực hành cực tồi.

“Thật không may, đây không phải là một thực hành tốt. Nó khiến cho tác nhân reder rất khó áp dụng các nguyên tắc vào mỗi yếu tố đơn lẻ trong tài liệu, đặc biệt là khi bạn muốn có các button submit được tạo kiểu mặc định. [Các kĩ thuật CSS tôi luôn dùng viết bởi Christian Montoya]

  • Tripoli
    Tripoli là một chuẩn CSS chung cho việc render HTML. Bằng cách cài đặt và xây dựng lại các chuẩn trình duyệt, Tripoli thiết lập một nền tảng render nhiều trình duyệt ổn định cho các dự án web. Một bộ các file CSS mặc định cho bạn một nền tảng sâu sắc về các thiết kế dựa trên CSS tương thích đa trình duyệt. Tất cả các giá trị mặc định- bao gồm hàng tá các yêu tố bảng, danh sách, kiểu chữ, cũng như các tiêu đề (h1-h6), chữ viết tắt, trích dẫn… được lựa chọn để sao cho dễ đọc nhất và có cấu trúc tốt nhất.

tripoli

Một bộ các kiểu “reset” và “đường cơ sở”, không dựa trên bộ lọc phổ biến. Như Meyer nói, “các kiểu nên liệt kê ra tất cả các yếu tố thực tế để reset”.

File YUI Reset CSS loại bỏ và trung hoà các cách tạo yếu tố HTML mặc định không nhất quán, tạo ra một trường file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field qua các trình duyệt loại A và cung cấp một nền tảng vững chắc mà trên đó bạn có thể công bố mục đích của mình.

Một reset CSS đơn giản với vài lớp thêm vào để gỡ lỗi tốt hơn.

“ Sẽ tốt hơn nhiều khi có một danh sách hoàn chỉnh về các cài đặt mặc định để áp dụng từ bước đầu, nhằm vào sự không nhất quán It’s far better to have a complete list of default settings to apply from the beginning that targets the specific browser inconsistencies.”

Stylesheet mặc định này quan tâm tới một vài nguyên tắc tạo kiểu chữ như khoảng cách giữa các đuôi tiêu đề, các đoạn và các yếu tố trích dẫn.

CSS: Tạo kiểu cơ bản

“Đơn vị cơ bản của khoảng dọc và chiều cao của các đường. Đặt một đường cao thích hợp, có thể ứng dụng cho tất cả các văn bản trong trang là chìa khoá cho chuỗi dọc chắc chắn. Nhờ vậy, có thể thu hút và dẫn người đọc đi vào trang web.”

Có thể chia các stylesheet ra thành các yếu tố có thể sử dụng lại trong các dự án khác. Bước tiếp theo là mở rộng nó thành một framework CSS, cho phép phát triển các trang một cách nhanh chóng bằng các yếu tố đã được soạn và kiểm tra trước. Và tất cả những gì cần thiết để làm được điều này là một thoả thuận đặt tên và một khuôn mẫu cơ bản linh hoạt…

Phát triển các framework CSS của riêng bạn! Hãy để các framework CSS của bạn càng trừu tượng, mơ hồ càng tốt. Thông thường các kiểu reset chung và các nguyên tắc định dạng cơ bản là một thoả thuận vững chắc, cho bạn một điểm bắt đầu và sẽ không giới hạn bạn trong một cấu trúc cứng nhắc của framework.

Phát triển các kiểu mặc định của riêng bạn, hạn chế số lớp, ID và yếu tố html đến mức tối thiểu, luôn nhận thức được tầm quan trong của ý nghĩa ngữ nghĩa của các lớp.

Nguồn Từ : http://www.123clicksite.com

Comments

comments

Share this Post :

No comments yet.

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *