【整顿】18种引荐的CSS定名和誊写范例

2019年9月1日 177次阅读 来源: 果冻

选择器的定名范例

1.模块化定名

比方：

  • 与规划相干的款式以“g”为开首。如“g-content”和“g-header”；
  • 与挂钩相干的款式以“j”为开首。如“j-open”和“j-request”；
  • 与元件相干的款式以“m”为开首。如“m-dropMenu”和“m-slider”；
  • 与状况相干的款式以“s”为开首。如“s-current”和“s-selected”；
  • 与东西相干的款式以“u”为开首。如“u-clearfix”和“u-ellipsis”。

“东西”是指与营业逻辑解耦的，能够重用的款式；“元件”是指自定义的可重用且可移植的基础网页元素；“挂钩”是指供JavaScript支配的款式。

以上的申明只是举例，人人能够依据项目需求自定义开首的字符，如许做的目标是使CSS代码整齐易保护。

2.选择器皆为小写情势

引荐的写法：

.g-first-header
{
    line-height: 16px;
}

不引荐的写法：

.g-FirstHeader
{
    line-height: 16px;
}

3.每一个选择器独有一列

除末了一个选择器外，别的每一列选择器均以逗号末端。若用到兄弟元素选择器，则相干标记的摆布两头均留出一个半角空格。

引荐的写法：

.g-first-header,
.g-second-header-1 > .g-second-header-2
{
    border: 2px solid #C3C3C3;
}

不引荐的写法：

.g-first-header, .g-second-header-1>.g-second-header-2
{
    border: 2px solid #C3C3C3;
}

4.避开HTML标记

构建选择器时应只管采纳语义明白的种别称号，避开HTML标记，由于一旦HTML的构造发生更动，则与此对应的款式也就无效了。只管将款式与构造星散，如许会使得阶级式款式表在往后更容易被保护。

引荐的写法：

.g-content .g-item
{
    flex-basis: 20%;
}

不引荐的写法：

.g-content li
{
    flex-basis: 20%;
}

5.罕用ID

ID的唯一性必定了它所对应的元素的款式就是一次性的，没法重用，一旦HTML构造发生变化，套用ID的选择器就要随之修正。另一个主要的缘由是：ID的权重值是最高的，这能够会致使往后增添的款式没法复写本来的款式。

引荐的写法：

.g-special-content
{
    height: 100px;
    width: 300px;
}

不引荐的写法：

#special-content
{
    height: 100px;
    width: 300px;
}

属性的誊写范例

1.按递次分列属性

每条划定规矩下的属性在誊写时，应按种别举行分组，其分列递次以下：

  1. 位置：bottom、float、display、left、position、right、top和z-index等；
  2. 大小：height、margin、padding和width等；
  3. 版式：color、font、letter-spacing、line-height和text-align等；
  4. 背景：background等；
  5. 别的：animation和transition等。

2.缩写属性

有些属性是能够合在一块的，既精简代码，又便于浏览。

引荐的写法：

.test-selector-1
{
    padding: 3px 5px;
}

不引荐的写法：

.test-selector-1
{
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}

3.去除小数开首的0

引荐的写法：

.test-selector-2
{
    font-size: .5em;
}

不引荐的写法：

.test-selector-2
{
    font-size: 0.5em;
}

4.缩写十六进位值

引荐的写法：

.test-selector-3
{
    background-color: #0b0;
}

不引荐的写法：

.test-selector-3
{
    background-color: #00bb00;
}

5.合理运用引号

关于“font-family”属性来讲，我们一般会以引号夹住带有空格的字体称号，而关于不具备这些特性的平常字体来讲，引号存在与否并不影响页面的显现结果。为了保证视觉上的一致，最大水平相容种种浏览器，发起你在所有字体称号的两头均加上引号。

引荐的写法：

.test-selector-4
{
    font-family: "Microsoft YaHei", "微软正黑体", "\5b8b\4f53";
}

不引荐的写法：

.test-selector-4
{
    font-family: "Microsoft YaHei", 微软正黑体, \5b8b\4f53;
}

一般属性的值含有“url（）”字串，开发者须要往个中传入一个资本途径。请注重，在低版本的Internet Explorer中，途径中的空格有能够没法被辨识，致使资本没法被找到。为保险起见，不管途径中是不是含有空格，你传入的途径两头最好都加上引号。

