前言
新一期的 “快问快答” 又跟大家见面了。魔法哥会在这个栏目中回答具有普遍性的网友提问,希望这些问答对你也有启发;如果你也想提问,直接在 “CSS魔法” 微信公众号内留言就可以了。
Q 微信网友 山人 提问:
魔法哥,我们的 CTO 想让我来主导公司平台的一个重构,让我给个技术方案。我初步的计划是不采取前后端分离的方式,因为前只有一个前端工程师,而且时间也是比较急。同时我也想了,就用 Gulp + RequireJS + jQuery + 自己原有的一些通用插件,因为能力只达到这个水平。现在就是我不是特别熟悉 Gulp 去构建基本的一个项目结构。我看了你公众号里的几篇文章,仍然不是特别明白,能不能再出一版比较详细完整而且还很通用的文章来分享看看?能带上源码是最好的了。
A 你的选择是合理的。选择适合自己团队的方案就好,不用赶时髦。
至于 Gulp,它只是用来管理构建任务——你需要什么任务,直接写出来就好了。Gulp 其实不会决定你的项目结构,而是你的技术选项决定了会有哪些 Gulp 构建任务。
关于代码示例,目前只有我写的几个开源项目(github.com/cssmagic)里面的 gulpfile 了。基本上还是用 Gulp 3 写的,比较简单,不一定对你有帮助。另外我确实打算写一篇 Gulp 4 实践指南,请继续关注公众号吧!
Q 微博网友 和薛之谦有关的昵称 提问:
你好,我想请教一个问题,怎样改变 radio 圆点的颜色?
A 对于 <input type="radio">
标签生成的单选框,它的样式通常是跟着系统主题走的。也就是说,在绝大多数浏览器中,这个控件并不是由浏览器自己绘制出来的。因此,浏览器往往只允许 CSS 控制它的尺寸,不允许改变它的样式。
在实践中,我们往往通过一些变通的方法来实现自定义外观的单选框。其中最为推荐的方案详见《CSS 揭秘》这本书第 149 页的 “自定义复选框” 一节。
Q 微博网友 黑子哲** 提问:
我开发响应式网站不想用框架,能用弹性布局 flex 写吗?还是用 flex 结合 Media Query 来写响应式?
A 建议以 flexbox 布局为主(用 flex-grow
或百分比来控制宽度),以 Media Query 为辅。更多细节可以参考《CSS 揭秘》这本书第 11 页的 “关于响应式网页设计” 段落。
另外建议在使用 flexbox 时留意浏览器兼容性。
Q 知乎网友 大馒** 提问:
对于非 CSS3 的书籍,还有必要阅读吗?
A 有必要。
简单来说,“CSS 3” 规范是在 CSS 2 的基础之上扩展而来的,并不是凭空另起一套;而且市面上以 “CSS 3” 为卖点的图书由于篇幅的限制,往往不会重复讲解 CSS 2 的内容。
更详细的解释可以参考《图灵访谈 CSS魔法:学海无涯,而吾生有涯》这篇文章。
Q 微信网友 mine 提问:
请问学习 Bootstrap 什么书籍比较好?看官网感觉不详细,没法系统地进行合理架构。
A 我感觉官方文档足够了。我买过一本书叫《Bootstrap 用户手册》,但感觉并不比官方文档更好 😂(原以为书里会介绍设计思想和开发经验,可惜并没有找到)。我建议你自己找个比较典型的页面,尝试用 Bootstrap 提供的组件拼装出来,写过几个页面之后就会有感觉了。
Q 微信网友 DJL箫氏 提问:
魔法哥,能把你写的 CSS 的代码给我看看吗,想知道你是怎么写的。
好的,最近在写 CMUI v2.0,回头把链接发给你参考一下。
不过 CMUI 是 CSS 框架,并不是业务代码,不一定是你想看的类型。关于如何用 CSS 写页面,我会专门制作教程的,请继续关注 “CSS魔法” 微信公众号哦!
Q 微信网友 中原 提问:
我最近在读您翻译的《CSS 揭秘》这本书,很有兴趣,也学到了很多东西。但感觉这本书是由一个一个的知识点组成的,并不系统,不知道是不是我的学习姿势不对,想请您给些建议。
A 我在去年的 CSS Conf 上向大家推荐这本书时,就强调了这本书是进阶教程,并不适合 CSS 初学者。因此我当时还推荐了另外两本书:《CSS 权威指南》和《精通 CSS》。
这两本书搭配着读,可以帮助初学者建立起系统的 CSS 知识体系。建议看完这两本书并且有了一定的实践经验之后,再来阅读《CSS 揭秘》。
Q 微博网友 miss-wrak**沙漠小** 提问:
魔法哥,推荐一本适合初学者学习 CSS 的书可以么?
A 参见上一个问题。如果必须限死一本,那就《精通 CSS》吧。
(题图作者:Karen Eliot @ Flickr)