CSScaffold: framework CSS în PHP


Am descoperit, din întâmplare (ca orice lucru bun care se respectă), un articol în care erau prezentate diferite framework-uri / tool-uri CSS, iar unul dintre ele mi-a atras atenţia mai mult decât restul. Se numeşte CSScaffold şi mi-a plăcut pentru că, folosindu-se de un pre-processor scris în PHP, extinde sintaxa CSS (1). "Da cssu’?! Unde-i cssu’?!"… codul CSS (pur) e  generat on the fly (3), plus că folosindu-se de htaccess nu trebuie schimbat linkul către fişier, plus că îl şi minimizează, plus că se foloseşte de un sistem de caching, plus altele. Sună prea bine ca să fie adevărat? DA!… pentru că are câteva buguri (4) de care m-am lovit, dar pe care le-am rezolvat sau evitat după ce am instalat sistemul (2).

Vă prezint deci pe scurt câteva dintre facilităţi ca să vă faceţi cât de cât o idee despre posibilităţile pe care le aveţi. Pentru detalii cel mai bine ar fi să citiţi documentaţia. Sursa o puteţi obţine de aici.

1. Extinde sintaxa CSS, oferind posibilitatea de a utiliza constante, expresii, includeri de fişiere, iteraţii, mixins, nested selectors…

1.1 Constante

Definire

[CSS]@constants
{
culoarea_preferata: #123456;
}[/CSS]
Utilizare

[CSS]body
{
color: !culoarea_preferata;
}[/CSS]

1.2 Expresii

[CSS]#box
{
width:#[!latime_container – !padding_container]px;
}[/CSS]

1.3 Includere de fişiere

[CSS]@include ‘reset.css’;
@include ‘my_styles.css’;[/CSS]

Rezultatul va fi un fişier care conţine codul din cele 2 fişiere, tehnică importantă când vrei să optimizezi viteza de încărcare a unui site.

1.4 Iteraţii

[CSS]@for !i from 1 to 5
{
.box_!i { padding: #[5 * !i]px; }
}[/CSS]

Poate fi utilă sintaxa, dar eu nu văd deocamdată la ce mi-ar putea folosi.

1.5 Mixins

Sunt definiţii de blocuri de proprietăţi CSS care pot fi folosite ulterior în cod. Partea frumoasă e că se pot folosi inclusiv parametri, ei putând avea valori implicite.

[CSS]=box(!culoare = #123456)
{
color:!culoare;
}
#content_box
{
+box(#654321);
}[/CSS]

E foarte bună sugestia făcută în documentaţie de a folosi mixins cascadate. Chiar e! De asemenea în documentaţie veţi vedea că exista mixins predefinite.

1.6 Nested selectors

[CSS]#box
{
color: #123456;
a
{
color:#654321;
}
}[/CSS]

Codul generat va arăta astfel:

[CSS]#box
{
color: #123456;
}
#box a
{
color:#654321;
}[/CSS]

Genial! Mai există operatorul & prin care se poate face referinţă la părinte. E prezentat în documentaţie şi poate fi util.

2. Instalare

Eu m-am obosit să-l instalez altfel decât scrie în documentaţie pentru că îmi doream o altfel de structură. Deci:

  • am pus sistemul într-un folder (ex: csscaffold) din rădăcină
  • am pus în .htaccess din radacina

[PHP]
RewriteEngine on

# Anything after .css is used as the output=
RewriteCond %{REQUEST_URI} \.css
RewriteRule ^(.+)/([^/]+)/?$ cale_catre_csscaffold/index.php?request=%{REQUEST_URI}&output=$2&%{QUERY_STRING}

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_URI} \.css$
RewriteRule ^(.+)$ cale_catre_csscaffold /index.php?request=%{REQUEST_URI}&%{QUERY_STRING}
[/PHP]

  • am făcut un folder pentru cache (ex: /cache/csscaffold/) căruia i-am dat drepturi 0777
  • în fişierul index.php am modificat variabila $cache la ‘cache/csscaffold’
  • în fişierul .htaccess din folderul csscaffold am lăsat doar:

[PHP]
SetOutputFilter DEFLATE


ExpiresActive on
ExpiresDefault „access plus 1 month”
[/PHP]

(pentru browser caching)

  • la development am folosit setările PRODUCTION = FALSE – (index.php) şi cache_lock = false, always_recache = true (config.php)
  • la sfârşit am folosit PRODUCTION = TRUE, cache_lock = true, always_recache = false. În documentaţie zice că e suficient PRODUCTION = TRUE pentru că în cazul acesta nu se mai ţine cont de valoarea cache_lock şi always_recache, dar am vrut să fiu sigur ca e ok.

3. Generarea codului se face "on the fly", folosindu-se un sistem de caching. Cateva aspecte care merită menţionate:

  • pentru recache sistemul se orientează după data modificării fişierului şi se regenerează codul dacă e cazul (indiferent de setări)
  • daca e activata opţiunea ‘always_recache’ atunci fişierul e generat la fiecare request
  • daca nu e activată opţiunea ‘always_recache’ şi se fac modificări asupra unui fişier inclus (ex: reset.css) nu asupra fişierului principal (ex: styles.css), regenerarea trebuie făcută manual, cu un request la ….styles.css?recache

4. Buguri

Eu m-am lovit de următoarele buguri şi le-am postat şi în buglist-ul de pe github.

  • Folderele create în folderul de cache au drepturi 0755 în loc de 0777 (aveţi rezolvarea aici)
  • La regenerare rezultatul e adăugat la cel vechi deşi ar trebui să îl inlocuiască (aveţi rezolvarea aici)
  • Nu sunt luate în considerare proprietăţile care nu se termină cu ‘;’ adica box{width: 10px}. Am avut probleme cu TinyMCE care are astfel de definiţii în fişierele css. Nu am avut timp să o rezolv aşa că soluţia rapidă a fost să modific CSS-ul.

Enjoy! :)

Mircea Fernea

[Dacă doriţi să publicaţi şi Dvs articole pe acest sit contactaţi-ne. Ne-am bucura şi am fi onoraţi. Acceptăm guest posts în anumite condiţii.]


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

1 comentariu

  1. Mircea Fernea spune:

    De cand am scris articolul, Anthony a rezolvat bugurile si a restructurat putin aplicatia.

    Fac aici cateva precizari:
    – un singur bug a mai ramas si de care m-am lovit (inca nu am rezolvare la el) http://github.com/anthonyshort/csscaffold/issues#issue/62
    – configurarea se face dintr-un singur fisier – config.php
    – constanta PRODUCTION a devenit $config[‘in_production’]
    – variabila cache_lock nu mai exista
    – variabila always_recache a devenit $config[‘force_recache’]
    – a aparut $config[‘debug’] folosita in faza de dezvoltare pentru a afisa erorile (efectul ei e rescris de $config[‘in_production’])
    – $path[‘cache’] este acum o cale relativa la folderul de cache (ex. ‘../../cale/catre/folderul/de/cache’)

    Va stau la dispozitie pentru intrebari!


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *