Dynamic CSS Vs Inline Issues in Code any Way around in a WordPress Themes?

One of my Developer has used this kind of Code to style –

<div class="progress-bar progress-bar-striped custom-color-progress" role="progressbar" aria-valuenow="<?php echo $percentage?>" aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $percentage * 100?>%"></div>

Bu few experts believes that this –

style="width:<?php echo $percentage * 100?>%" 

looks ultimately hard coded(or Inline CSS in Browser) and is not what one may look into the Professional themes.

Here is what my developers thinks –
Their is no other way round and this is the only way as their are various instances where CSS value is stored in a Database(or variable) through Theme Option Panel.

However when expert designer and Critique belive that their should be some better way around to avoid this inline CSS even though it is coming dynamically.

Solutions Collecting From Web of "Dynamic CSS Vs Inline Issues in Code any Way around in a WordPress Themes?"

Well another solution would be to use wp_add_inline_style() which affords you an opportunity to inject dynamic inline styles:

function my_custom_style() {

        get_template_directory_uri() . '/css/custom-style.css'

    //our customer percentage set by a user in some options panel
    $percentage = get_theme_mod('my-custom-percentage');

    $inline_style =<<<DOC

    .progress-bar {
        width: {$percentage}%;


    //inject our custom percentage after "custom-style.css"
    wp_add_inline_style( 'custom-style', $inline_style );


add_action('wp_enqueue_scripts', 'my_custom_style');

Aside from that, when a user changes settings in the backend it is also possible to generate a css file programmatically, storing it somewhere in the uploads directory and then dynamically enqueueing that file using wp_enqueue_scripts.

You can also hook onto wp_head and inject your styles that way too although probably not the best way, but here’s an example just for the sake of it:

function my_custom_style() {

    $percentage = get_theme_mod('my-custom-percentage');


    <style type="text/css">
        .progress-bar {
            width: <?php echo $percentage; ?>%;



add_action('wp_head', 'my_custom_style', 100);