Khung CSS dựa trên SMACSS

Question

Khung SMACSS giới thiệu một cách nhất quán để quản lý mã CSS của bạn để nó có thể tái sử dụng và bảo trì được, nhưng đó là hướng dẫn về cách tổ chức CSS của bạn chứ không phải là khung thực tế. Sẽ tốt hơn nếu có bất kỳ khung công tác nào khác dựa trên triết lý của nó, nhưng tôi đã không gặp bất kỳ điều gì.

Có ai biết về bất kỳ khung CSS nào dựa trên phương thức tổ chức SMACSS của mã CSS không?

Answer 1

Pure là một khung CSS mới hơn dựa trên SMACSS. Nó dường như liên quan đến dự án YUI.

Từ extend page của họ ...

Dựa trên SMACSS

tinh khiết được chia thành một tập hợp các module đáp ứng. Ngay từ đầu, chúng tôi đã thông qua SMACSS như một quy ước để viết CSS của chúng tôi. Đối với những người mới sử dụng SMACSS, bạn nên đọc nhanh, đặc biệt là phần về các quy tắc của mô-đun.

Answer 2

Vì không có câu trả lời nào đang bay ra khỏi báo chí, tôi tò mò và nhìn quanh.

Nó chỉ ra có quite a few, and I see you have been at this for a while now.

I see others recommended LESS or SASS và tôi sẽ thêm có các giải pháp như La bàn và Susy. Đây chỉ đơn giản là những điều cần xem xét khi chúng từng có các mô hình tổ chức vốn có.

Nhưng đây là câu trả lời thực tế của tôi.

Tôi có một nỗ lực tương tự trong việc tìm kiếm các khung CSS tổ chức các giải pháp kết quả của Thiết kế web đáp ứng, thành thực tiễn tốt nhất, quy ước đặt tên và các mẫu khác. So here is what I was looking at, với câu hỏi mở kết thúc tương đương, ở điểm chết.

Tôi cho rằng có lẽ vấn đề có thể là, tổ chức CSS phụ thuộc nhiều vào môi trường và ngữ cảnh. So, maybe design patterns is a good approach.

Vì vậy, đây là giải pháp của tôi và tôi sẽ đề nghị nó ở đây -> Tôi thực sự thích ý kiến ​​của bạn về tách css thành: cơ sở, bố trí, phông chữ, các yếu tố. Điều này có thể có lợi cho người khác trong một số trường hợp.

Nếu bạn không thể tìm thấy phương pháp tổ chức phù hợp với môi trường, thử nghiệm và thiết kế những gì bạn cần, hãy đặt tên và chia sẻ lại với mọi người.

Điều này mang lại lợi ích cho bạn, trong đó: bạn tìm hiểu cách giải quyết vấn đề của mình và nó hiển thị tốt cho bạn với tư cách là nhà phát triển nâng cao.

Một cách tiếp cận là chia sẻ giải pháp trong blog wordpress, trang ví dụ trang web hoặc kho lưu trữ github.

Nếu nó là chính hãng và có lợi, hãy đặt tên, xây dựng và chia sẻ nó. Chỉ những điều tốt đẹp mới có thể đến được.

Chúc may mắn!

Answer 3

SMACSS là quy ước viết CSS.do đó, các khung công tác không phải là quan trọng nếu chúng tuân theo quy ước này hay không. BẠN là người nên theo dõi SMACSS khi sử dụng BẤT K framework khuôn khổ.

ví dụ, ai đó thực hiện một số file .LESS với ý kiến ​​cho những ai sẵn sàng để sử dụng LESS với SMACSS: https://github.com/growdigital/LESS-SMACSS

Answer 4

Tôi không biết rằng Bootstrap là dựa trên SMACSS, nhưng Jonathan Snook (SMACSS người sáng lập) có nội dung sau để nói:

"Nếu bạn đang tự hỏi triển khai ví dụ về SMACSS có thể trông như thế nào? Bootstrap là một ví dụ hoàn hảo".

Prefixed classes in bootstrap

Answer 5

Nếu bạn đang sử dụng SMACSS hạn như một từ đồng nghĩa với OOCSS hoặc Atomic design, hãy xem xét các khuôn khổ như sau:

• Cascade Framework
• Scally
• InuitCSS

Answer 6

Bạn nên cố gắng Helpers CSS: http://helpers.araujo.cc/

Rất dễ dàng để học và hiểu được.

<p text="gray-80 normal center"> 
<span text="bold big line-1 red"> 
    Can you 
    </span> feel the 
    <span text="underline italic blue semi-bold"> 
    future 
    </span>? HTML6 
    <span text="pre white-80 line-1.5" layout="navy few-rounded inline-block"> advantages </span> 
    are expecting for 
    <span text="bolder">you</span>! 
</p>