Inline CSS from CMS

Question

This question is purely out of curiosity. I am very picky over the neatness of my code and I hate using inline styles, however I have found a use case where I don't see any way to not implement them.

I am building a portion in my CMS which allows users to create multiple page sections with a lot of customisation, a page may look like

[    section A    ]    <--- Has an image, custom margins and padding set for content
[    section B    ]  
[    section C    ]    <--- custom margins and paddings set on this section

At the moment I have 3 database tables, one which supports basic information on the section such as a media link, title, subtitle etc. Another which supports toggle options such as bleeding the overflow of the container, aligning text horizontally/vertically and then a third table which stores information on specific values for that table, i.e. the padding or custom margins set on text, or the zoom %age of an image.

Right now, when my page loads I pull all the data back for each section and iterate through an array assigning the styles inline with my elements with PHP:

function build_left_section($section) {
// Echo the standard section piece
echo '<section class="section_wrapper section_overflow" style="background:'.$section['section_color'].'; height:'.$section['height'].'px">';
echo '<div class="content row">';
      $this->get_borders($section);
echo '
     <div id="left_col" class="image_column grid_6 ' . $this->get_width($section, 'left') . '">
        <img id="image" src="'. $section['media_link'] .'" alt="'. $section['tags'] .'" style="margin-left:'. $section['image_x'] .'%; margin-top:'. $section['image_y'] .'%; width:'. $section['image_zoom'] .'%;">
     </div>

     <div id="right_col" class="text_column grid_6 ' . $this->get_width($section, 'right') . '">
        <div class="text_move" style="margin-left:'.$section['text_x'].'%; margin-top:'.$section['text_y'].'%">
            <div class="text_wrap '.$this->get_text_alignment($section).'" style="padding-left:'.$section['text_padding'].'px; padding-right:'.$section['text_padding'].'px;">
                '.$this->get_text($section).'
            </div>
        </div>
     </div>
     ';
}

I hate how messy this code looks, and I'm sure there are some considerable performance drawbacks due to it bulking the size of my HTML doc, I also read somewhere that it may incur cache problems.

Does anybody have any suggestions on how I could achieve the same result more effectively?

Thanks in advance.

Instead of having infinite margins and paddings, could you have a set number of margin / padding options that could be set by changing classes in place of inline css. — misterManSam
– misterManSam, Commented Aug 22, 2014 at 20:47
@misterManSam that was one solution I proposed but it was rejected by my client. He needs the infinite scaling margins and image zooms so he can customise a section exactly how he wants too — Halfpint
– Halfpint, Commented Aug 22, 2014 at 20:48
This is where you tell your client that if he wants to customize every tiny little pixel, that he should go to school and learn how to become a web developer himself. — Michael
– Michael, Commented Aug 22, 2014 at 20:51
Just a comment on comments: anyone working on custom CMS based solutions (eg Wordpress themes) knows that this is pretty common and done every single day. As a matter of fact, it's the foundation of WordPress customizer — Devin
– Devin, Commented Aug 22, 2014 at 20:54

Devin · Accepted Answer · 2014-08-22 20:53:02Z

3

This is a very common scenario in custom CMS, you can do it like this:

Move your inline styles to an internal sheet. For example, this part:

<div id="left_col" class="image_column grid_6 ' . $this->get_width($section, 'left') . '">
        <img id="image" src="'. $section['media_link'] .'" alt="'. $section['tags'] .'" style="margin-left:'. $section['image_x'] .'%; margin-top:'. $section['image_y'] .'%; width:'. $section['image_zoom'] .'%;">
     </div>

becomes:

<div id="left_col" class="image_column grid_6 ' . $this->get_width($section, 'left') . '">
        <img class="my_image" src="'. $section['media_link'] .'" alt="'. $section['tags'] .'" />
     </div>

Now, in your page you can call the internal CSS like this:

margin-left:'. $section['image_x'] .'%; 
margin-top:'. $section['image_y'] .'%; 
width:'. $section['image_zoom'] .'%;"

and that's it, cleaner re-usable code.

Also, I have noticed you're abusing div IDs. Try to work with classes and be sure to close tags properly (in this sample, I closed the image tag)

answered Aug 22, 2014 at 20:53

Devin

7,7306 gold badges43 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Halfpint Over a year ago

Perfect, thanks fabio I'll try and implement that. As for the div ids they're something that slipped through my fingers. I know they should really only be used for binding js events to elements and classes should be used for styles :)

Collectives™ on Stack Overflow

Inline CSS from CMS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related