Đọc trên một diễn đàn khác, tôi đã xem qua thế giới của CSS Framework. Cái mà tôi đang xem xét cụ thể là BluePrint . Tôi đã tự hỏi liệu có ai khác đã xem qua các khung CSS, hãy đề xuất cái nào là tốt nhất và chúng có đáng để nỗ lực không?
Đọc trên một diễn đàn khác, tôi đã xem qua thế giới của CSS Framework. Cái mà tôi đang xem xét cụ thể là BluePrint . Tôi đã tự hỏi liệu có ai khác đã xem qua các khung CSS, hãy đề xuất cái nào là tốt nhất và chúng có đáng để nỗ lực không?
Câu trả lời:
Các 'khuôn khổ' CSS hoàn toàn thiếu điểm.
CSS không giống như JavaScript, nơi bạn có thể bao gồm một thư viện / khuôn khổ cơ sở và sau đó gọi các hàm và đối tượng từ nó để thực hiện công việc cấp cao hơn. Tất cả những gì mà khung công tác CSS có thể cung cấp cho bạn là các quy tắc khai báo: một số thứ mặc định-đặt lại quy tắc trình duyệt, một số kiểu lớp bắt buộc phải tạo tác giả cho trang của bạn và các quy tắc bố cục sử dụng 'float' và 'clear'. Bạn có thể tự mình viết điều đó trong một vài dòng CSS thay vì kéo theo hàng trăm quy tắc khung.
Cụ thể, nội dung 'bố cục lưới' quay trở lại những ngày xưa tồi tệ khi trộn bản trình bày của bạn vào phần đánh dấu của bạn. 'div class = "span-24"' không tốt hơn một bảng, bạn sẽ phải quay lại đó và thay đổi đánh dấu để ảnh hưởng đến bố cục. Và tất cả các khuôn khổ mà tôi đã thấy đều dựa trên các hộp nổi pixel cố định, khiến không thể tạo bố cục lỏng có thể truy cập được trên nhiều kích thước cửa sổ.
Nó là tác giả ngược, chỉ sử dụng cho những người quá sợ hãi khi viết quy tắc CSS.
Vì vậy, chưa ai trả lời câu hỏi này (mặc dù tôi đã thấy một vài lượt ủng hộ), vì vậy Tôi sẽ cố gắng ít nhất để giải quyết câu hỏi thứ hai trong lời nhắc này.
Khung CSS rất tuyệt vời; giống như bất kỳ khung công tác nào khác, chúng giảm thời gian phát triển và cho phép bạn làm việc ngay lập tức trên thiết kế và CSS dành riêng cho trang web. Họ nghĩ về những quyết định khó khăn để bạn không cần phải làm như vậy.
Thật không may, có hai nhược điểm khi sử dụng một khuôn khổ (nói chung):
Khung quy định cấu trúc và cơ chế tổng thể của mã CSS của bạn. Bây giờ, tôi không nói về việc thiết lập lại CSS (chúng hữu ích theo đúng nghĩa của chúng, nhưng chúng không phải là khuôn khổ thực sự); Tôi đang nói về một khuôn khổ trung thực đến tốt, đã đưa ra quyết định về những thẻ ngữ nghĩa bạn sẽ sử dụng trong tài liệu của mình, v.v. Như vậy, bạn bị phụ thuộc vào khuôn khổ và khi có lỗi trong khuôn khổ, hầu hết bạn sẽ phải tự sửa chữa nó.
Các khung công tác không phải là cái cớ để bạn không biết đến các vấn đề CSS nâng cao / trình duyệt chéo. Bạn sẽ luôn gặp phải chúng, giống như bạn làm việc với PHP hoặc JavaScript framework. Và bạn cần biết cách đối phó với chúng. Có một câu nói phổ biến rằng bạn nên viết khuôn khổ của riêng mình trước khi sử dụng của người khác.
Xem qua Blueprint, tôi sẽ không thực sự gọi nó là một khuôn khổ; có thể là một thiết lập lại với một vài tính năng bổ sung ở trên.
Tôi đã xem xét BluePrint và một số người khác và 'khuôn khổ' CSS duy nhất mà tôi muốn giới thiệu là YUI Grids
Ưu điểm:
Nhược điểm:
Như những người khác đã đăng, không có 'khuôn khổ' thực sự nào cho CSS. Đặt lại bảng định kiểu cũng giúp ích rất nhiều cho bố cục. Tôi thường gắn bó với một biểu định kiểu đặt lại và bắt đầu từ đó. Nhưng nếu bạn không có nhiều kinh nghiệm CSS, YUI Grids có thể giúp bạn tiết kiệm thời gian.
Hãy dành thời gian để nghiên cứu và hiểu (thực sự hiểu!) Một vài framework css như BluePrint và YUI, và cài đặt lại css như của Eric Meyer. Sau đó, dành thời gian để đặt lại và / hoặc khuôn khổ của riêng bạn dựa trên phương pháp làm việc của bạn và loại trang web bạn xây dựng.
Cá nhân tôi sử dụng hầu hết các thiết lập lại Eric Meyer với một số lớp và thiết lập lại của riêng tôi, cộng với một vài ý tưởng từ BluePrint và YUI.
Gần đây tôi đã xem Eric Meyer thuyết trình về CSS Framework, trong đó anh ấy đã đặt câu hỏi: "vậy cái nào phù hợp với tôi?" Sau đó anh ta trả lời câu hỏi bằng cách hiển thị một slide trống. Quan điểm của anh ấy là, chắc chắn có một số khái niệm hữu ích được tích hợp trong hầu hết các cài đặt lại và khung công tác, nhưng khái niệm phù hợp với bạn nhất là khái niệm bạn viết cho chính mình (rất đáng để nỗ lực).
Tại sao sử dụng 'framework' css?
Nếu bạn bị áp lực về thời gian.
Nếu bạn không biết css, và không biết ai đó có thể viết nó cho bạn.
Nếu bạn không quá quý về tiêu chuẩn v.v.
Tôi biết các lập trình viên đã thực sự hài lòng khi sử dụng blueprint hoặc 960, vì nó cho phép họ tự ghép bố cục lại với nhau mà không cần chuyển sang nhà phát triển front-end. Điều này lý tưởng cho các dự án cá nhân, hoặc các công ty khởi nghiệp với nguồn lực hạn chế.
Nếu bạn đã có kiến thức tốt về CSS, thì có lẽ bạn đã có một thư viện bố cục cổ phiếu phong phú rồi, vì vậy rõ ràng bạn sẽ không cần một khuôn khổ.
Tuy nhiên, nếu bạn là người mới bắt đầu và chỉ cần thiết lập và chạy một cái gì đó, thì bạn có thể chuyển sang một khuôn khổ, vì nó làm cho bố cục cơ bản đơn giản hơn nhiều và giải quyết khả năng tương thích của trình duyệt.
Đã nói tất cả những điều đó, nhiều khung công tác sử dụng một số tên lớp khủng khiếp, v.v. Tôi biết một số trang web đã lấy khung làm điểm bắt đầu và sau đó tùy chỉnh nó bằng các thẻ lớp và id của riêng họ. Nhưng rõ ràng là có một chút công việc liên quan đến việc viết lại đó. Sử dụng một cái gì đó như La bàn, như đã đề cập ở trên, sẽ giúp giải quyết vấn đề đó.
Vì vậy, các khung công tác CSS - chúng có thể giúp bạn tiết kiệm thời gian, với chi phí về ngữ nghĩa. Chúng cũng có thể làm ảnh hưởng đến kiến thức của bạn về CSS, nhưng điều đó phụ thuộc nhiều hơn vào số tiền bạn đầu tư vào việc học chủ đề này nói chung. Bạn có sử dụng chúng hay không là tùy thuộc vào bạn.
Bạn sẽ phải tự hỏi bản thân xem hiệu quả của các khuôn khổ có sẵn trong việc giải quyết các vấn đề của bạn. Họ có đáp ứng yêu cầu của bạn không?
Bằng cách sử dụng khuôn khổ, bạn có thể đặt một số quy tắc hoặc chi tiết ở cấp pixel và dành toàn bộ thời gian còn lại của mình để triển khai và sản xuất. Đó là một sự thúc đẩy năng suất lớn. Nếu bạn thấy mình dành thời gian để điều chỉnh mọi thứ chậm vài pixel trong dự án (quản lý vi mô thiết kế), đó là một dấu hiệu cho thấy một khuôn khổ có thể hữu ích.
Mẹo # 17 trong Lập trình thực dụng nói: "Chương trình gần với miền vấn đề". Sử dụng một lớp trừu tượng có thể giúp bạn tiến gần hơn đến việc giải quyết các vấn đề thực sự của bố cục. Ví dụ: bạn có thể tập trung nâng cao trải nghiệm người dùng với thời gian thêm mà bạn có hơn là những điều chỉnh nhỏ về pixel.
Điều này không có nghĩa là bạn phải hy sinh chất lượng cho số lượng. Đó là về hiệu quả.
Trong một dự án gần đây, tôi đã tạo khuôn khổ của riêng mình vì chúng tôi có nguồn lực rất hạn chế và các khuôn khổ phổ biến không làm được những gì tôi muốn. Sau đó, tôi thiết lập PSD của nhóm thiết kế để gắn vào cùng một lưới mà tôi đã triển khai.
Một khuôn khổ không nhất thiết phải là bất kỳ triển khai CSS cụ thể nào. Nó không phải là thứ gì đó cồng kềnh mà bạn đã tải xuống từ interweb hoặc thứ gì đó thực hiện những ý tưởng lỗi thời. Nó chỉ là một kỹ thuật để hoàn thành công việc. Tôi sẽ không ngạc nhiên nếu một số lập trình viên đã có khuôn khổ riêng của họ và thậm chí không biết về nó. Trên thực tế, nếu bạn coi DOM như một tập hợp các phần tử mặc định mà bạn mở rộng bằng CSS, thì đó là một khuôn khổ theo định nghĩa.
Tôi thực sự đã dành một phần lớn thời gian trong 24 giờ qua để tự mình điều tra vấn đề này, heh. Kết luận của tôi là một thiết lập lại tốt đẹp (tôi đã sử dụng YUI Reset ) và có thể một cái gì đó khác để thiết lập nội dung cơ bản ( phông chữ YUI đáng giá trong trường hợp của tôi; có thể "tính năng bổ sung" của BluePrint sẽ là của bạn) là một ý tưởng hay. Tuy nhiên, một "khuôn khổ" --- thường là một cái gì đó giống như lưới YUI --- quá hạn chế, buộc bạn phải sử dụng tên lớp, id, v.v. của chúng và hiếm khi phù hợp với trang web của bạn như CSS làm bằng tay.
Tóm lại: việc đặt lại có vẻ khá tốt; thật tốt để loại bỏ tất cả các biến thể trong ví dụ như margin-vs-padding cho danh sách hoặc khoảng cách đoạn văn, hoặc bất cứ điều gì. Nhưng đó là chừng mực tôi sẽ làm.
Tôi đã không sử dụng nó có, nhưng tôi nghĩ rằng emastic có thể là một thay thế tốt đáng để kiểm tra. nó tương tự như bản thiết kế trong phạm vi, nhưng cũng hỗ trợ bố cục co giãn (do đó có tên) và bạn có thể chỉ định các giá trị bằng px, em hoặc%, và thậm chí trộn chúng.
La bàn tôi nghĩ là tuyệt vời. Đảm bảo rằng bạn nhìn thấy hình ảnh trên màn hình .
Tôi đang sử dụng 960.gs cho một số trang web và thấy nó rất đơn giản, dễ dàng và đáng để nỗ lực. Tiết kiệm cho tôi rất nhiều công việc về bố cục. Đảm bảo kiểm tra trình tạo CSS tùy chỉnh có chiều rộng cố định là 960 pixel.
Tôi nghĩ rằng video trình bày này của Giám đốc điều hành Site Point Kevin Yank sẽ trả lời câu hỏi của bạn. Tôi thực sự khuyên bạn nên xem nó.
La bàn cho phép bạn đổi tên các lớp và id của khung công tác bằng tên ngữ nghĩa của riêng bạn, vì vậy bạn có thể muốn kiểm tra nó. Nó cũng cung cấp quyền truy cập vào những thứ bạn không nhận được với CSS đơn giản như mixin.
Tôi rất ngạc nhiên bởi những người được gọi là "chuyên gia CSS", những người chỉ trích những công cụ này mà không thực sự tìm hiểu và sử dụng chúng. Chúng có thiết yếu không? Không. Nếu bạn thích khung công tác của riêng mình (bạn có một khung công tác của riêng mình, đúng không? Khung công tác CSS chỉ là một thư viện được xác định cẩn thận - mọi người nên sử dụng một khung này) thì bằng mọi cách, hãy tiếp tục sử dụng nó. Không ai ép buộc bạn sử dụng các khung công tác khác và tôi không thấy những người đang sử dụng các khung công tác nói với những người theo chủ nghĩa thuần túy CSS rằng họ đang "làm sai".
Chỉ trích các khuôn khổ từ quan điểm như vậy chỉ cho thấy một sự bất an cũng như một sự thiếu hiểu biết. Ví dụ, khái niệm buồn cười rằng một người sẽ sử dụng một công cụ như La bàn mà không biết CSS. Bạn nhận ra rằng, một khung công tác thường không viết tất cả CSS cho bạn? Bạn vẫn có thể đột phá và viết CSS của riêng mình trong ngữ cảnh của hầu hết các khuôn khổ. Trên thực tế, nếu bạn không biết CSS, bạn có thể nhanh chóng thất vọng.
Đối với bản thân tôi, tôi đánh giá cao việc có một khung công tác vì nó đã được ghi lại, được kiểm tra bởi hàng trăm người dùng khác và tôi có thể áp dụng các lớp và id của riêng mình thông qua La bàn. Nếu tôi cần thứ gì đó mà khung công tác không phù hợp, thì tôi sẽ viết mã của riêng mình.
Matt Raible của AppFuse nổi tiếng đã có một cuộc thi CSS Framework một thời gian trở lại để phát triển CSS Framework cho AppFuse. Kết quả được công bố tại đây . Có một vài biến thể và bản thân tôi đã sử dụng một số vì tôi sử dụng AppFuse và thấy chúng rất tốt.
Tôi nên nói thêm rằng các Khung CSS này hoạt động tốt vì chúng được sử dụng trong các ứng dụng theo chủ đề. Nghĩa là, nếu bạn tuân thủ các quy tắc thì việc chuyển đổi từ quy tắc này sang quy tắc tiếp theo đơn giản như thay đổi một giá trị trong tệp thuộc tính.
Tôi đã sử dụng BluePrint với nhiều thành công trên một trang web (Tôi có thể đề cập đến trang web ở đây nhưng tôi chắc chắn bài đăng sẽ bị đánh dấu là spam!). Tôi không chắc liệu mình có sử dụng nó trong tương lai hay không vì một trong những ý tưởng của CSS mà tôi nghĩ là không có mã hóa logic bố cục. Bạn không nên có các phần tử css được gọi là span-24 và span-12 để xác định bố cục nhưng một cái gì đó như searchBox và mainContent. Ít nhất đó là cách tôi nhìn thấy nó.
Liên kết tốt mà tôi đã tìm thấy: 12 Khung CSS hàng đầu và Cách hiểu Chúng
Đây là bài đăng trên blog của tôi về CSS Framework Khi nào sử dụng CSS framework?
Cách duy nhất tôi biết để sử dụng khung CSS và giữ lại đánh dấu ngữ nghĩa là sử dụng phần trừu tượng cấp cao hơn. Hiện tại, La bàn là thiết bị duy nhất mà tôi biết là đủ trưởng thành để sử dụng, nhưng Nicole Sullivan dường như đang thực hiện một số điều thú vị với dự án "CSS hướng đối tượng" của mình.
Tôi thấy việc sử dụng hỗn hợp Sass một cách thông minh của La bàn là rất xuất sắc và là một bước tiến lớn đối với Chén thánh về đánh dấu ngữ nghĩa có thể bảo trì. Tôi không nghĩ rằng tôi muốn sử dụng một khuôn khổ như Blueprint hoặc YUI mà không có một phần trừu tượng như La bàn để giữ cho các lớp trình bày không bị đánh dấu.
BTW, có một khung CSS đẹp mắt tên là Elastic, trông đủ đẹp để tôi đang xem xét thêm nó vào La bàn.
Tôi tin rằng CSS là về sự đơn giản. Mục tiêu là có một hoặc hai nơi để kiểm tra khi bạn đang tham chiếu giữa HTML và biểu định kiểu của mình. Thêm nhiều dòng, và đặc biệt là những dòng mà bạn không viết và có lẽ không quen thuộc, sẽ làm tăng độ phức tạp theo cấp số nhân, do đó sự biến động của mã CSS.
Tôi sẽ đề xuất các bố cục của bạn khi bạn viết chúng và phát triển một hệ thống mẫu chung từ đó. Mặc dù tôi thích làm cho CSS nhiều mô-đun hơn, thường xuyên và tùy thuộc vào thiết kế, CSS của bạn có thể rất cụ thể và không mô-đun chút nào.
Tôi đã sử dụng Blueprint trên một số trang web một lần và nó chắc chắn tiết kiệm thời gian, chủ yếu trong thử nghiệm trên nhiều trình duyệt.
Nó chắc chắn tệ hơn khi thêm mã trình bày vào đánh dấu của bạn, mặc dù về mặt sáng sủa, nó có thể đọc được. Mặc dù tôi yêu thích khái niệm "bạn có thể thiết kế lại mà không cần chạm vào đánh dấu", nhưng nếu bạn đang sản xuất một trang web mà điều đó thực sự sẽ không xảy ra và bạn chỉ cần hoàn thành nó vào ngày hôm qua, thì Blueprint là thứ cần xem xét.
Mặc dù vậy, cũng có sự cân bằng trong những loại bố cục mà nó có thể tạo ra. Nếu bạn lập khung trang web ngay từ đầu trên một mạng lưới nghiêm ngặt, sẽ dễ dàng hơn nhiều để chuyển sang khuôn khổ mà ít phiền phức nhất.
Tôi đã sử dụng BluePrint và YUI nhưng tôi luôn cảm thấy thất vọng với một số tên mà họ đặt id và lớp của họ.
Đối với mỗi người của họ, nhưng tôi thích làm mọi thứ từ đầu, nhưng sau một thời gian, bạn phát triển một quy trình trong đó bạn sẽ sử dụng công việc trước đây của mình và áp dụng nó cho các dự án mới và chỉ cần thực hiện một số chỉnh sửa để làm cho trang web trông giống như bạn muốn thích nó.
Hãy chắc chắn sử dụng quy ước đặt tên tốt, đề phòng trường hợp có người khác đến chỉnh sửa css, thì họ sẽ biết rõ mỗi tên kiểu đang đề cập đến điều gì.
Craig,
La bàn là thứ bạn đang tìm kiếm: nó cho phép bạn đổi tên các lớp CSS Blueprint của mình như "span-24" bằng chính tên của bạn. Nó cũng mở rộng chức năng CSS với các biến và mixin. Thực sự, những người đánh giá quá sớm các khuôn khổ mà không kiểm tra La bàn là "thiếu điểm". Nó giống như những người đã nói với chúng tôi nhiều năm trước rằng chúng tôi đang thiếu điểm khi sử dụng CSS thay vì bảng HTML cho bố cục của chúng tôi.
-Matt
kiểm tra http://www.ez-css.org/ . một trong những framework css dễ nhất và nhẹ nhất để làm việc. :)
Hãy xem bản demo này: http://www.richstyle.org/demo-web.php Khung công tác này dựa trên ý tưởng rằng "thẻ HTML phải là đủ". Tôi nghĩ rằng khả năng tái sử dụng là yếu tố quan trọng nhất để chọn một thành phần phần mềm, bao gồm cả khung web. Đối với các nhà phát triển khuôn khổ web, bạn càng cam kết với các tiêu chuẩn, bạn càng đảm bảo khả năng tái sử dụng.