我的CSS非常庞大.使用ModX,我可以将CSS分成几部分吗？

Question

我有几个大的CSS文件,并且进行更改有时可能需要几分钟才能找到正确的选择器进行更改.我想它如果有一个很好的ModX编辑器的CSS,但我找不到一个.只要我的网站仍然呈现,我愿意满足于将我的文件分成几部分.我可以这样做吗？如果有一个很好的编辑器(插件？),我在哪里可以找到一个？

Answer 1

我想真正的问题是你可以接受哪种零件.如果您关注此问题,则可以开始允许ModX管理CSS的过程.一旦发生这种情况,您的选择就会大打开 根据您对ModX的专业水平,您的CSS编辑将变得更容易,更省时.这个答案非常简单,因为它将简单地显示如何将给定的选择器添加为资源.但是,从这里可以直观地了解其他进一步的发展.

CSS作为资源

一旦您的CSS作为资源进行管理(大约需要15分钟),您可以使用模板,模板变量,块,片段和插件.这实际上非常惊人,但设置可能有点痛苦.你基本上会投入一些时间来节省很多时间.下一个合乎逻辑的步骤是相应地拆分选择器,但您不想破坏当前的工作.对getResources插件有一个流畅的了解对于进一步开发至关重要.

怎么做:

1.创建一个新块

单击Elements选项卡,然后单击"New Chunk".将其命名为"css-selector".将内容设置为:

[[+pagetitle]] {[[+content]]}

就这么简单.别忘了点击"保存"!这将允许您将选择器设置为资源.它将使用选择器的标题和规则的内容.您可以忘记使用这些大括号了.你的新组块将从现在开始处理这些问题.

2.调整模板

现在,我们只需要说服模板它知道如何阅读部件,以及不忘记整体.打开CSS样式表模板([[*content]]为其内容说明的模板).调整代码,使其具有以下内容:

[[!getResources?
  &parent=`[[*id]]`
  &depth=`1`
  &tpl=`css-selector`
  &includeContent=`1`
  &sortby=`menuindex`
  &sortdir=`ASC`
  &limit=`99`
]]
[[*content]]

再次单击"保存".让我快速解释一下这个模板吧.如果您有孩子,他们将首先根据他们的菜单索引进行渲染.此外,它将在之后呈现非儿童文档的内容.这将允许您仅为最重要的选择器创建新资源,同时保留主资源中永远不会更改的内容.

3.创建一个新模板

这样你的选择器就不会做任何有趣的事情而只是渲染内容.创建一个名为"CSS Selector"的新模板.将其内容设置为:

[[*content]]

4.创建一个新资源

创建一个新资源.将标题设置为要管理的css语句的选择器.然后将内容设置为没有大括号的规则.例如,如果您的css语句是:div#header .logo {border:0;},您将标题设置为div#header .logo和内容设置为border:0;.将资源别名设置为您想要的任何内容.我为每一个使用数字.将模板设置为新的"CSS Selector".重要现在,将父文档设置为样式表.单击保存.

5.测试样式表

首先,右键单击新资源,然后选择"查看资源".这只会确保语句正确呈现.它应该简单地用CSS格式说出你的规则.

接下来,右键单击样式表资源,然后选择"查看资源".您应该看到顶部的选择器和它下面的所有其他规则.

最后的考虑因素

意见

• 您会注意到您的子资源不必更改为文档类型的"CSS".只有父样式表必须是.随着您对ModX的专业知识的增长,这可以提供一些巧妙的东西.

• 您只需更改规则的菜单索引即可更改规则的顺序.

• 可以通过这种方式完成的规则​​数量取决于模板中语句中的&limit变量getResources.&limit适用于每个样式表,因此在此示例中,每个样式表有99个语句,这些语句可能是单独的资源.

关于服务器负载的说明

这将在资源数量增加时将负载放在服务器上.对于开发,请在getResources语句中保留"不缓存标志"(!).完成后,删除感叹号并将其全部缓存.这将节省大量的负载.

进一步的发展

• 我添加了一个isEnabled模板变量,因此我可以打开和关闭每个规则,因为我很高兴.
• 您可能会开始使用FormIt在前端管理您的CSS.
• 自定义管理器页面甚至可能是更好的选择.
• 进一步的抽象可能允许您创建语句分组以进一步组织.