Web技巧（16）

上个周末因为自己要写PPT而没来得急整理，所以又错过了一期。在这一期中，大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这里面的一些观点虽然不完全对，但还是有相应的参考价值，取舍由大家自己来决定。如果你在这方面也有相关的经验，也欢迎在下面的评论中分享。另外在后面会简单的整理几个最近觉得有意思的新东西。感兴趣的同学，请继续往下阅读。

10个最致命的CSS错误

多年来，很多工程师在使用CSS时容易犯一些常见的错误，不管是老司机还是新手。而CSS一直又是简单但不容易的语言（不直观和难以使用），真正探究的并不多，而很多常见的错误又往往会阻碍项目的开发进程。如果我们在编写CSS的时候就能避免这些错误，是不是在实际开发的时候能事半功倍。

以下是编写CSS中常见的10个错误，也是最致命的错误。

接下来的10条内容来自于@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》一文。

编写选择器时太过遵循DOM结构

有一些开发人员喜欢追求一种极简主义的风格，他们试图着不在HTML中有大量的类名（class），通过使用DOM结构来作为CSS的选择器，这样他们的选择器就会遵循DOM树的结构。比如有这么一个DOM结构：

    

        

            

                

                    

                        

                            This link is not bold
                            
This link is bold
                        
                    
                    

                        This link is not bold
                    
                
            
        
    

复制代码

有些同学在给a链接添加样式的时候，会这样的操作：

body .container .main-content .blog-row .blog-col section article p a {
    font-weight: bold;
}
复制代码

就算是在使用CSS处理器的时候也无限级的嵌套，经如：

body {
    .container{
        .main-content{
            .blog-row{
                .blog-col{
                    section{
                        article{
                            p{
                                a{
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
复制代码

特别是在CSS的处理器中，不要说是新手，很多老司机也会出现类似上面这样的错误。

虽然在编写HTML结构的时候，很多司机也提倡DOM结构能简洁就尽量的简洁，但并不是提倡这种无约束的极简主义。因为这种极简主义虽然保持了HTML的干净，但会让CSS变得混乱，使其更难理解、调试和更改。就如上面的示例所示，CSS会变得不灵活，因为长组合的CSS选择器承担了复制HTML结构的任务，但这有背于CSS应该做的事情。

CSS的任务是提供样式；HTML的任务是提供结构。这也是Web构建中最基本的原则之一。如果仅仅追求DOM简洁干净，而忽略CSS，不考虑与CSS相互结合，这是错误的一种做法。另外这种编写CSS的方式强度依赖于HTML的DOM结构树，也会造成很多致命性的错误，比如说，你的HTML结构做出调整，那么CSS选择器也将做调整，而这种长链条的组合是最易于出错的。这种做法也在无形中增加很多不必要的工作。

相反，我更建议CSS的类和HTML的DOM更应该合理的结合起来。如果你需要从页面中选择一个特定的元素，应该在该元素上添加一个类名来完成：

.bold {
    font-weight: bold;
}
复制代码

就算是你要使用这种长组合的方式来定位到DOM元素，我也强烈建议：

CSS的选择器不超过三级。

幸运的是，现在有很多方式可以帮助我们避免这种方式，比如借助StyleLint来监控你的CSS代码，让选择器不超三级嵌套。也可以使用CSS-in-JS和CSS Modules方式来维护你的CSS代码。特别今天（截至2019年），这种方式更被广泛的采用。

如果你对CSS-in-JS和CSS Modules感兴趣的话，我建议你花点时间阅读下面的相关文章：

• React中CSS Modules的使用
• Vue中的作用域CSS和CSS模块的差异
• PostCSS-modules: 让CSS变得更强大
• React中编写CSS的姿势

话说回来，我们在项目中应该避免目标过于明确或指定过多的选择器，并且要避免使用!important。CSS权重的对比让我们更直观地了解为什么选择器器权重过大是不好的。如果选择器权重过大，它会更易被采用，如果我们想要通过另一个选择器来覆盖它，就需要一个权重更大的选择器。这也是令很多同学在覆盖样式时感到痛苦之处。

CSS选择器权重的争夺战是一直存在你的CSS中，这也是令很多老司机和新手痛苦之处。如果你是新手，那么掌握CSS选择器权重是的计算是非常有必要的：

• CSS 选择器
• CSS Specificity: Things You Should Know【译文】
• The Definitive Guide to CSS Cascading and Specificity
• CSS Specificity

说到CSS选择器权重之争，我又要上@Elijah Manor

如果上图还无法让你整明白CSS选择器权重的计算，那么下面这个计算器就可以帮助你更好的理解：

编写HTML时忽略SEO

搜索引擎优化（SEO）不仅仅是你完成编码后交给营销团队来处理。我们在编码的时候就需要考虑到SEO的内容，特别是因为一些影响SEO的因素。因为影响SEO因素一旦产生，那么后续要优化的难度就会更大。比如网站的URL Scheme或服务体系结构。

众所周知，HTML的语义化标签是影响SEO的因素之一，因为标签的选择会影响搜索引擎对内容的理解和排名。如果你想显示在搜索结果的顶部附近，那么就得选择正确的标签。

假设你正在写一篇关于CSS教程的文章。你可以把所有内容都放在一个

中，然而

是一个通用的非语义的标签，它不包含内容中的任何内在的含义。相反，你应该选择一个更具体的语义标签，例如

来包含文章的内容，

来包含到跳转到其他文章的链接。

选择更具体的语义标签而不是一般非语义标签的好处是，你可以向搜索引擎提供关于你的网站更多的信息，这样一来，搜索引擎的爬虫能更好的理解和交付与读者的搜索查询相关的内容。

例如，用于文章标题的HTML标签，它有六个潜在的标题标签，按最重要的标题到最不重要的标题的顺序排列h1~h6（数值越小，表示越重要）。

是你最重要的标题，因为它是一个特殊的信号，搜索引擎会把这个理解为你内容的标题或者页面的标题（