Khi nào tôi nên sử dụng khung CSS?


11

Các kịch bản thực hành tốt nhất để sử dụng khung CSS là gì? Khi nào thì tốt hơn là "cuộn" CSS của riêng bạn từ đầu thay vì sử dụng các khung công tác?

Câu trả lời:


11

Các khung CSS hơi phức tạp vì tôi không thực sự là các khung công tác. Chúng chỉ đơn giản là các lớp được xác định trước. Nhưng, đây không phải là câu hỏi của bạn.

Các khung CSS rất tốt cho các mô hình giả và khung dây. Tôi không khuyên bạn nên sử dụng chúng trên một trang web trực tiếp vì họ thêm các lớp vô nghĩa vào đánh dấu của bạn. ".Sspan3" không cho tôi biết bất cứ điều gì về nội dung, chỉ có thiết kế.

Tuy nhiên, kế hoạch chi tiết có một số công cụ tuyệt vời giúp bạn kết hợp các lớp khung của nó và các ngữ nghĩa của bạn sau khi bạn hoàn thành.

Tôi luôn cuộn CSS của riêng mình.


4
Tôi với Thorn007 về điều này. CSS khá đơn giản khi bạn truy cập vào nó. Chỉ cần sử dụng một thiết lập lại CSS tốt và cuộn của riêng bạn.
jliegavin

3

Chỉ cần tránh chúng, chúng chẳng có gì ngoài phiền phức.

Đặc biệt là cái này

* { margin:0; padding:0; }

Khiếu nại lớn nhất của tôi là nếu bạn kế thừa / duy trì trang web sử dụng thiết lập lại và / hoặc khung, bạn phải tìm hiểu khung đó trước khi có thể sửa đổi trang web.

Khi tôi thêm một thẻ h1, tôi mong đợi những điều nhất định. Hầu hết các thiết lập lại lấy đi tất cả các phần đệm, lề, khối, v.v ... để thẻ h1 không còn hoạt động như bình thường. Vì vậy, tôi phải quay lại và thêm mọi thứ đã có ở nơi đầu tiên.

Nói chung (theo kinh nghiệm của tôi) những người không hiểu css sử dụng các bộ và khung, và nó gây ra nhiều việc hơn cho những người làm.


1
Eric Meyer và các nhà phát triển web tại Yahoo hiểu CSS và họ sử dụng các bộ CSS. Theo kinh nghiệm của tôi, họ tiết kiệm rất nhiều thời gian và đau đầu khi cố gắng đạt được sự thống nhất giữa các trình duyệt. - Khung CSS là khập khiễng.
jliegavin

Khi tôi thêm thẻ h1, tôi mong đợi một số thứ nhất định .. thật không may, bạn cần phải mong đợi những thứ khác nhau từ mỗi trình duyệt .. và do đó, cần phải thiết lập lại css ( không phải khung )
Gabriele Petrioli

h1 là một ví dụ khá tệ, bởi vì các trình duyệt có xu hướng sử dụng các lề khác nhau, v.v. Cá nhân tôi thích "thiết lập" để đặt lại - tức là thay vì đặt lại mọi thứ về 0, chỉ cần đặt nó trong biểu định kiểu của riêng bạn ở vị trí đầu tiên!
Không hài lòngGoat

* {margin:0; padding:0;}là thiết lập lại CSS quan trọng nhất trong tất cả. Nó xóa margin-top/maring-bottomdưới tất cả các thẻ ngay cả các pthẻ vì vậy sau khi bạn sẽ không thấy một khoảng trống lớn giữa mỗi dòng. Ngay cả trang web này có thể đang sử dụng p {margin:0;}nếu không trình duyệt sẽ sống một khoảng trống lớn giữa mỗi dòng. Tôi đang tự hỏi làm thế nào bạn có thể nói họ đang gây phiền nhiễu.
Marco Demaio

2

Theo ý kiến ​​của tôi, dịch vụ duy nhất mà CSS Framework cung cấp là điểm khởi đầu cho những người không rành về CSS.


2

Tôi cũng khuyên bạn nên sử dụng reset.css từ Eric Meyer, nhưng tôi nghĩ rằng các "khung" CSS có thể có ích cho bố cục. Blueprint, lưới YUI và lưới 960 có thể giúp bạn đạt được một số bố cục rất phức tạp mà không cần tự viết css.

Mặc dù có những nhược điểm đã được đề cập, có thể nói tương tự về việc xây dựng một trang web từ một CMS thay vì sử dụng mã tùy chỉnh, nhưng chúng vẫn có thể hữu ích và đối với nhiều trang web, lợi ích đạt được vượt trội hơn bất kỳ vấn đề css hoặc hiệu suất ngoại lai nào.


1