引荐的写法：

.test-selector-5
{
    background-image: url(“../Images/BacPic.png”);
}

不引荐的写法：

.test-selector-5
{
    background-image: url(../Images/BackPic.png);
}

6.避开！important

“！important”会给往后的保护带来贫苦，使开发者难以查找款式题目。如果在誊写时发明新款式没法复写旧款式。一般有两个缘由：要么新款式写在了旧款式的前面，要么新款式对应的选择器的权重比旧款式的更低。针对后一种状况，只需增添新款式选择器的权重值就能够完整避开这个题目，无需用到“！important”。

引荐的写法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-6 .test-selector-7 .test-selector-8
{
    font-size: 14px;
}

不引荐的写法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}

.test-selector-8
{
    font-size: 14px !important;
}

7.范例解释

在单列解释中，星号与内容之间留一个半角空格。

引荐的写法：

/* 这是第一段解释笔墨。 */

// 这是第二段解释笔墨。

不引荐的写法：

/*这里是一段解释笔墨。*/

//这是第二段解释笔墨。

在多列解释中，多个星号要排成一条线。星号与内容之间一样留一个半角空格。

引荐的写法：

/**
 * 这里是一段解释笔墨。
 * 这是第二段解释笔墨。
 */

不引荐的写法：

/**
*这里是一段解释笔墨。
*这是第二段解释笔墨。
*/

在文档解释中，除了要根据多列解释的写法之外，还要用标识符来申明文档中的某一部份，标识符后的冒号右边与申明笔墨之间留一个半角空格。

引荐的写法：

/**

* @name: 文件名；

* @description: 形貌笔墨；

* @author: 张三、李四；

* @update: 2018年12月19日。

*/

不引荐的写法：

/**

* @name:文件名；

* @description:形貌笔墨；

* @author:张三、李四；

* @update:2018年12月19日。

*/

8.将规范属性置于底部

有些属性在部份浏览器中还没有完整规范化，每家浏览器开发商对这些属性的完成结果也许并不一致，因而现在须要在开首到场浏览器厂商的专有字符串。因而统一个属性须要写屡次，但有一条须要注重：将不带前置标记的属性置于最下方。

引荐的写法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}

不引荐的写法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
}

9.注重标点标记

每一个属性独有一列。紧接款式属性的冒号，其背面要留一个半角空格。值以分号末端。

引荐的写法：

.test-selector-10
{
    opacity: .5;
}

不引荐的写法：

.test-selector-10
{
    opacity:.5
}

10.款式块间留一空行

款式选择器及其款式块与方圆内容要保存一空行以防止内容过于拥堵，阻碍寻觅。

引荐的写法：

.test-selector-11
{
    opacity: 0.5;
}

.test-selector-12
{
    font-size: 16px;
}

.test-selector-13
{
    overflow: hidden;
}

不引荐的写法：

.test-selector-11
{
    opacity: 0.5;
}
.test-selector-12
{
    font-size: 16px;
}
.test-selector-13
{
    overflow: hidden;
}

11.将太长的内容折为多少列

统一属性的值不止一个或值太长时，以逗号支解这些值，每一个逗号后增添一个空格，太长的值能够另起一列。

引荐的写法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
}

不引荐的写法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);
}

12.避开CSS Hack

所谓“CSS Hack”，就是在款式表中到场少量特殊标记，让能够辨识差别标记的浏览器在统一个元素上计算出来的款式各不相同。涌现CSS Hack的缘由就在于老式的浏览器（诸如饱受诟病的Internet Explorer 6）对统一套款式表的计算结果与别的浏览器的并不相同，这就很有能够会形成版式上的紊乱。因而在过去，我们一般要针对一般奇异的浏览器撰写有针对性的CSS。如width: 300px; _width: 200px;对别的浏览器来讲，该选择器的宽度值应为300个像素，但IE 6能够辨识出底线，因而它计算出的宽度就是200个像素。

13.削减运用影响机能的属性

款式表中不要含有过量的滤镜表达式和repeat关键字等，这些属性会下降网页的衬着机能。若要反复背景图片，那末原图的宽高各不小于8px。

《【整顿】18种引荐的CSS定名和誊写范例》

    原文作者：果冻
    原文地址: https://segmentfault.com/a/1190000019268306
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