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

10个最致命的CSS错误

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

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

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

<body>
<div class="container">
<div class="main-content">
<div class="blog-row">
<div class="blog-col">
<section>
<article>
<a href="#">This link is not bold</a>
<p><a href="#" class="bold">This link is bold</a></p>
</article>
</section>
<section>
<a href="#">This link is not bold</a>
</section>
</div>
</div>
</div>
</div>
</body>
body .container .main-content .blog-row .blog-col section article p a {
font-weight: bold;
}
body {
.container{
.main-content{
.blog-row{
.blog-col{
section{
article{
p{
a{
font-weight: bold;
}
}
}
}
}
}
}
}
}
.bold {
font-weight: bold;
}

编写HTML时忽略SEO

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

<article>
<h1>My cool blog post</h1>
<p>This blog is so cool!</p>
</article>
<footer>
<h1>Contact Us</h1>
<p>Tel: 867-5309</p>
</footer>

使用px单位

使用px单位并不是一个错误,但要看使用的场景。真正的错误是使用绝对单位而不是相对单位

// 不好的用法
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}
// 好的用法
body {
font-size: 16px;
}
p {
font-size: 1rem;
line-height: 1.25;
margin-bottom: 0.5em;
}

试图实现“像素级”的完美设计

中断文档流

CSS的棘手之处在于使用不同的CSS代码可以实现相同的视觉效果。例如,要将页面上的元素水平垂直居中,可以有很多种方式,使用任何一处都可以让你的用户看到相同的效果。

不将设计和布局分离

CSS的任务是提供样式,HTML的任务是提供结构。通常,你应该首先以捕获页面信息结构层次的方式编写HTML。即:

// 不好的示例
.article {
display: inline-block;
width: 50%;
margin-bottom: 1em;
font-family: sans-serif;
border-radius: 1rem;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
}
.sidebar {
width: 25%;
margin-left: 5px;
}
<div class="article"></div>
<div class="article sidebar"></div>
// 好的示例
/* Layout */
.article, .sidebar {
display: inline-block;
}
.article {
width: 50%;
margin-bottom: 1em;
}
.sidebar {
width: 25%;
margin-left: 5px;
}
/* Lipstick */
.card {
font-family: sans-serif;
border-radius: 1rem;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
}
<div class="article card"></div>
<div class="sidebar card"></div>

移动先行

随着移动终端的普及率的提高,移动网站(或应用)成为主流。很多人开始提“移动第一”,在提这个理念的时候也意味着桌面(PC端)是二等公民。相反,“移动优先”的拥护者则表现出相反的行为,他们首先为桌面编写代码,然后试图将网站塞进移动端。他们使用@media来处理移动端设备上的异常,但实际情况是桌面端才应该是异常

//不好的做法
.container {
width: 980px;
padding: 1em;
}
@media (max-width: 979px) {
.container {
width: 100%;
padding: 0.5em;
}
}
// 好的做法
.container {
width: 100%;
max-width: 980px;
padding: 0.5em;
}
@media (min-width: 980px) {
.container {
padding: 1em;
}
}

没有使用命名方案

不阅读文档

这看起来似乎很简单。比如说使用Bootstrap,很多同学认为只要安装了就可以了。不幸的是,如果你不真正理解CSS框架(CSS Framework),并且不小心违背了它的原则,那么它常常会导致比引用它来解决问题更多的问题出现。无论你使用的是Bootstrap、Material Design、Foundation等开源设计系统,还是你自己团队开发的设计系统。

没有按照计划系统地学习CSS

使用backdrop-filter实现磨砂玻璃效果

HTML的output元素

或许很多人听过input元素,但对于output元素听说过的应该很少吧。

<form oninput="added.value=parseInt(i1.value)+parseInt(i2.value)">
<input type="number" min="0" name="i1" value="0"> +
<input type="number" min="0" name="i2" value="0"> =
<output name="added">0</output>
</form>

你所不知道的:not()

在《初探CSS 选择器Level 4》一文中有详细介绍过:not()这个函数伪类的使用。

body:not(.home):not(.away):not(.page-50) {}

从字符串中删除最后一个字符

JavaScript中从字符串中删除最后一个字符的两种方法:

// 使用`slice`
let input = "w3cplus.com"
function removeLastCharacter(str){
let charcter_arr = str.split('');
return charcter_arr.slice(0, charcter_arr.length - 1).join('');
}
let output = removeLastCharacter(input);
console.log(`Output is ${output}`); // => Output is w3cplus.co
// 使用substring方法
let input = "w3cplus.com"
function removeLastCharacter(str){
return str.substring(0, str.length - 1);
}
let output = removeLastCharacter(input);
console.log(`Output is ${output}`); // => Output is w3cplus.co

几张动图帮你更好的理解CSS Grid中的几个属性

这两年有关于CSS Grid Layout的相关讨论在社区中非常的火爆。强大到只需要添加一行代码就可以实现响应式的布局(一些特定场景)。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
<!-- HTML -->
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
// CSS
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
.container {  
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
.container {  
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
.container {  
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
.container {  
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}

小结

文章围绕@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》进行展开。在Chrome78开始可以使用backdrop-filter实现磨砂玻璃的效果,HTML新增的output元素可以用来表示应用程序执行的计算结果或用户操作的结果;CSS的:not()虽然没有逻辑符来,但可以通过多操作符来组合,达到类似逻辑组合的效果。最后使用@Per制作的几张Gif图简单粗暴的告诉大家如何使用CSS Grid Layout中的repeat()frauto-fitminmax(),从而使用一行代码达到响应式的效果。常用于列表布局的场景中。

“大漠”,w3cplus.com 创始人。前端码畜,专业搬运工

“大漠”,w3cplus.com 创始人。前端码畜,专业搬运工