Package organization with css-suki

Styles and their corresponding images are grouped into one module. For each module - a separate directory. Links to images are set relative to the parent directory. For example, for the pager module, a directory of the same name is created in which one or more css with an arbitrary name is put (for example, with the same name “pager.css”), next to it is the image “pager-current_bg.png”, the link to which looks like this "../page/pager-current_bg.png". The picture from the example sets the background for the element containing the current page number in the pager. Image names are composed of the element name (pager-current, pager-next, pager-prev ..), the location of the image (bg, top, left, top-left, icon ..) and modifiers (hover, active, selected ..) separated by an underscore. Complex example: pager-next_icon_hover.png

Grouping into module occurs by relationship. For example, the “text” module may contain styles for standard hypertext elements (em, strong, q ..), in “form” - styles for elements of forms, in “table” - everything related to tables. The markup is performed as described in the article about independent elements .

The bonus from these shamans is a high degree of independence of visual modules from each other, which makes it easy to transfer them between projects and packages without worrying about the order of their connection. Some modules require connection at the beginning (for example, css-reset) - they can be called by adding a digit at the beginning (for example, “0_reset”).
')
As mentioned above, the modules are assembled into packages - by simple grouping by directories. The package to the end user comes in one file. The developer can switch to the download mode for all css files separately.

< 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>- -,

For sprites start up a separate module. But it is not necessary, unless absolutely necessary, to thrust all the pictures into one file - it is better to group them by meaning and form factor.

The described file structure allows you to compile styles by simply merging all the files, without breaking the relative links to the pictures. When running, css-suki creates in the specified package a pseudomodule with the name "~" where it writes down index.css, compiled.css and, if necessary, page = page = *. Css. Thanks to automatic pagination, the package can be up to 900 css-files, even in IE.

To create a new module, you simply create a directory inside the package and in it a css file. You do not need to prescribe it anywhere else - everything will be done automatically. Transfer to another package is carried out accordingly. Work with packages is completely similar. Thanks to relative paths, you don’t need to worry about which directory you want to place the styles in, "/ css /", "/ client / styles /" or wherever.

And here is the compiler itself (packages need to be created right next to it):

<?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 -