CSS规范
<p>[TOC]</p>
<h4>CSS预处理</h4>
<hr />
<p>各项目，统一 CSS 预处理程序为less。 优先，less , 然后 scss</p>
<p>预处理语法参考链接 [Sass]( <a href="https://sass.bootcss.com/documentation/variables">https://sass.bootcss.com/documentation/variables</a> "Sass")</p>
<h4>CSS属性书写顺序</h4>
<hr />
<ol>
<li>位置属性(position, top, right, z-index, display, float等)</li>
<li>大小(width, height, padding, margin)</li>
<li>文字系列(font, line-height, letter-spacing, color- text-align等)</li>
<li>背景(background, border等)</li>
<li>其他(animation, transition等)</li>
</ol>
<h4>CSS命名组合规范</h4>
<hr />
<p>css 命名规范，统一采用 BEM 规范。</p>
<p>BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。</p>
<p>BEM 简介：<a href="http://getbem.com/introduction/" title="http://getbem.com/introduction/"><a href="http://getbem.com/introduction/">http://getbem.com/introduction/</a></a></p>
<p><img src="http://10.10.200.26:9019/images/use/css/css.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/b08d79f3b1310586e54820ec076edecc" alt="" /></p>
<h6>SCSS 与 BEM 示例</h6>
<pre><code class="language-sass">.block {
/* CSS declarations for `.block` */
&__element {
/* CSS declarations for `.block__element` */
}
&--modifier {
/* CSS declarations for `.block--modifier` */
&__element {
/* CSS declarations for `.block--modifier__element` */
}
}
}</code></pre>
<h4>CSS常用命名</h4>
<hr />
<h6>页面结构</h6>
<ul>
<li>wrap：外套、包裹，用于最外层。</li>
<li>wrapper：外套，用于页面外围控制整体布局宽度。</li>
<li>box：盒子，容器。</li>
<li>header：头部，用于页头部分。</li>
<li>nav：导航，主导航。</li>
<li>main：主要区域，内容主体。</li>
<li>content/container：内容，内容容器。</li>
<li>sidebar：侧边栏。</li>
<li>footer：底部，用于页脚部分。
<h6>功能区块</h6></li>
<li>left center right：左中右。</li>
<li>main-left：左侧主要布局。</li>
<li>main-right：右侧主要布局。</li>
<li>logo：网站 LOGO 标志。</li>
<li>search：搜索输入框。</li>
<li>loginbar：登录条。</li>
<li>regsiter：注册模块。</li>
<li>banner：广告，用于横幅广告条。</li>
<li>menu：菜单。</li>
<li>submenu：子菜单，二级菜单。</li>
<li>top：顶部。</li>
<li>topnav：顶导航。</li>
<li>mainnav：主导航。</li>
<li>subnav：子导航，二级导航。</li>
<li>leftsideBar：左导航。</li>
<li>rightsideBar：右导航。</li>
<li>topbar：顶部工具/菜单。</li>
<li>bottom：底部。</li>
<li>bottombar：底部工具栏。</li>
<li>tool：工具条。</li>
<li>shop：功能区，如购物车、收银台。
<h6>其他常用命名</h6></li>
<li>title：栏目标题。</li>
<li>summary：摘要。</li>
<li>hot：热门热点信息，推荐。</li>
<li>msg：提示信息。</li>
<li>news：新闻。</li>
<li>list：列表，文章列表。</li>
<li>piclist：图片列表。</li>
<li>newslist：新闻列表。</li>
<li>search-output：搜索输出。</li>
<li>search-results：搜索结果。</li>
<li>drop/dropdown：下拉。</li>
<li>dropmenu/dorpdown-content：下拉菜单。</li>
<li>scroll：滚动。</li>
<li>homepage：首页。</li>
<li>subpage：子页面，二级页面。</li>
<li>tag：标签。</li>
<li>tab：标签页。</li>
<li>tips：小技巧。</li>
<li>ranking：排行。</li>
<li>vote：投票。</li>
<li>bth：按钮。</li>
<li>icon：图标。</li>
<li>arr/arrow：箭头。</li>
<li>status：状态。</li>
<li>note：注释。</li>
<li>skin：皮肤。</li>
<li>current：当前的。</li>
<li>active：活跃的，有效的。</li>
<li>download：下载。</li>
<li>friendLink：友情链接。</li>
<li>copyright：版权信息。</li>
<li>partner：合作伙伴。</li>
<li>joinus：加入我们。</li>
<li>sitemap：网站地图。</li>
<li>siteinfo：网站信息。</li>
<li>siteinfoLegar：法律声明。</li>
<li>announcement：公告。</li>
<li>guild：指南。</li>
<li>service：服务。</li>
<li>promotion：推广。</li>
<li>blog：博客。</li>
<li>forum：论坛。
<h6>产品相关命名</h6></li>
<li>keyword：关键词。</li>
<li>products：产品。</li>
<li>products-prices：产品价格。</li>
<li>products-description：产品描述。</li>
<li>products-review：产品评论。</li>
<li>editor-review：编辑评论。</li>
<li>news-products：最新产品。</li>
<li>publisher：生产商。</li>
<li>screenshot：缩略图。</li>
<li>faqs：常见问题。</li>
<li>barnding：商标。</li>
<li>pay：充值。</li>
<li>reputation：信誉。
<h6>常用的文件命名</h6></li>
<li>全局样式：global.css</li>
<li>布局结构：layout.css</li>
<li>基本共用：base.css</li>
<li>综合样式：style.css</li>
<li>主要的：master.css</li>
<li>模块：module.css</li>
<li>表单：forms.css</li>
<li>主题/网页换肤：themes.css</li>
<li>字体：font.css</li>
<li>打印：print.css</li>
<li>补丁：mend.css</li>
<li>私有样式/独立页面，根据实际情况，可以自定义命名 CSS 文件。</li>
<li>以上这些常用的文件命名，无需全部使用，根据实际情况，每个页面引用不超过 3 个 CSS 文件。
<h6>ID 和 Class 命名规范</h6></li>
<li>主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。</li>
<li>命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。</li>
<li>大多数情况下，命名都使用英文单词，可以增加代码的可读性，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰。</li>
<li>ID 和 Class 命名尽量全部都使用小写，多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头。</li>
<li>命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写</li>
</ul>