Динамический CSS?

    xCSS PHP ClassЯ давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул…И так встречайте xCSS — php-класс для работы с динамическим CSS.
    Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (
    Как я уже писал выше, xCSS — это класс для работы с динамическим CSS. Автор вдохновлённый идеей OO CSS и SASS (да-да, для Ruby уже есть такая штука) создал класс, который позволяет работать с CSS динамически: разработчику доступны переменные, классы, вложенные селекторы и прототипирование.
    Что же даёт нам xCSS при первом рассмотрении? Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов, во-вторых, позволяет избавиться от необходимости править всю таблицу стилей, если понадобилось поменять какие-то значения, в-третьих, сократить количество кода избавившись от повторяющихся правил, в-четвёртых, минимизировать код. Плюсы на лицо, теперь давайте познакомимся с xCSS поближе.

    Переменные


    Об этом новшестве мне хочется написать первым делом, все мы часто сталкивались с ситуацией когда нужно поменять цвет в макете, а всё уже почти готово, а поиск и замена не подходят потому что цвет нужно менять не везде, а только у определённых элементов или когда перед сдачей в продакшн необходимо вычистить все отладочные правила, а их много… Уф. Даже перечислять не хочется ситуаций когда требуется что-то быстро изменить, чтобы поменялось там где нужно, а там где не нужно — нет!
    Теперь можно использовать переменные:
    vars {
    	$path_ = /images/icons;
    	$basicColor_ = #ffcc00;
    	$headerFonts_ = Arial, Tahoma, Verdana
    }
    #downloads {
    	list-style-image: url('$path_/folder.png');
    	border-left: $basicColor_;
    }
    
    h1 {
    	color: $basicColor_;
    }

    В примере я ставлю подчёркивание в конце переменных, это нужно для того чтобы необъявленные переменные не заменялись на переменные с общим префиксом. Проиллюстрирую выше сказанное: $newColor = #ffcc00, а $newColorBg не объявлен, но используется в коде, в результате от $newColorBg останется #ffcc00Bg.
    Строки в переменных можно не экранировать, они закрываются семиколоном (точкой с запятой).

    Вложенные селекторы


    Предположим есть у вас элемент товар и у него есть много вложенных элементов, которые требуют отдельного оформления: цена, описание, кнопка купить, номер модели и прочее. И конечно же теперь придётся писать сто раз подряд li.product тра-та-та… теперь всё проще:
    li.poduct {
        a {
    	    color: $basicColor;
        }
        .price {
    	    color: $priceColor;
    	    font-size: 2em;
        }
        .buy {
    	    background-color: $attentionColor;
        }
        // … и т.д. И т.п.
    }

    На выходе получим:
    li.product a {
    		color: $basicColor;
    }
    li.product	 .price {
    	color: $priceColor;
    	font-size: 2em;
    }
    li.product .buy {
    		background-color: $attentionColor;
    }	// … и т.д. И т.п.

    Удобно? Тогда теперь можно и о прототипировании поговорить

    Прототипирование


    Возьмём три товара обладающих идентичным расположением элементов, но разными цветовыми схемами, например, обычный товар, бест-селлер и новинка. Сначала мы создадим прототип для обычного товара:
    .product {
        self {
            min-width: 200px;
            min-height: 300px;
        }
        h1 {
            padding-bottom: 1em;
            color: $headersLight;
        }
    }
    
    .bestSeller extends .product {
        self {
            background-color: $productBestBg_;
        }
    
        h1 {
            color: $productBest_;
        }
    }
    .new extends .product {
        self {
            background-color: $productNewBg_;
            background-image: url($path/new_bg.png);
        }
        h1 {
            color: $productNew_;
            font-size: 1.2em;
            padding-bottom: 1.8em;
        }
    }
    В рузельтате мы получим набор всех необходимых правил:
    .new,
    .bestSeller,
    .product {
            min-width: 200px;
            min-height: 300px;
    }
    .new h1,
    .bestSeller h1,
    .product h1 {
            padding-bottom: 1em;
            color: $headersLight;
    }
    .new h1 {
            color: #00ffcc;
            font-size: 1.2em;
            padding-bottom: 1.8em;
    }
    .new {
            background-color: #0000cc;
            background-image: url(/storage/images/new_bg.png);
    }
    .bestSeller {
            background-color: #ff33cc;
    }
    .bestSeller h1 {
            color: #ff00cc;
    }

    Как видите при использовании xCSS мы избежали дублирования имён классов (кроме имени прототипа) и при смене имени класса нам

    PHP


    Теперь о php-составляющей и о том как прикрепить это чудо к вашему проекту.
    1. Кидаем файл xcss-class.php в библиотеку.
    2. В папке с xCSS-файлами создаём скрипт index.php и вставляем туда код:
      $config = array();
      $config['path_to_css_dir'] = '../'; // <i>это рут для css и xcss директорий</i>
      
      $config['xCSS_files'] = array (
      	'styles/main.xcss'		=> 'generated/main.css',
      //	имя файла xcss		=>  сохранить как
      );
      
      $config['master_file'] = true;	<i>// Использоват мастер-файл (файл в который будут включены все стили), по умолчанию true</i>
      $config['master_filename'] = 'master.css';	<i>// соответственно имя мастер-файла, по умолчанию 'master.css'</i>
      
      $config['reset_files'] = array  (
      	'static/reset.css', <i>// Стили сбрасывающие дефолтные настройки браузеров</i>
      );
      
      $config['hook_files'] = array  (
      	'static/hooks.css: screen', <i>// Файлы для других медиа-типов (могу ошибаться)</i>
      );
      
      $config['construct_name'] = 'self';	<i>// Имя элемента внутри себя, по умолчанию 'self'</i>
      
      $config['compress'] = true;	<i>// Удалять лишние пробелы, по умолчанию false</i>
      $config['debugmode'] = false;	<i>// Включает режим отладки, по умолчанию false</i>
      
      $config['disable_xCSS'] = false; <i>// Отключает xCSS, по умолчанию false</i>
      $xCSS = new xCSS($config);
      $xCSS->compile();
    3. Вставляем в заголовок HTML-страницы:Он обращается к файлу xcss/index.php, который собирает xCSS в CSS,затем подключаем мастер-файл:/>
    4. Отдыхаем.

    От автора


    Конечно я не использовал бы xCSS так как предлагает автор, а склеил бы все необходимые стили в один файл, сжал gzip'ом и закинул в кэш, а xCSS использовал бы только при разработке.
    Спасибо за внимание!

    Ссылки

    Поделиться публикацией

    Похожие публикации

    Комментарии 52

      +6
      Все же автор либы не до конца вдохновился SASS'ом — от скобочек мне кажется стоило отказаться… Еще есть очень похожий на этот проект Less.

      А вообще SASS можно успешно использовать и в других языках программирования ;)
        +1
        и отказаться от фигурных скобок? Ни за что! :)
        +2
        теги съехали

        Ъ-верстальщеги оторвали бы авторам таких библиотек и руки тоже :)
          0
          мда, хабраредактор такой редактор
          ну вы поняли, я про теги i
          –14
          А с безопасностью тут проблемы нет?
          • НЛО прилетело и опубликовало эту надпись здесь
              +6
              да, есть HAML — очень даже удобно
              0
              а как вам Interactive CSS (icss.soulstream.ru) ?? Правда мало о нем кто-то знает, но возможностей очень много… тоже работает на php
                0
                  –1
                  Всех верстальщиков в срочном порядке заставляем учить новый синтаксис. Верстальщики, с радостными улыбками на лицах, с флажками «Да Здравствует КПССxCSS» стройными рядами проходят перед rumkin, руководители на местах рапортуют о завершении пятидневных проектов в три дня…

                  ЗЫ. Меня одного немного передергивает от названия, которое уж слишком похоже на XSS?
                    –2
                    Ну тогда нужно сделать обратный инструмент :))

                    Типа вводишь нормальный css стиль, он его превращает в sass/lass/xcss… и тогда и верстальщики целы, и продвинутые вебмастера сыты.
                      0
                      Синтаксис тот же. Добавления уже перечислены в статье, и служат скорее синтаксическим сахаром.
                      +1
                      Добавить бы кеширование, ну чтобы скидывала резултат в файл вроде «xcss-production.css», да еще и возмозность сзатия gzip'ом, цены бы ей не было. А можно и самому доработать напильником =).

                      А так вполне сносно.
                        +2
                        Удобная штука. Всегда задумываюсь, когда пишу css, почему создатели не догадались сделать таблицы стилей по-настоящему каскадными.
                          –2
                          >почему создатели не догадались сделать таблицы стилей по-настоящему каскадными.
                          Имхо, потому что в w3c сидят уроды. Поэтому костыли будут жить всегда.
                          Впрочем это не только к CSS относится.
                            0
                            А у них вообще забавное представление о каскадности.
                            +3
                            Очень хотелось бы пользоваться подобным синтаксисом без всякого рода кодогенерации, пусть даже и с кешированием, но в таком виде — лучше не поленюсь и напишу обычный, но чистый CSS
                              +11
                              кривые костыли для программеров

                              Ничего нового, или того что нельзя сделать обычным css, кроме идеи с переменными, но их уже реализовывают.

                              Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов… Предположим есть у вас элемент товар и у него есть много вложенных элементов, которые требуют отдельного оформления: цена, описание, кнопка купить, номер модели и прочее. И конечно же теперь придётся писать сто раз подряд li.product тра-та-та…
                              А запятую для чего придумали? Multiple classes?
                              и ведь в итоге — код трансформируется именно в них.
                              только парсером.
                              зачем этот ужас?

                              сократить количество кода избавившись от повторяющихся правил… минимизировать код
                              верстать должны верстальщики, а не программисты и всё будет хорошо, не будет повторяющихся правил, будет нормальный код.

                              Этот XCSS всё равно на выходе генерит обычный css, только отлаживат этот ужас потом ещё тяжелее будет.

                                +7
                                Всё очень хорошо сказано, поддерживаю — это мертворожденная игрушка для программистов.
                                  +5
                                  Поверьте, я использую такие технологии уже больше 5ти месяцев, при правильном подходе они очень облегчают жизнь и экономят нервы. А на счет этого способа верстки хочу сказать одно — чтобы верстать успешно (пользуясь всеми доп. возможности), нужно смотреть на макеты и думать немного больше, чем при тупом копипасте.
                                    +1
                                    при правильном подходе они очень облегчают жизнь и экономят нервы
                                    описанны выше вложенные селекторы и прототипирование — это упрощение до примитивизма идеи каскадных стилей.
                                    используя настоящий css можно сделать гораздо красивее и лучше.

                                    А на счет этого способа верстки хочу сказать одно — чтобы верстать успешно (пользуясь всеми доп. возможности), нужно смотреть на макеты и думать немного больше, чем при тупом копипасте.
                                    что вы имеете в виду?
                                      +1
                                      > описанны выше вложенные селекторы и прототипирование — это упрощение до примитивизма > идеи каскадных стилей.
                                      > используя настоящий css можно сделать гораздо красивее и лучше

                                      Ну то что может этот движок — это еще очень мало, у разработчика еще фантазии не хватило до большего.

                                      > что вы имеете в виду?

                                      Просто я имею ввиду, когда верстальщик видит перед собой новые возможности и инструменты ему нужно при верстке думать немного по другому, трудно даже объяснить. Те кто будет смотреть на новые возможности старыми глазами, т.е. применять их там где не нужно, будут обречены на муки и страдания :).
                                        +1
                                        Ну то что может этот движок — это еще очень мало, у разработчика еще фантазии не хватило до большего.

                                        Его бы энергию да в мирное русло (CSS3) :)

                                        когда верстальщик видит перед собой новые возможности и инструменты
                                        так нового тут только переменные, которые уже и так в css3 пропихивают. Остальное — другой синтаксис для того что уже есть (зачем?)
                                          +2
                                          Я полностью с вами согласен, реализация xCSS не одна из самых удачных…
                                            –4
                                            Я полностью с вами согласен, реализация xCSS не самая лучшая…
                                    0
                                    А что, верстальщики просили сделать такую штуку?
                                      –3
                                      Если бы не было потребности верстальщиков в этой х… е, она бы не возникла.
                                      Другой вопрос — это палка о двух концах. С одной стороны ублюдочный и давно устаревший синтаксис css, с другой — проблемы валидации исходников CSS (как минимум).
                                        0
                                        Ну имея опыт разработки и поддержки громоздких проектов сомневаюсь в необходимости подобных программ.
                                        Основная проблема верстальщиков — создание такой структуры классов, которая не будет разваливаться при модификациях. А переменные и автоматическая генерация цепочек это ерунда. Кроме того, увлечение сложным прототипирование может привести к нестабильности кода.
                                          –1
                                          > имея опыт разработки и поддержки громоздких проектов сомневаюсь
                                          Имея опыт аналогичный вашему >10 лет. Я считаю что эта идея имеет полное право на существование.
                                          Но сам использовать ее не буду :)
                                          ЕБЖ, дождусь CSS4
                                            0
                                            >Но сам использовать ее не буду :)

                                            во!
                                          0
                                          Ублюдочный и устаревший? :) Какие же альтернативы — XSL, который сложнее самого HTML?
                                            0
                                            Причем здесь XSL?
                                              0
                                              Тоже язык оформления, и синтаксис на основе XML.
                                                –2
                                                XSL — не язык оформления. XSL — это язык преобразования одного документа в другой. К стилевой разметке HTML он не имеет ни малейшего отношения и никак не может заменить CSS.

                                                Кроме того, имхо, XSLT1 в объеме необходимом среднему HTML-верстальщику, язык достаточно простой и лаконичный. Выучить его намного проще чем HTML+CSS. При этом он еще и компактнее чем HTML+CSS.
                                                  0
                                                  Вы XSLT с XSL-FO не путаете?
                                                    0
                                                    Это вы что-то путаете. С того момента как приплели к CSS XSL :)
                                                      0
                                                      Вот рекомендации W3C по выбору между CSS и XSL. Там явно указано что это взаимозаменяемые языки стилей (второй путь отображения XML на схеме) :)
                                                        0
                                                        На эти рекомендации все производители броузеров (даже MS) давно забили болт. К сожалению.
                                                          0
                                                          Расширено:
                                                          В 99 я купил книгу MS-Press, в котором рассказывалась сказка о светлом будущем XSLT на клиенте (о FO там не говорилось). Я тогда долго и бурно кончал от возможностей, предоставленный ie5 — лучшим броузером всех времен и народов. Но увы. c момента выпуска ie5 ситуация не изменилась. Только что уроды из Оперы через 10 лет смогли повторить клиентский XSLT-огрызок IE5.
                                                          Какой нафиг XSL-FO, если ни один броузер не смог за 10 лет повторить достимжения IE5?
                                                          Ну хорошо. Предположим завтра MS реализует 100% поддержку XSLT2. Даст это альтернативу HTML+CSS? Смотрим в сторону XSL-FO?
                                                          Нет смотрите сами. Я — не проктолог!
                                          +7
                                          Ппц… холивар верстальщиков и программеров умудрились устроить.
                                            +1
                                            Нет здесь холивара между программистами и верстальщиками. Скорее здесь холивар верстальщиков по поводу допустимости программных надстроек над CSS.
                                            0
                                            А ещё можно сделать скрипт/движок, который будет рисовать табы, кнопки, флаги и датагридс. Только вот зачем?
                                            Для того, чтобы любой, даже далёкий человек от дизайна, смог нарисовать свою псевдоуникальную кнопку? Куча проектов, которые помогали создать вебдванольные логотипы, кнопки, флажки не сделали массы образованнее. Помимо этого, они привили мнение, что нарисовать кнопку легко — скажите это GUI-дизайнерам, они вам покажут как попиксельно рисуется каждая кнопочка/иконка.
                                              +2
                                              Верстальщики обладают священным знанием и защищают его (чтобы не остаться без рабты) =) Ну а программисты пытаются захватить знание (не совсем понятно, зачем). Но наблюдать весело:)
                                                0
                                                Knowledge is power, hide it well :)
                                                0
                                                А я css формирую используя smarty. И гипножабаскрипт тоже.
                                                  +1
                                                  А что с поддержкой хаков и exression'ов?
                                                    0
                                                    Забавно. только вчера прочитал здесь .
                                                    Уже наблюдаю на хабре. Оперативно =)
                                                      0
                                                      я вот такую штуку мучаю :)
                                                      wiki.github.com/anthonyshort/csscaffold
                                                        0
                                                        поправьте опечатки: «В рузельтате», «Плюсы на лицо».
                                                          +2
                                                          Для питоноводов есть библиотека с похожим функционалом cssutils — CSS Cascading Style Sheets parser and library for Python
                                                            0
                                                            Спасибо, использую эту идею в своей CMS
                                                              +1
                                                              Смотрите в сторону LESS

                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                            Самое читаемое