css 类定义规范 |css 9宫格布局

css本地使用，css制作返回图标，css 支付密码输入，css文本上下边距，css表格显示只外边框，css里background透明度，css 9宫格布局 css 类定义规范 |css 9宫格布局

.class-name {
/* class定义的样式 */
}

首先，CSS规定类名必须使用英文字母、数字、横线-和下划线_来表示。除此之外的字符都是不允许出现的。为了提高统一性，建议在定义时使用小写字母，同时也可以使用驼峰式命名法。

.class-name {
/* 推荐使用 */
}
.className {
/* 驼峰式命名 */
}

其次，同一个类名不能重复出现，否则会造成样式冲突。除非特殊需要，否则应该保证页面上类名唯一。

/* 正确写法 */
.header {
/* 头部样式 */
}
/* 错误写法 */
.header {
/* 大标题样式 */
}
.header {
/* 小标题样式 */
}

另外，建议在类定义时不要出现冗余的样式，也就是说，不要在CSS中定义已经出现过的样式。如果需要使用已有的样式，应该通过继承或者使用标签选择器来实现。

/* 冗余的写法 */
.box {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: white;
}
/* 推荐的写法 */
.box {
width: 100%;
margin: 0 auto;
}
.white-box {
background-color: white;
}

最后，为了提高代码的可读性，建议在每个类定义的花括号后面留一个空格，同时在一些运算符和符号两侧也应该加上空格。

.box {
width: 100%;
margin: 0 auto;
}
.menu >li {
display: inline-block;
padding: 10px;
}
.button {
background-color: green;
color: white;
border: 1px solid black;
cursor: pointer;
}

通过规范的CSS类定义，可以使样式设计更加简洁、统一、易于维护。因此，无论是在团队协作中，还是个人开发中，都应该遵守良好的定义规范。