Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

快问快答(第一期) #64

Open
cssmagic opened this Issue Aug 6, 2016 · 1 comment

Comments

Projects
None yet
2 participants
@cssmagic
Copy link
Owner

cssmagic commented Aug 6, 2016

快问快答(第一期)

前言

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

这便是创立 “快问快答” 这个栏目的初衷。希望这些问答能对你有所启示;如果你也想提问,直接在 “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 理解得比较透彻之后,再才去接触其他的。但是现在我啥都想去学,原来的目标坚持不下来。魔法哥,帮我理理吧,我到底该怎么去做?

A

基础的东西和时髦的东西…………

……

……


完整文章已收录到 “CSS魔法” 微信公众号,扫码立即订阅:

weixin-qrcode


© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

@hax

This comment has been minimized.

Copy link

hax commented Aug 8, 2016

写成一行还使得源码管理比较麻烦。比如diff,比如更大概率产生conflict。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.