# Abstracting CSS with XHP

DevFeed: [Abstracting CSS with XHP](<https://devfeed.tech/articles/abstracting-css-with-xhp-22028.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/3504948746>)

Author: Codebeforethehorse

Published: 2011-02-25T17:11:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [class](<https://devfeed.tech/tags/class.md>), [classes](<https://devfeed.tech/tags/classes.md>), [css](<https://devfeed.tech/tags/css.md>), [enum](<https://devfeed.tech/tags/enum.md>), [format](<https://devfeed.tech/tags/format.md>), [function](<https://devfeed.tech/tags/function.md>), [html](<https://devfeed.tech/tags/html.md>), [render](<https://devfeed.tech/tags/render.md>), [root](<https://devfeed.tech/tags/root.md>), [ui](<https://devfeed.tech/tags/ui.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

## AI overview

The article explains how XHP elements can centralize reusable CSS styles such as colors and font sizes. It demonstrates defining enumerable attributes and rendering corresponding CSS classes, reducing duplicated styles and helping keep implementation aligned with design standards.

## Source excerpt

A good site design uses a consistent palette and reusable styles, but the unavoidable pitfall is the developer will have to remember every classname for every color and format, or redeclare the same values for multiple CSS classes. There are many frameworks and scripts that try to simulate CSS variables to help with this problem, but they actually make the situation worse. You'll still have to remember all the variables and you'll also have to put them in multiple CSS classes. XHP provides a new (and perhaps the first real) solution to this problem. By creating a simple element that holds your common formatting and styles, you can both avoid having to remember all the CSS class names as well as stop duplicating the same style in multiple CSS classes. Your XHP element will have an attribute for every reusable style on your site. These are the core styles like your colors and sizes. Let's pretend we have these basic styles: .blue { color: #3b5998; } .lightBlue { color: #edeff4; } .gray { color: #808080; } .darkGray { color: #333; } .bigText { font-size: 16px; } .normalText { font-size: 13px; } .smallText { font-size: 10px; } Just some basic colors and sizes for the text on our site. Now create an XHP element that will add these values for you, with enumerable attributes: class :ui:text extends :x:element { attribute enum {'gray', 'darkgray', 'blue', 'lightblue'} color, enum {'small', 'normal', 'big'} size; protected function render() { $root = <div>{$this->getChildren()}</div>; switch ($this->getAttribute('color')) { case 'gray': $root->addClass('gray'); break; case 'darkgray': $root->addClass('darkGray'); break; case 'blue': $root->addClass('blue'); break; case 'lightblue': $root->addClass('lightBlue'); break; } switch ($this->getAttribute('size')) { case 'small': $root->addClass('smallText'); break; case 'normal': $root->addClass('normalText'); break; case 'big': $root->addClass('bigText'); break; } return $root; } } You can extend on this to add any number of commo