Nếu bạn thực sự đang thực hiện một thiết kế của riêng bạn, bạn sẽ viết một số CSS của riêng bạn (trừ khi có người khác viết ra thiết kế chính xác mà bạn muốn).

Giả sử bạn đang viết một số CSS của riêng mình, các khung khung hình có thể hữu ích khi bạn có các kiểu:

  1. được sử dụng ở nhiều nơi; và
  2. đủ phức tạp để tách ra thành lớp học của riêng họ

Đối với các kiểu thực sự đơn giản, tốt hơn là sử dụng các lớp để chỉ ra cái gì đó (ví dụ class="navigation"), và sau đó xác định giao diện của nó bằng cách áp dụng các quy tắc kiểu cho lớp đó trong biểu định kiểu của bạn.

Nhưng đối với các kiểu phức tạp hơn mà không nhất thiết phải gắn với bất kỳ một yếu tố nào (ví dụ: các kiểu liên quan đến bố cục, kiểu mà khung đặt tên như vậy .span3), không có gì sai khi đặt chúng vào một lớp và áp dụng lớp đó vào CSS. Bạn có thể sử dụng cả hai cách tiếp cận với nhau.

Trong các trang web lớn hơn, phức tạp hơn, nơi các yếu tố có khả năng được kết hợp theo những cách không thể đoán trước, một cách tiếp cận giống như khung có thể thực sự giúp giữ cho mã của bạn có thể quản lý được.

Tuy nhiên, tôi có thể nói rằng bạn cũng có thể viết khuôn khổ của bạn. Tôi đặt các trích dẫn trong khuôn khổ, vì CSS thực sự không phải là ngôn ngữ lớn. Bạn có thể đọc CSS: The Definitive Guide (Eric Meyer) trong một ngày, sau đó đọc tất cả mã trong ví dụ Blueprint (một CSS CSS framework framework) và hiểu khá rõ những gì đang diễn ra. Bạn có thể cần nghiên cứu cách giải quyết của IE một chút, nhưng chúng ta đang nói ít nhất là một mức độ phức tạp ít phức tạp hơn so với jQuery ở đây.


1

Tôi sử dụng bản thiết kế, cho CSS.
CSS, như mọi người ở trên nói, thực sự đơn giản.

Tuy nhiên, trong thực tế, bạn phải xem xét nền tảng.

Với CSS, công cụ kết xuất sẽ tăng thêm độ phức tạp.

Gecko vs WebKit vs Presto vs Trident ... ai muốn làm tất cả những thứ đó?

Điều mà một 'khung' mang lại cho bạn ở đây, là khả năng viết bố cục rất có thể sẽ hoạt động trên tất cả các trình duyệt, do đó bạn sẽ không phải loay hoay với 'quirksmode' WTF-am-I-doing = -this-crap 'IE 7 sửa chữa, hoặc một cái gì đó tương tự lố bịch.

Các khung sẽ thực hiện 90% bố cục mà bạn muốn và sau đó bạn luôn có thể thêm vào các kiểu của riêng mình sau này.

Vì vậy, để trả lời câu hỏi, tôi muốn chọn bất kỳ khung nào và xem nó có phù hợp với bạn không. Nó chỉ có thể. Sau đó, bạn là vàng, và có thể trở lại bất cứ điều gì bạn thực sự muốn làm. Nếu không, sau đó mở rộng nó, sử dụng css và thay đổi những gì không hoạt động. Bằng cách đó bạn duy trì lợi ích trình duyệt chéo, nhưng vẫn có thể tùy chỉnh.

Như một lợi ích nhỏ, nếu bạn chọn một và sử dụng nó mọi lúc, sau đó bị ốm, hoặc được thăng chức và phải đào tạo người kế nhiệm, bạn có thể nói:

"Vâng, tôi đã sử dụng khung ABC. Tài liệu ở đây. Mã ở đó. Đào tạo xong. Chúc may mắn."


0

Khi nó giải quyết tất cả các nhu cầu của bạn . (Điều này dựa trên ý tưởng may đo .)

Từ cuốn sách duy nhất về khung? http://www.oreilly.com/web-pl platform / free / book-of-html-css-frameworks.csp . (Chỉ liên kết vì nó miễn phí và có liên quan ở đây.)


Nó có thể là tốt nhất nếu bạn có thể cắt và dán các phần có liên quan của trang bạn liên kết đến. Mặt khác, như một câu trả lời, đây là loại ánh sáng. Liên kết chỉ trả lời được khuyến khích ở đây vì liên kết thường bị phá vỡ theo thời gian. Bạn có thể cập nhật câu trả lời này để giúp OP và người dùng trong tương lai với thứ gì đó mà họ có thể chìm vào răng không ?? Cảm ơn trước!
Closnoc
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.