Skip to content

Improve PHP-CSS compilation with static method #1

@brandonmcconnell

Description

@brandonmcconnell

I was evaluating /salient/blob/master/css/fonts.php and looking for means of simplification and uniformization in my own local environment. It appears most of these CSS styles can be rewritten much more simply using a static method.

Current method

<?php echo 'body, .toggle h3 a, .bar_graph li span strong, #search-results .result .title span, .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, body .nectar-love span, body .nectar-social .nectar-love .nectar-love-count
{'; ?>
  <?php if($options['body_font'] != '-') echo 'font-family:' . $options['body_font'] .';'; ?>
  <?php if($options['body_font_size'] != '-') echo 'font-size:' . $options['body_font_size'] .';'; ?>
  <?php if(!empty($line_height)) echo 'line-height:' . $line_height .';'; ?>
  <?php if(!empty($styles[0])) echo 'font-weight:' . $styles[0] .';'; ?>
  <?php if(!empty($styles[1])) echo 'font-style:' . $styles[1]; ?>
<?php echo '}'; ?>

Using static class method

CSS::echo('body, .toggle h3 a, .bar_graph li span strong, #search-results .result .title span, .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, body .nectar-love span, body .nectar-social .nectar-love .nectar-love-count', [
  'font-family' => [$options['body_font'] != '-', $options['body_font']],
  'font-size' => [$options['body_font_size'] != '-', $options['body_font_size']],
  'line-height' => $line_height,
  'font-weight' => $styles[0],
  'font-style' => $styles[1],
]);

The CSS class

Here is the CSS class I've set up which provides this method:

class CSS {
    static function echo($selector, $rules) {
        echo $selector . '{';
        if (is_array($rules) && count($rules)) {
            $i = 0;
            foreach ($rules as $property => $value) {
                $condition = false;
                if (is_array($value)) {
                    $condition = $value[0];
                    $value = $value[1];
                } else {
                    $condition = !empty($value);
                }
                if ($condition) {
                    if ($i++) echo ';';
                    echo $property . ':' . $value;
                }
            }
        }
        echo '}';
    }
}

The associative array keys are the unique names for the CSS properties. Similar to native CSS, if a property name is used more than once the final declaration is the one used. The associative array values are the values for those CSS properties. By default, if one of these values is an array, the first value is the boolean condition for whether or not to use the property. If instead of an array, a string or variable is provided for the value, the method uses the non-empty state of the string or variable as the condition, like this: $condition = !empty($value);.

When the condition is met, whether specified explicitly as the first element in the value array or by the string or variable provided not being emptied, the property and value are printed. Otherwise, the property is skipped, as the original logic did. The method only adds a semicolon after all but the last CSS property, for the sake of modification.

Here is the complete /salient/blob/master/css/fonts.php file before and after using this class:

Before: fonts.php.txt
After: fonts_css-class.php.txt

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions