关于CSS3 @font-face 中local('☺')的意思

html-css011

这其实是一个规避异常情况写法,因为浏览器默认会首先检测用户的系统字体是否有和 @font-face 声明的字体同名的字体,如果有就是优先使用系统字体,由于 @font-face 通常是开发者自定义生成的字体,可能和系统字体有差异,所以可以使用 src: local('☺') 来规避,因为 OpenType 协议规定字体名字中含有双字节 unicode 字符会被视作非法,所以这个笑脸就是用来让浏览器不匹配到任何系统字体,从而规避 @font-face 字体可能和系统字体重名而造成的问题

由于CSS的规则是全局性的,添加任何一个样式,在全局都有效,优点是方便复用,缺点是会根据 权重的计算 造成样式冲突,非常难以管理。

有了钉子,自然就会有锤子。随着前端的发展出现了各种CSS模块解决方案,主要分两种:

一类是采用JS或者JSON 的方式写CSS,比如 jsxstyle , react-style ,虽然可以采用JS成熟方案来管理css, 但是它无法使用postcss ,sass等css预处理器,并且衍生了大批的api, 使用的代价较大。

另一类还是采用css 来写样式, 不过是通过工具生成CSS作用域的方式实现模块化,比如CSS module。常用的BEM命名技巧或者团队中约定的方案来实现命名空间从而实现模块化,不过约定总会出现问题,于是就出现了通过工具,比如webpack的css-loader根据算法,实现css 模块化。

webpack 内置的 css-loader 自带了CSS modoule, 配置如下:

create-react-app 2.0以上的版本中内置启动了CSS module, 如果需要特殊配置,则需要eject操作, 在webpack.config.js 中:

CSS module 默认采用局部样式,即给每个css 名添加上了“:local”, 对应的全局性的写法:

compose 组合样式:

对于样式复用,CSS module提供了唯一的方式 "compose":

多CSS class 的写法:

Sass 变量与JS共享

Css module 作者建议:

1.不使用选择器,只使用 class 名来定义样式

2.不层叠多个 class,只使用一个 class 把所有样式定义好

3.不嵌套

4.使用 composes 组合来实现复用

采用 classnames 来增强CSS module 在react 中的使用,类似Angular 中的样式指令:

参考链接: https://zhuanlan.zhihu.com/p/20495964