转载

快问快答（第一期）

前言

经常有网友给我留言，咨询问题或寻求建议。我发现很多朋友的疑惑其实是共通的。于是我想，如果把这些问答整理出来让更多的人看到，应该能发挥更大的价值吧！

这便是创立 “快问快答” 这个栏目的初衷。希望这些问答能对你有所启示；如果你也想提问，直接在 “CSS魔法” 微信公众号内留言就可以了。

以下就是 “快问快答” 第一期的问答精选。

技术答疑

Q

图灵社区网友 DearLin** 提问：

为什么看到有的前端工程师将每条 CSS 规则写成一行？如果中间要写注释，混在一行里，那岂不是不优雅了！

A

写成一行的优点是可以减少代码行数，甚至可以把选择符根据结构的层级关系写成缩进的形式；但缺点就是不易阅读，为单条声明写注释也很尴尬（如下代码所示）。

.nav {margin: auto /* 水平居中 */; width: 1000px; color: #333}
    .nav li {float: left /* 水平排列 */; width: 100px;}
        .nav li a {display: block; text-decoration: none}

我自己的选择是让每条声明独占一行，借助 IDE 的代码折叠功能和结构概览功能，行数再多也不是问题；同时得益于 CSS 预处理语言，结构的层级关系也很容易表达；另外，利用预处理器把 CSS 文件拆成小模块，单文件的行数其实并不会太多。（如下代码采用 Stylus 作为 CSS 预处理语言。）

.nav
    margin: auto  // 水平居中
    width: 1000px
    color: #333
    li
        float: left  // 水平排列
        width: 100px
        a
            display: block
            text-decoration: none

Q

微博网友冷_** 提问：

您好，CSS魔法，我遇到一个问题：Chrome 浏览器不支持小于 12px 的字体，请问如何解决？目前我查到两种解决方法，一种是使用 -webkit-text-size-adjust: none; ，但是这个属性在我的浏览器里显示语法错误，有人说高版本 Chrome 已经没有这个属性了；第二个方法，使用 transform scale 进行缩放，但是这个方法感觉不好。请问有没有其他方法？感谢你能回复我。

A

抱歉，我所知道的方法大体也就是这几种。当然你还可以通过 Viewport 来设置整个页面的缩放，但所有元素在设置尺寸时都需要经过换算，这就比较麻烦了。

Chrome 禁用小于 12px 的文本是出于可读性考虑，我也不建议在网页上使用更小的字体。

前端学习建议

Q

图灵社区网友 DearLin** 提问：

CSS 基础熟悉了，如果要想进阶学习实战，要如何把握学习的方向呢？

A

如果感觉 CSS 基础学习得差不多了，接下来就是实践和思考了。大量实践、反复思考，这两者缺一不可。我遇到很多同学在 CSS 方面进展缓慢，无非是两种情况：手动得少，或者脑动得少。

看书会有一定帮助，比如《CSS 揭秘》这本书可谓进阶指南。需要注意的是，要关注作者的思考路径，而不单单是解决方案本身。

Q

微信网友李彪（在校大学生）提问：

魔法哥，JS 应该如何学起啊？或是该看些啥？

A

对于零基础的初学者来说，我建议先从 jQuery 这样易用的类库开始上手。可以先跟着教程做一些小案例出来，培养兴趣和编码的感觉。但不应满足于这个阶段。

接下来需要系统学习 JS 基础知识，推荐《JavaScript 高级程序设计》和《JavaScript DOM 编程艺术》这两本书。

Q

微信网友 mine 提问：

请问学习 jQuery 看哪些书比较好？

A

《锋利的 jQuery》口碑挺好的，我有时也拿它作参考。

Q

微信网友 黄泽夏 提问：

魔法哥，到这个阶段，我脑子都懵了，不知道自己的前端道路该怎么走。感觉前端的东西太多了，眼前的东西还没弄清，新的东西又出来了。我感觉自己对于原生的 JS 还没弄得太明白，但在一些技术群里面看到他们在聊一些我从来没有接触过的东西，就着急想去学，结果现在啥都没学到。我给自己定的目标是先把 CSS 和 JS 理解得比较透彻之后，再才去接触其他的。但是现在我啥都想去学，原来的目标坚持不下来。魔法哥，帮我理理吧，我到底该怎么去做？