24

私は職場で多くのカスタム アプリケーションを作成しています。新しいアプリケーションの標準を定義しようとしています。Elementsに少し似ています。

CSS : スタイル シートをどのように整理しますか? サイト全体に 1 つの基本スタイル シートを用意し、カスタマイズのために個々のページごとに 1 つのスタイル シートを用意する必要がありますか? 印刷スタイル用に別のものを用意する必要がありますか? より多くのファイルをリンクすると、ブラウザがファイルを取得するのに時間がかかると聞きました。(1 ページあたりのオブジェクト数が多い...これも JavaScript ファイルや画像が多い場合の問題です) ... いくつあると多すぎますか? CSS に多くのコメントを付けていますか? ネストされた構造を提供しますか? 要素内でアルファベット順に並べますか? リセットは必要ですか?輸入品はどうですか?そしてタイポグラフィ?

Javascript : 基本的に同じ質問です。Javascript ファイル...1 つまたは 2 つの優れたライブラリ (JQuery と Prototype など) を含めてから、ページごとに別のライブラリを含める必要がありますか? 今、私は突然 5 つまたは 6 つの CSS および JS ファイルを含めています...

ディレクトリ構造: サイトをどのように編成しますか? 現在、私は次のようなものを使用しています

/CSS          ... For CSS files
/JS           ... For javascript files
/INC          ... For private code includes
/ASSETS/IMG   ... For images
/ASSETS/AU    ... For audio
/ASSETS/SWF   ... For Flash

また、その他のヒントも歓迎します。ありがとう!!

4

6 に答える 6

8

CSS:スタイルシートを 1 つだけ使用します。進むにつれて、一番下に追加し続けます。私は通常、各ページ固有の一連のルールの前にコメントを置きます。何かを編集する必要がある場合は Ctrl+F。

Javascript:通常、ライブラリは 1 つだけ、場合によってはいくつかのプラグインを含めます。ページ固有のJSをそのページのヘッダーに直接スローするために使用されていましたが、少し見苦しく、「動作」とデータが混在しています。だから私は新しいパラダイムを始めています -

MVCB -- モデル、ビュー、コントローラー、振る舞い。MVC はかなり静的な UI を備えたデスクトップ アプリに最適ですが、多くの JS を追加すると、追加の抽象化レイヤーが必要になると思います。

したがって、私の元のファイル構造:

index.php
app
    config
        bootstrap.php               -- code that needs to run before anything else, or functions that don't really fit elsewhere
        core.php                    -- timezone, database, and misc settings
        routes.php                  -- default routes
    layouts                         -- layout/template files
        flash                       -- layouts for one-time popup messages
    objects                         -- all files are stored in the same folder as the controller to keep directories
                                            smaller and ease reusability
        object
            controller.php
            model.php
            routes.php              -- object-specific routes to override default routes
            behaviours              -- page-specific javascript files
                action.js           -- included automatically on that page if this file exists
            views
                action.php          -- the view for this action
    public                          -- static media files, sometimes called "assets"
        favicon.ico
        xrds.xml
        css
        img
        js
        uploads         
core
    app.php                         -- initializes stuff
    controller.php                  -- default controller
    dispatcher.php                  -- includes everything and calls all the appropriate functions
    model.php                       -- default model that all other models inherit from
    components                      -- helper functions to used in controllers
    datasources                     -- mysql, oracle, flat-file...
    helpers                         -- functions to be used in views and layouts
    structures                      -- model helpers such as tree or polymorphic behaviours
    utils                           -- functions that are useful everywhere
libs                                -- 3rd party libs

.htaccess

Options -Indexes 

RewriteEngine On

RewriteCond %{REQUEST_URI} !^/app/public/
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f
RewriteRule .* /app/public/$0 [L]

RewriteCond %{REQUEST_URI} !^/app/objects/
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* /index.php?url=$0 [L,QSA]
于 2009-07-22T06:34:50.117 に答える
3

フォルダに大文字を使用しないように注意してください。Windowsで開発し、Linuxサーバーにデプロイするときに噛み付く可能性があります。

于 2009-07-22T06:15:46.177 に答える
3

ディレクトリ構造とコメントを別のスレッドに投稿しましたが、ここにも当てはまります。

私はしばらくの間、次のセットアップを使用しており、素晴らしい結果が得られています。

  • /site: これは、私の実際の作業 Web サイトが存在する場所です。テンプレートを作成したら、CMS またはプラットフォームをこのディレクトリにインストールします。

    • .htaccess (とにかく有効にしている基本的な微調整)
    • robots.txt (後で /admin などの項目を禁止することを忘れないようにします)
  • /source: コンプ、メモ、ドキュメント、仕様などが含まれます。

  • /templates: ここから始めましょう! 最終的に CMS または /site のフレームワークに移植する必要があるすべての静的テンプレートを作成します。

    • /_行動
      • global.js (サイト固有のコード。必要に応じて複数のファイルに分割される場合があります)
    • /_media: 画像、ダウンロード可能なファイルなど必要に応じて整理

    • /_style: モジュール式の CSS 開発を好むので、通常、Web サイトの固有のセクションごとに多数のスタイルシートを作成することになります。これはBlenderで大幅にクリーンアップされます- このツールを強くお勧めします!

      • print.css (これは最終的にブレンドされるため、@media print を使用)
      • reset.css ( Eric Meyer の)
      • screen.css (@media screen、ハンドヘルド用)
      • 必要に応じて追加モジュール
    • /_vendor: すべてのサードパーティ コード (jQuery、shadowbox など)

    • Blendfile.yaml (Blender 用。上記参照)

    • template.html (基本的な開始テンプレート。固有のテンプレートごとにコピーして名前を変更できます)
  • /tests: Selenium単体テスト

于 2009-02-26T17:11:25.580 に答える