如何写出完美的CSS

发布时间：2023-05-12

一、选择合适的选择器

在写CSS时，选择器的选择非常重要。选择器的精细度越高，匹配的元素就越准确，渲染时也会更快。一些实用的选择器如下：

/* 对元素类型进行选择 */
p {}
/* 对类进行选择 */
.class {}
/* 对id进行选择 */
#id {}
/* 选择某些特定的元素 */
[element="value"] {}
/* 选择特定状态的元素 */
:visited {}
/* 选择继承了某个class的元素 */
.class p {}
/* 选择嵌套在某个元素内部的元素 */
.parent > .child {}
/* 选择同级的相邻兄弟元素 */
.prev + .next {}

二、使用优雅的CSS命名规范

在为CSS选择器命名时，建议采用活动依据和代码语义相关的名称。命名原则要准确而清晰，语义化易于理解，易于扩展，简洁有力。 以下是一个合理的CSS命名规范的示例：

/* 常规样式 */
.container {}
/* 全局共享样式 */
.global {}
/* 模块化样式 */
.module {}
/* 特定场景下的样式 */
.basics-page {}
.signin-page {}
.signup-page {}
/* BEM命名法 */
.block {}
.block__element {}
.block--modifier {}
.basics {}
.basics__list {}
.basics__list--active {}

三、避免使用!important

在CSS中，!important是一个非常强大的命令，但同时也是一个非常危险的命令。在代码中使用!important可以强制应用该样式，它可以修改继承的样式，以及其他的任何规则。这使得样式的优先级变得混乱，增加调试难度。

四、尽可能使用定值

在CSS中，使用繁琐的百分比、em、rem等单位进行布局往往会带来很多不必要的麻烦，使用固定值进行布局可以降低维护成本，并且更易于理解和实现。

.container {
    width: 960px;
    margin: 0 auto;
}

五、优化CSS代码

写出优雅的代码可以提高阅读和维护代码的效率。特别是在大型项目中，组织CSS代码以便可读性和可维护性更高，更加注重代码的重用性和可扩展性。

/* 错误的示范： */
.container p {
    margin: 10px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}
/* 正确的示范： */
p {
    margin: 10px;
    font: 14px/1.5 #666;
}
.container p {
    color: #333;
}

六、使用有效的CSS注释

注释是避免混淆和失误的重要工具，在CSS中注释的作用一样重要，有助于代码的管理和维护。 以下是一个有效的CSS注释示例：

/* Basic Heading styles */
h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
}
/* Subheading styles */
h2 {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 10px;
}
/* Article Body styles */
.article {
    padding-right: 20px;
}

七、使用可维护性高的CSS框架

使用CSS框架，可以提高CSS代码的开发速度和代码质量。一些知名的框架如下：

推荐文章