CSS like resource

I believe it gives ulitmate power to who wants to create own resource.

Before CSS

<board>
  <field player='you'>
  </field>
  <home player='you'>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar player='him'>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity='odd'>
    1
    <chequer player='him'>
      2
    </chequer>
  </point>
  <point parity='even'>
    2
  </point>
  <point parity='odd'>
    3
  </point>
  <point parity='even'>
    4
  </point>

After CSS

<board y=0 x=0 width=341 height=232>
  <field y=93 player='you' height=46 x=158 width=108>
  </field>
  <home y=131 player='you' height=101 x=266 width=25>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar y=5 player='him' image=uri("bar-none.jpg") x=133>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity='odd' y=139 width=18 color=pink x=249 image=uri("odd-none.jpg") height=88>
    1
    <chequer player='him' image=uri("odd-green-2.jpg")>
      2
    </chequer>
  </point>
  <point parity='even' y=139 width=18 color=skyblue x=230 image=uri("even-none.jpg") height=88>
    2
  </point>
  <point parity='odd' y=139 width=18 color=pink x=212 image=uri("odd-none.jpg") height=88>
    3
  </point>
  <point parity='even' y=139 width=18 color=skyblue x=194 image=uri("even-none.jpg") height=88>
    4
  </point>

CSS

position {x: 0; y: 0; width: 241; height: 232; image: uri("board.jpg")}
point        {width: 18; height:88}
point[parity='odd']    {color: pink}
point[parity='even']   {color: skyblue}
point:data("1") { x: 249 ; y: 139 }
point:data("2") { x: 230 ; y: 139 }
point:data("3") { x: 212 ; y: 139 }

point[parity='odd'] chequer[player='you']:data("1")   {image: uri("odd-white-1.j
pg")}
point[parity='odd'] chequer[player='you']:data("2")   {image: uri("odd-white-2.j
pg")}