用注释组织CSS代码的最佳方法是什么？

Question

CSS专业人士，您对此有何看法？如果您认为这不是组织CSS代码的好方法，请告诉我组织CSS代码的最佳方法是什么。

/******* HEADER STYLES  *********/








/********* MAIN SECTION STYLES  ***********/













/********** FOOTER  ***************/











/*********** MEDIA QUERIES  **********/

Answer 1

这是一个非常主观的主题，但我很乐意考虑一下。每个人都在开发自己的组织代码风格，并且大多数人都具有地域性的（这个答案很可能会被那些仅仅< / em> 不同意 与我的偏好... _sigh _）

无论如何，大多数人更喜欢以下标准样式：

#someID{
    width: 200px;
    height: 50px;
}
#nutherID{
    width: 150px;
    height: 30px;
}

我希望将尽可能多的信息打包到最小的空间中。我认为，为什么要滚动六个屏幕以查看通常在一个屏幕上看到的信息量。 也许是我在笔记本电脑上完成的大部分工作所致。

#someID{width:200px;height:50px;border:1px solid red;}
#nutherID{text-align:center;color:blue;}

我像您一样将CSS分为几部分，但我也将页面分为divs / sections / everything。我希望能够快速找到所需的CSS部分。因此，如您在上面显示的，我的标签将是各节的描述（例如***** About *****，***** Some other section description *****等），但与您自己的想法相同，但细分较多。

我也有一些用于所有项目的标准css类，并将它们放在css文件的顶部，例如：

***** GLOBAL *****
*{position:relative;box-sizing:border-box;} /* Here come the down-votes... */
.bgBlack{background:black;}
.bgWheat{background:wheat;}
.taCenter{text-align:center;}
.taRight{text-align:right;}

最后，我喜欢使用缩进来显示嵌套：

.about-outer{width:100%;height:500px;}
    .about-inner{border:1px solid #ccc;}
        .about-inner p{font-size:1.3rem;}

我的$ 0.02 ...