Доброго времени суток. Возможно сабж, на поверхности похожей темы не нашёл. Есть идея сделать конструкцию сайта немного другой, чем обычно. Надо обсудить плюсы, минусы. Для начала немного кода: Код (Text): class THtml { var $settings; var $head = array( title=>array(), meta=>array(), link=>array(), script=>array() ); var $logo = 'здесь можно сразу писать html-код logo сайта'; var $menu; .... var $footer; function PrintHtml(); } вся идея в том, чтобы сначала производить наполнетие THtml элементами, а потом делать вывод. сейчас для работоспособности сайта большое значение имеет CSS, его столько, что соперничает с основным html-кодом по размерам. При таком подходе каждый элемент THtml может добавлять свои классы и стили в style-раздел $html->head, и в итоговой функции PrintHtml() производить генерирование конечного css-файла, либо осуществить вывод как <style>...</style> а заодно и <script>...</script> что зависит от настроек в $html->settings. Это будет избавлять файл css от лишнего кода. Следующий момент такого подхода. В таком стиле можно выстраивать компоненты сайта, которые можно многократно повторять используя механизм. И менять только настройки. Например одно и тоже меню можно исп. как главное (горизонтальное), как боковое (отображающ. некий список, вертикальное, с другими настройками). При желании можно ещё придумать применение такой компонентной системы построения сайта. Вот например "Летающее меню на CSS3" (http://css-live.ru/tricks/letayushhee-menyu-na-css3.html) HTML: Код (Text): <div class="fly-menu"> <div class="fly-hover"></div> <ul> <li class="fly-item home"></li> <li class="fly-item about"></li> <li class="fly-item setting"></li> <li class="fly-item portfolio"></li> <li class="fly-item mail"></li> </ul> <div class="fly-main"></div> </div> </div> CSS: Код (Text): content:""; width:10px; height:20px; position:absolute; top:22px; left:20px; background-color:#21383E; display:inline-block; } .fly-menu:hover .about { top: -120px; left:50px; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation: it-2 1.1s 1 linear; -webkit-animation: it-2 1.1s 1 linear; -o-animation: it-2 1.1s 1 linear; animation: it-2 1.1s 1 linear; } @-moz-keyframes about { 0% {-moz-transform: rotate(-360deg); top: 15px;} 50% {-moz-transform: rotate(0deg); top: -110px;} 100% {-moz-transform: rotate(360deg); top:-100px;} } @-webkit-keyframes about { 0% {-webkit-transform: rotate(-360deg); top: 15px;} 50% {-webkit-transform: rotate(0deg); top: -110px;} 100% {-webkit-transform: rotate(360deg); top:-100px;} } @-o-keyframes about { 0% {-webkit-transform: rotate(-360deg); top: 15px;} 50% {-webkit-transform: rotate(0deg); top: -110px;} 100% {-webkit-transform: rotate(360deg); top:-100px;} } @keyframes about { 0% {transform: rotate(-360deg); top: 15px;} 50% {transform: rotate(0deg); top: -110px;} 100% {transform: rotate(360deg); top:-100px;} } .setting { background: #FE9732; width:50px; height:50px; top: 15px; right: 15px; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; cursor:pointer; } .setting:after{ position:absolute; width:7px; height:20px; top:17px; left:14px; content:""; background-color:#693E13; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .setting:before{ border:6px solid #693E13; border-top:0px; border-radius:0px 0px 10px 10px; top: 12px; left:19px; height: 6px; width:10px; position:absolute; content:''; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .fly-menu:hover .setting { top: -20px; right: -120px; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); /*==== Animasi Efek Bouncing ====*/ -moz-animation: it-3 1.2s 1 linear; -webkit-animation: it-3 1.2s 1 linear; -o-animation: it-3 1.2s 1 linear; animation: it-3 1.2s 1 linear; } @-moz-keyframes setting { 0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;} 50% {-moz-transform: rotate(0deg); top: -70px; right: -70px} 100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; } } @-webkit-keyframes setting { 0% {-webkit-transform: rotate(-360deg); top: 15px; right: 15px;} 50% {-webkit-transform: rotate(0deg); top: -70px; right: -70px} 100% {-webkit-transform: rotate(360deg); top:-60px; right: -60px; } } @-o-keyframes setting { 0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;} 50% {-moz-transform: rotate(0deg); top: -70px; right: -70px} 100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; } } @keyframes setting { 0% {transform: rotate(-360deg); top: 15px; right: 15px;} 50% {transform: rotate(0deg); top: -70px; right: -70px} 100% {transform: rotate(360deg); top:-60px; right: -60px; } } .portfolio { background-color:#FDE674; bottom: -10px; right: 5px; width:50px; height:50px; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; cursor:pointer; } .portfolio:after{ content:""; background:#86680E; width:30px; height:20px; position:absolute; top:16px; left:10px; } .portfolio:before{ content:""; background:#86680e; width:15px; height:10px; position:absolute; top:12px; left:25px; } .fly-menu:hover .portfolio { bottom: -90px; right: -110px; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation: portfolio 1.2s 1 linear; -webkit-animation: portfolio 1.2s 1 linear; -o-animation: portfolio 1.2s 1 linear; animation: portfolio 1.2s 1 linear; } @-o-keyframes portfolio { 0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px} 100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; } } @-moz-keyframes portfolio { 0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px} 100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; } } @-webkit-keyframes portfolio { 0% {-webkit-transform: rotate(-360deg); bottom: 15px; right: 15px;} 50% {-webkit-transform: rotate(0deg); bottom: -70px; right: -70px} 100% {-webkit-transform: rotate(360deg); bottom:-60px; right: -60px; } } @keyframes portfolio { 0% {transform: rotate(-360deg); bottom: 15px; right: 15px;} 50% {transform: rotate(0deg); bottom: -70px; right: -70px} 100% {transform: rotate(360deg); bottom:-60px; right: -60px; } } .it-5 { background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top; bottom: 15px; left: 15px; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .fly-menu:hover .it-5 { bottom: -100px; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation: it-5 1.3s 1 linear; -webkit-animation: it-5 1.3s 1 linear; -o-animation: it-5 1.3s 1 linear; animation: it-5 1.3s 1 linear; } @-o-keyframes it-5 { 0% {-moz-transform: rotate(-360deg); bottom: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -110px;} 100% {-moz-transform: rotate(360deg); bottom:-100px; } } @-moz-keyframes it-5 { 0% {-moz-transform: rotate(-360deg); bottom: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -110px;} 100% {-moz-transform: rotate(360deg); bottom:-100px; } } @-webkit-keyframes it-5 { 0% {-webkit-transform: rotate(-360deg); bottom: 15px;} 50% {-webkit-transform: rotate(0deg); bottom: -110px;} 100% {-webkit-transform: rotate(360deg); bottom:-100px; } } @keyframes it-5 { 0% {transform: rotate(-360deg); bottom: 15px;} 50% {transform: rotate(0deg); bottom: -110px;} 100% {transform: rotate(360deg); bottom:-100px; } } .it-6 { background: magenta; background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top; bottom: 15px; left: 15px; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } .fly-menu:hover .it-6 { bottom: -60px; left: -60px; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-animation: it-6 1.4s 1 linear; -webkit-animation: it-6 1.4s 1 linear; -o-animation: it-6 1.4s 1 linear; animation: it-6 1.4s 1 linear; } @-o-keyframes it-6 { 0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px} 100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; } } @-moz-keyframes it-6 { 0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;} 50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px} 100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; } } @-webkit-keyframes it-6 { 0% {-webkit-transform: rotate(-360deg); bottom: 15px; left: 15px;} 50% {-webkit-transform: rotate(0deg); bottom: -70px; left: -70px} 100% {-webkit-transform: rotate(360deg); bottom:-60px; left: -60px; } } @keyframes it-6 { 0% {transform: rotate(-360deg); bottom: 15px; left: 15px;} 50% {transform: rotate(0deg); bottom: -70px; left: -70px} 100% {transform: rotate(360deg); bottom:-60px; left: -60px; } } (фих его знает работает не работает, не проверял) можно было бы соорудить такой класс: Код (Text): class TFlyMenu { var $settings; function TFlyMenu($setts) { $this->settings = $setts; ... } } начальная инициализация: Код (Text): $SettsMainFlyMenu = array( position=>'vertical', color=>'red', // ))) width=>'150px', // ну и так далее ); $MainMenu = new TFlyMenu($SettsMainFlyMeny); $html->MainMenu = $MainMenu; if( $cat == 10 ) /*если вызывается соответствующая страница */ { $settsProdukshenMenu = array( position=>'horizontal', color=>'white', width=>'300px', ... ); $ProdukshenMenu = new TFlyMenu($SettsProdukshenMenu); $html->ProdakshenMenu = $ProdukshenMenu; } само описание класса TFlyMenu гдето спрятано в аналах ресурсных каталогов, и уже больше не беспокоит как оно работает. Ещё один плюс: распространять компоненты при такой модели станет намного проще.
Скажу вам сразу минусы если собираетесь внешние цсс генерить то))сами понимаете лишние запросы к серверу)... Если в код страницы то представьте 2000тысячи страниц был бы цсс внешний хакэшировался а в тегах стайл повысит размер страницы на кб допустим 5 а зачем это надо)... Если хотите как то минимизировать)не знаю есть ли такое уже мысль как то пришла после изучения бэм... Все файлы пропустить через скрипт который минимизирует названия классов до 1,2,3 символов сколько понадобится)... Это уже думаю экономия..и само собой результат такого хапоминать чтоб постоянно не делать.. То есть исходник в котором правите длинные имена потом собрать для людей короткие))
Я вообще не понял ваше намерение в создании этой темы. Смысл давать, то, что вы не проверяли. Или вы надеетесь, что за вас все сразу начнут проверять и писать?)