CSS的指导方针

全站CSS

从MindTouch工具栏中，选择网站工具>控制面板>品牌>自定义网站的CSS．

有6个CSS字段，它们根据查看页面的用户有条件地加载CSS。

• 所有角色的CSS—所有用户类型。CSS或LESS输入到All Roles CSS部分，显示给每个用户，无论类型。
• 匿名的CSS-未登录MindTouch并匿名浏览网站的用户。
• 社区成员的CSS—以Community Members身份登录的用户。
• 箴成员CSS—以专业会员身份登录的用户。进入专业会员CSS部分将显示给除管理员以外的所有专业会员。
• 管理CSS—仅对管理员有效
• 遗留CSS的浏览器-使您的网站品牌遗留的浏览器．
  根据用户角色添加自定义CSS

CSS和少

自定义站点CSS支持常规CSS和少．

更少的优势:

• 扩展CSS中的默认功能。LESS语法与CSS相同，这意味着常规CSS将像以前一样工作。
• 因为LESS文件在作为有效的CSS提供给web浏览器之前被处理，所以可以在CSS代码中使用其他功能，如变量、mixin、规则集嵌套和函数。
• 使用变量，通过改变一个变量来改变网站上的所有颜色。
• 将语句嵌套在一起，重用代码，以及更多诸如将所有媒体查询嵌套在一个选择器中，而不是为每个屏幕大小需要做的每一次调整重复它。

CSS和更少的验证保存-为了避免使用LESS预处理器编译错误，在控制面板中提交的所有CSS或LESS代码在保存之前都会被验证。

更少的例子：将以下LESS变量添加到您选择的自定义CSS部分，以将站点的基础颜色从蓝色更改为橙色。

• 突出显示变量

  @highlight-color: # faa319;

• 之前
  
  

• 后
  
  

单个页面的CSS

在一个页面上操作用户界面通过MindTouch编辑器添加CSS．如果你只需要在一个页面上加载CSS，那么你就不应该在网站的其他页面上增加额外的加载时间。

单个特殊页面可能无法编辑以直接添加CSS，但每个特殊页面都包含一个注入到主体中的类，它列出了您所处的特殊页面。如果你需要在一个特殊的页面上设置样式，比如“/ special:Search”，插入类。在你想要的选择器之前进行哥伦比亚特殊搜索。是指的体类的完整列表。

订购和呈现

样式会根据你放置它们的位置以特定的顺序注入到你的代码中，从而相应地覆盖之前的样式，并尽可能地避免许多重要的项。

CSS编译的顺序(后面放置的东西将替换下面提到的图层样式):

1. 网络浏览器的基本样式(如Chrome, Firefox, Edge等)
2. CSS应用于单个页面
3. 默认MindTouch样式
4. CSS应用于控制面板

CSS的建议

不要对页眉、页脚或内容页眉等模板应用CSS。添加适当的体类使它只针对呈现的页面，并在您的所有角色的CSS字段，以描述代码应用的位置。此方法支持添加LESS，编译时不呈现注释，并最小化代码。

自定义站点CSS中的CSS层次结构示例

/* ===== FONTS ===== */ @default-font-family: "Helvetica Neue"， Helvetica, Arial, sans-serif;@primary-font-color: # 000;@heading-color: @primary-font-color;．．．/ * = = = = =颜色  ===== */ @ highlight-color: # 30 b3f6;．．．/* ===== BASE STYLES ===== */ body{}…/* ===== HOME PAGE ===== */ -如果你决定把它存储在这里，而不是单独的页面上，/* ===== HEADER ===== */…/* ===== CONTENT HEADER ===== */ -Should you decide you even want one of these /* ===== CONTENT SIDETRAY ===== */ -Should you decide you even want one of these /* ===== BODY ===== */…/* ===== CONTENT FOOTER ===== */ -如果你决定你甚至想要这些/* ===== FOOTER ===== */…

首选十六进制编码格式

• 小写(#fff， #b54c92，不是#fff)。
• 尽可能减少到三个字符(#fff，而不是#ffffff)。
• 用十六进制编码的颜色(#fff不是"white")。

首选间距格式

• 使用空格代替制表符(直接在控制面板中输入新数据时，制表符不起作用)。
  • 4空格= TAB
• 所有新编写的代码都应该用em、rem和%s来度量，而不是px或pt。
• 字体大小应该以百分比表示。
• 所有0的值，应该写成0，而不是0px, 0em，等等(例如填充:1.2em 0 0.5 em)
• 所有的背景、字体、填充和边距都应该尽可能地合并和减少。padding-left: 1 em;，padding-right 1 em;,padding-top1.2 em;应与填充:1.2em 1em 0;）．

首选CSS设置

• 在代码编辑工具中编写和编辑代码，然后将其移动到控制面板中。没有办法备份或撤销控制面板中的更改，因此使用另一个工具定期备份代码以进行更改控制，并帮助排除问题。
• 在一个单独的页面上写的所有CSS不应该包含在页面上的多个CSS块中，而是应该包含在页面顶部或底部的一个CSS块中。

嵌套技术

• 在Control面板中嵌套文章(使用LESS)时，尽量不要嵌套超过两层。超过两层可能会产生更多的压缩代码，但是通过选择器(Control/Command + F)或导航来找到代码就困难得多了。
• 不要仅仅因为它们使用相同的选择器就将它们嵌套在一起。如果一个snibbet只应用于内容头，不要与应该属于主页或常规头部分的代码组合，因为它们都可以应用于相同的基础选择器。
• 包括伪元素":hover"在内的所有选择器都应该包括body类"。为移动用户提供无触摸悬停效果的功能(例如，.elm-header div:徘徊应该是.no-touch .elm-header div:徘徊）．它需要与其他主体类(例如，.elm-user-pro-member div:徘徊应该是.no-touch。elm-user-pro-member div:徘徊）．
• 嵌套悬停应该写成:

.elm-header {.no-touch & div:hover{…} ｝

• 当在一个父选择器下嵌套子选择器和媒体查询时，要清楚地将它们分开。首先，输入父选择器的所有属性，然后输入所有子选择器和属性，然后是媒体查询。

.header-holder{/*父选择器属性第一个*/ margin: 0 auto 1.5em;text-align:中心;宽度:100%;/*所有子选择器*/ h4 {margin-top: .5em;} span {background-color: #fff;显示:inline-block;字体大小:85%;粗细:600;保证金:5 px 0;填充:0 30 px; text-transform: uppercase; } .line-spacer { background-color: #9a9a9a; height: 1px; margin-top: -1.5em; width: 100%; } /* All media queries afterwards (all grouped together) */ @media (min-width: 50em) { width: 83.3%; } @media (min-width: 65.25em) { width: 66%; } @media (min-width: 80em) { width: 58%; } }

按字母顺序排列每个类的每个属性的开头

• 不正确的:

font-size: 90%;margin-top: .7em;颜色:# 666;背景:无;边界:没有;｝

• 正确的:

Dd.mt-listing-detailed-subpages{背景:无;边界:没有;颜色:# 666;字体大小:90%;margin-top: .7em;｝