使用字符串(STRINGS)设置样式

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

本文由大漠根据simurai的《Styling with STRINGS》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处http://simurai.com/blog/2014/05/04/cssconf

——作者:simurai

——译者:大漠

今年在墨尔本(澳大利亚)举办的CSSConf中,我有一个主题需要演讲——"Styling With STRINGS"。该讲座主要介绍的是在组件中如何使用FlexboxcurrentColorem,在浏览器中快速实现Web应用程序所需要的风格。

特别提醒:原文提供了一个视频,不过需要翻。大家都懂的。

这里归纳了几个要点:

布局(Layout)

当你创建一个移动应用的布局时,并不是整个页面滑动,而只是某些部分。比如说,页面的头部和脚部是固定的,只是中间的主内容区域。并且页头,页脚和主内容区域都需要填充整个空间,那么最简单的方法就是使用Flexbox

使用字符串(STRINGS)设置样式

你可以使你的组件很具有伸缩性,而且很容易定位其元件(Flex Item)。使用flex:1;可以让组件收缩或填充整个可用空间。比较成功的例子就是搜索表单或标题的应用。

其实Flexbox是一个强大的CSS3特性,但在手机上的运用还是存在一定的差异。不过在将来的Web应用中会是一个主流的属性,也可以帮助大家更好的创建布局。如果您还未了解Flexbox这个特性,我强烈建议您花点时间阅读一下这方面的教程。——@大漠

颜色(Color)

如果你不明确指定border-color的值,那么他和color值将是一样:

使用字符串(STRINGS)设置样式

此外还有一个名为currentColor的颜色值。正如其名称所示,他是将当前颜色映射到元素相关属性上。我们可以将其做为background-color的值。此时,文本和背景颜色一样,文本无法阅读,这个属性值是没有什么太大用处的,但对于一些组件,没有文本时,这个值相当有用。例如下面的滑块:

使用字符串(STRINGS)设置样式

如果类似于iOS7这样的组件,应用了currentColor将是非常强大的。下面所有组件的颜色都使用了currentColor,此时我们只需要修改html根元素的color值,将会改变一切:

使用字符串(STRINGS)设置样式

尺寸(Size)

也可以用类似方法,使用em映射字体大小。因此使用em可以按一定的比例设置组件大小。我们可以使用font-size大小来控制这个比例。如果我们继承font-size大小,我们只需要在根元素或某个父元素上设置这个值。

使用字符串(STRINGS)设置样式

rem的工作原理是一样的,只不过他只是相对于根元素html。可以使用rem来控制组件的marginpadding,调整他们的间距。

我在写组件的一篇文章中对这方面做了详细的介绍。

有关于emrem相关的介绍,可以阅读早期写的教程《CSS中强大的EM》和《CSS3的REM设置字体大小》。——@大漠

结合在一起

现在我们在一个测试用例中结合这一切,我们很容易让设计做出变化。

使用字符串(STRINGS)设置样式

这是随意做的一个CSSConf App,你可以在GitHub上查看源代码。

怎么保存呢?

你可能想知道如何在开发工具中保存调好的代码,而不希望手动复制修改好的样式代码到你的文件中。在Chrome浏览器中有一个叫Workspaces功能。他可以将你的URL映射到本地文件目录中。一旦设置好之后,所有的CSS修改都会自动保存到你本地的目录中。详细的介绍,可以阅读有关于Workspaces功能的相关讨论。它建议你像使用Git一样,给他一个版本控制,可以让你随时放弃所做的修改。

类似于Workspaces相同的功能,可以阅读SourceMap相关的教程:《Source Maps 101》和《实战Sass3.3的Source Maps》。——@大漠

结论

当然在某种程度上,生产上有用和“hack”这是一步之差,特别像currentcolor。但我们主要要谈的是这一点:

"Creators need an immediate connection" — Bret Victor

我介绍的这些示例是最接近于我们只需单独使用CSS,仍然让代码保持整洁。我希望我们一直保持这样的原则,做得更好,并且不断的去改善他。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://simurai.com/blog/2014/05/04/cssconf/

中文译文:http://www.w3cplus.com/css/styling-with-strings.html

返回顶部