php - 来自 CMS 的内联 CSS

Question

这个问题纯粹是出于好奇。我对代码的整洁度非常挑剔，我讨厌使用内联样式，但是我发现了一个用例，在这个用例中我看不出有什么方法可以不实现它们。

我正在我的 CMS 中构建一个部分，它允许用户创建具有大量自定义的多个页面部分，一个页面可能看起来像

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

目前我有 3 个数据库表，一个支持该部分的基本信息，例如媒体链接、标题、副标题等。另一个支持切换选项，例如溢出容器、水平/垂直对齐文本然后是第三个表，它存储有关该表特定值的信息，即在文本上设置的填充或自定义边距，或图像的缩放百分比。

现在，当我的页面加载时，我拉回每个部分的所有数据并遍历一个数组，使用 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>
     ';
}

我讨厌这段代码看起来多么困惑，而且我敢肯定，由于它增加了我的 HTML 文档的大小，因此存在一些相当大的性能缺陷，我还在某处读到它可能会导致缓存问题。

有人对我如何更有效地达到同样的结果有什么建议吗？

提前致谢。

Answer 1

这是自定义CMS中很常见的场景，你可以这样做:

将内联样式移动到内部工作表。例如这部分:

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

现在，在您的页面中，您可以像这样调用内部 CSS:

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

就是这样，更清晰的可重用代码。

此外，我注意到您在滥用 div ID。尝试使用类并确保正确关闭标签(在此示例中，我关闭了图像标签)