Before we begin, I have to first be very clear that CSS for the most part should not be created exclusively with PHP. While you can certainly create all of your site’s CSS with PHP, it is neither efficient or wise to do.
CSS has developed into a vibrant language, especially with the recent rise of preprocessors such as SASS and LESS.
You should create most of your design in SASS or just raw CSS, and only leave PHP for the things that the user will be able to change on their own.
Understanding The PHP CSS Class
Lets begin the project by first downloading the PHP CSS Class which I built for this tutorial.
The PHP CSS class is the best way to handle this because of the fact that once we’ve got information stored in the object it is then easy for us to manipulate that information over and over again. The class also provides us with methods that will allow us to do things uniformly and efficiently. Just remember that we’ll be writing CSS utilizing PHP, so it will look more like PHP. Let’s set it up.
|
1 2 3 4 5 |
require_once 'path_to_library/class-php-css.php'; use CarlosRios\PHP_CSS; $css = new PHP_CSS; |
Setting The HTML DOM Selector
The PHP CSS class allows us to easily set and change selectors so that at any given moment we’re working with one individual selector or set of selectors. We set the selector in the same way that we would in CSS like so.
|
1 2 3 |
$css->set_selector( '#content' ); // Sets #content as the selector to add properties to $css->set_selector( '#content, #wrapper, body' ); // Sets multiple selectors |
Changing The Selector
Once we’ve set the selector’s we can begin adding rules to them, but before we do that I’d like to point out that if you wish to change the selector once it’s been set you can use either the change_selector() method or the set_selector() method once again.
|
1 |
$css->change_selector( '#something-different' ); |
Adding CSS Properties To A Selector
Once we have a selector set we can begin adding properties to it. The properties are any valid css property paired with a value (which is where the PHP CSS class really shines). First let’s setup some variables and then re set the selector.
|
1 2 3 4 5 6 7 8 |
// Set some variables $background_color_value = '#FFF'; $background_image_url = 'http://imageurl.com/image.png'; $text_color_value = '#222'; $display_value = 'block'; // Set a selector $css->set_selector( '#header' ); |
To add a single property we use the add_property() method which requires two arguments. The first is the property-type and the second is the value.
|
1 2 |
// Add a single property $css->add_property( 'background-color', $background_color_value ); |
To add multiple properties you can use the add_properties() method which requires an array as its only argument.
|
1 2 3 4 5 6 |
// Add multiple properties at once $css->add_properties( array( 'color' => $text_color_value, 'background-image' => $background_image_url, 'display' => $display_value, ) ); |
Now that we’ve set multiple properties to the ‘#header’ selector, our css output would be as follows:
|
1 2 3 4 5 6 |
#header{ background-color:#FFF; background-image:url('http://imageurl.com/image.png'); color:#222; display:#block; } |
Handling Pseudo Class Properties
Adding properties to the pseudo classes or states of the selector comes builtin to the PHP CSS class. Once we add pseudo classes to the selector states the PHP CSS class will automatically store all of the rules created before and add new properties to the selector with the state added to it.
|
1 2 |
$css->set_selector( '#header' ); $css->add_selector_state( ':hover' ); |
Then we can continue adding properties.
|
1 |
$css->add_property( 'border-color', '#222' ); |
Which would output:
|
1 2 3 |
#header:hover{ border-color: #222; } |
Adding Multiple Pseudo Classes To A Selector
We can also add multiple pseudo classes to the selector by using the add_selector_states() method which requires an array as its single argument. Using this method will create an output of the css selector for each state that you specify.
|
1 2 3 |
$css->set_selector( '#header' ); $css->add_selector_states( array( ':hover', ':active' ) ); $css->add_property( 'text-align', 'center' ); |
The output would then be as follows.
|
1 2 3 |
#header:hover, #header:active{ text-align: center; } |
Removing Pseudo Classes
We could then revert the selector back to its original state without any pseudo classes by using the reset_selector_states() method, and then continue adding to the original selector.
|
1 |
$css->reset_selector_states(); |
Outputting Our CSS
After we’ve created all of our css, we can use the PHP CSS class’ css_output() method to display all of the css that we’ve created. Please note that this class was not intended to generate a ton of css code, so as of now the PHP CSS class will only output minified css.
|
1 2 3 |
<style><?php echo $css->css_output(); ?></style> // Print the css onto the page file_put_contents( 'style.css', $css->css_output() ); // Save the css to a separate file |
Future Plans For Development
With all of that said, there isn’t much more that this class was created to do, but I will continue adding special rules to it as I need them. I would encourage you to fork the PHP CSS class on github, and send some pull requests my way so that I can continue adding to it. Otherwise stay tuned for the next tutorial where I’ll show you how you can integrate this class into your next WordPress theme or plugin.
