css-sukiを使用したパッケージの整理

スタイルとそれに対応する画像は1つのモジュールにグループ化されます。 各モジュールには個別のディレクトリがあります。 写真へのリンクは、親ディレクトリを基準にして設定されます。 たとえば、「pager」モジュールの場合、同じ名前のディレクトリが作成され、その中に任意の名前の1つまたは複数のcss（たとえば、同じ「pager.css」）が配置されます。 「../page/pager-current_bg.png」のようになります。 例の画像は、ページャーの現在のページ番号を含む要素の背景を設定します。 画像名は、要素名（pager-current、pager-next、pager-prev ..）、画像の位置（bg、上、左、左上、アイコン..）および修飾子（ホバー、アクティブ、選択..）で構成されます。下線で区切られます。 複雑な例：pager-next_icon_hover.png



モジュール内のグループ化は関連しています。 たとえば、「テキスト」モジュールには、標準のハイパーテキスト要素のスタイル（em、strong、q ..）、「フォーム」-フォーム要素のスタイル、「テーブル」-テーブルに関連するすべてが含まれます。 マークアップは、独立した要素に関する記事で説明されているように実行されます 。



これらのシャーマニズムからのボーナスは、ビジュアルモジュールが互いに高度に独立していることです。これにより、プロジェクトとパッケージ間でビジュアルモジュールを簡単に転送できます。 一部のモジュールでは、先頭に接続が必要です（たとえば、css-reset）-先頭に数字を追加することで名前を付けることができます（たとえば、「0_reset」）。



上記のように、モジュールはパッケージにアセンブルされます-ディレクトリによる単純なグループ化。 パッケージは1つのファイルでエンドユーザーに届きます。 開発者は、すべてのcssファイルを個別にダウンロードモードに切り替えることができます。

< link href ="client/style/?name=main" type ="text/css" rel ="stylesheet" /> <br>- "main" <br><br> < link href ="client/style/?name=main&mode=compiled" type ="text/css" rel ="stylesheet" /> <br>- , <br><br> < link href ="client/style/main/~/compiled.css" type ="text/css" rel ="stylesheet" /> <br>- -,

スプライト用に別のモジュールが追加されます。 ただし、どうしても必要な場合を除き、すべての写真を1つのファイルに入れないでください。意味とフォームファクターに従ってグループ化することをお勧めします。



説明されているファイル構造により、画像への相対リンクを壊すことなく、すべてのファイルを単純にマージすることでスタイルをコンパイルできます。 css-sukiを起動すると、指定されたパッケージに「〜」という名前の擬似モジュールが作成され、index.css、compiled.css、および必要に応じてページネーションページ= *。Cssが書き込まれます。 自動ページネーションのおかげで、IEでも、パッケージには最大900個のcssファイルを含めることができます。



新しいモジュールを作成するには、パッケージ内にディレクトリとその中にcssファイルを作成するだけです。 他の場所に登録する必要はありません-すべてが自動的に行われます。 それに応じて、別のパッケージへの転送が実行されます。 パッケージの操作はまったく同じです。 相対パスのおかげで、「/ css /」、「/ client / styles /」など、どのディレクトリにスタイルを配置するかを心配する必要はありません。



そして、ここにコンパイラ自体があります（パッケージをすぐ隣に作成する必要があります）：

<?php # css-suki # rev: 2 # license: public domain



#

$mode = @ $_GET [ 'mode' ] or $mode = 'index' ;

if( $mode === 'source' ) highlight_file ( __FILE__ ) and die();

$name = preg_replace ( '![^\w-]+!' , '' , @ $_GET [ 'name' ] ) or $name = 'main' ;



#

$pageLimit = 30 ;



#

chdir ( $name );

@ mkdir ( '~' , 0777 , true );



#

$files = glob ( "??*/*.css" , GLOB_BRACE );

sort ( $files );

$filesCount = count ( $files );

if( $filesCount > pow ( $pageLimit , 2 ) ) print 'too many files' and die();



#

$compile = array();

foreach( $files as $file ):

$compile []= "/* @import url( '../{$file}' ); */" ;

$compile []= file_get_contents ( $file ) . "\n" ;

endforeach;

$compile = implode ( $compile , "\n\n" );

file_put_contents ( "~/compiled.css" , $compile );



#

if( $filesCount < $pageLimit ):

$index = preg_replace ( '!(.+)!' , '../$1' , $files );

else:

$index = array();

for( $page = 0 ; ( $page * $pageLimit ) < $filesCount ; ++ $page ):

$index []= "page={$page}.css" ;

endfor;

endif;



#

$index = preg_replace ( '!(.+)!' , '@import url( "$1" );' , $index );

$index = implode ( $index , "\n" );

file_put_contents ( "~/index.css" , $index );



#

if( $filesCount >= $pageLimit ):

for( $page = 0 ; ( $page * $pageLimit ) < $filesCount ; ++ $page ):

$pageFiles = array_slice ( $files , $page * $pageLimit , $pageLimit );

$pageFiles = implode ( preg_replace ( '!(.+)!' , '@import url( "../$1" );' , $pageFiles ), "\n" );

file_put_contents ( "~/page={$page}.css" , $pageFiles );

endfor;

endif;



#

switch( $mode ){

case 'index' : case 'compiled' :

header ( "Content-Type: text/css" , true , 200 );

echo "@import url( '{$name}/~/{$mode}.css' );\n" ;

break;

default:

echo "wrong mode" ;

}



exit(); ?>



:

mode -

name -



:

source - css-suki

index - ,

compiled -