Làm thế nào để bạn quản lý các tệp định kiểu CSS và các phần đính kèm trong một ứng dụng ruby ​​lớn trên đường ray?

Question

Bạn nên quản lý việc tổ chức các tệp css và bao gồm trong một ứng dụng lớn trên ứng dụng đường ray, giả sử bạn không sử dụng một khung công tác? Đương nhiên, bạn sẽ có các kiểu cấp ứng dụng của mình (ví dụ: reset.css, applcation.css). Nhưng sau đó là cách tiếp cận tốt nhất là gì? Tôi có thể thấy bằng cách sử dụng các trang tính cụ thể của bộ điều khiển hoặc các trang cụ thể dạng xem cụ thể hơn. Có những lựa chọn hợp lý nào khác không? Điều gì sẽ là ưu và nhược điểm?

Nhân tiện, tôi đang làm việc ở đường ray 3.1 ngay bây giờ và có vẻ như việc bao gồm đường dẫn nội dung có thể ảnh hưởng đến câu trả lời tại đây - nhưng rất vui khi nghe giải pháp từ đường ống trước hoặc sau nội dung quan điểm.

Cảm ơn!

Answer 1

Moving này vào câu trả lời vì nó (chỉ cần một chút) khổng lồ cho một lời nhận xét, mặc dù tôi nhận ra nó không phải là câu trả lời chính xác mà bạn' Đang tìm kiếm.

Tôi chưa chuyển sang đường ray 3.1, nhưng tôi đã sử dụng Compass/Sass trong một thời gian khá lâu và tôi có thể mô tả một cách lỏng lẻo các thực hành của mình (phần nào luôn thay đổi).

Check-out Compass ở đây: http://compass-style.org/

Mục tiêu của tôi là trở thành như mô-đun càng tốt, và tách phong cách của tôi vào loại theo nhiều cách khác nhau. Một cấu trúc mẫu có thể trông như thế này. Tôi đang nhúng nhận xét cùng với phân cấp tệp, vì vậy hy vọng nó có thể đọc được.

- stylesheets 
    # at top level, the files which are eventually concatenated and output, the main 
    # sheet, "screen", a stripped version for a wysywyg editor, and some overrides. 
    - screen.scss 
    - print.scss 
    - ie.scss 
    - wysiwg.scss 

    # also in this folder I tend to keep a reset 
    - _reset.scss 

    # and then separated, "includes" and "partials", includes being purely definitions 
    # and mixins, while partials being their application (actual CSS output) 
    - _includes.scss 
    - includes 
     - _definitions.scss # some global variable defs 
     - _typography.scss # typography mixins and defs 
     - _colors.scss  # colors mixins and defs, and so on 
     - ... 

    - _partials.scss 
    - partials 
     - _application.scss # top level layout + tweaks that don't belong anywhere else 
     - _typography.scss # the generation of typography CSS 
     - _colors.scss  # the generation of colors CSS, and so on 
     - ... 

     - _layouts.scss  
     - layouts    # layout specific styles 
     - _controllers.scss 
     - controllers   # controller specific styles 
     - _modules.scss  
     - modules    # modular, reusable pieces (widgets, breadcrumbs, navs, etc) 
     - _vendor.scss   
     - vendor    # everything vendor, (jquery-ui, qtip, colorbox) 

Ý tưởng cơ bản là mọi thứ được biên dịch thành các tệp * .scss cấp cao nhất, những thứ duy nhất không phải là "partials" có dấu gạch dưới. Những tệp này rất đơn giản và có xu hướng trông như thế này.

# screen.scss, import all partials 
@import 'reset'; 
@import 'partials'; 

# wysiwyg.scss doesn't need all the partials, but needs the basic stuff 
# and the semantic classes for wysiwyg users, e.g. ".red", etc. 
@import 'reset'; 
@import 'partials/typography'; 
@import 'partials/colors'; 
@import 'partials/semantic'; 

_layouts.scss và các tệp khác dùng chung tên thư mục là tập hợp nhập tệp đơn giản trong thư mục tương ứng.

Ý tưởng chung là partials ở mức mỏng nhất có thể, với gánh nặng của công việc đang được thực hiện trong mixin. Compass may mắn cung cấp một túi đầy đủ của những cũng như tôi sử dụng nhiều.

Đối với một số loại cấu trúc tệp này có thể khó sử dụng, nhưng tôi thấy nó hoạt động tốt cho mục đích của tôi. Đặc biệt một khi bạn nhận được một thư viện tốt của mixins và partials swappable đi. Nó làm cho nó hơi dễ dàng để tinh chỉnh một vài định nghĩa biến hoặc thay thế một phần hoặc mixin với nhau để thay đổi nhanh chóng toàn cầu.

Answer 2

Trong các dự án của tôi, tôi có một số người trợ giúp tải biểu định kiểu và các bản ghi dựa trên bộ điều khiển và hành động. Tôi cũng tải các giá trị mặc định, các công cụ trong một thư mục chung và một thư mục của nhà cung cấp. Tất cả điều này được thực hiện trong layout.html applicationham của tôi để tất cả những điều này bao gồm trong tiêu đề.

giả một bộ điều khiển tên my_apps_controller.rb stylesheets và Javascripts của tôi thư mục trông giống như sau:

public/javascript/ 
    vendors/ 
    common/ 
    my_apps/ 
    common/ 
    index/ 
    edit/ 
    show/ 
    ...etc... 

stylesheets My/sass/thư mục trông tương tự.

Lợi ích ở đây là tôi được xây dựng trong tổ chức dựa trên quy ước cho nội dung của mình thay vì phải chơi trò chơi cấu hình. Thách thức là tôi tìm thấy các trường hợp không rõ thư mục hành động mà nó đi vào. Cho đến nay nó phục vụ cho tôi tốt mặc dù.

người giúp đỡ tôi về cơ bản:

module ApplicationHelper 
    def load_javascript_for_directory(directory_name) 
    glob_string = "#{directory_name}/**/*.js" 
    javascript_include_tag Dir.chdir(File.join(Rails.root, "public", "javascripts")) { Dir.glob(glob_string).sort } 
    end 

    def load_css_for_directory(directory_name) 
    glob_string = "#{directory_name}/**/*.css" 
    stylesheet_link_tag Dir.chdir(File.join(Rails.root, "public", "stylesheets")) { Dir.glob(glob_string).sort } 
    end 
end 

Không có gì khó khăn, nhưng trong cách bố trí ứng dụng của tôi, tôi có thể gọi chúng bằng:

= load_javascript_for_directory "#{controller_name}/#{action_name}" 

này tải lên controller/action tài sản cụ thể và những người soạn bình thường có được những thứ tôi cần thường xuyên.

Tôi không cố gắng bán phương thức này làm phương pháp duy nhất. Nó chỉ là một giải pháp thay thế không chỉ giải quyết vấn đề cho tôi, mà còn giúp tôi hiểu rõ cấu trúc tài sản của tôi và cách làm khô chúng.

Và vâng, Sass cho stylesheets tôi và coffeescript cho javascripts của tôi :)