翻译人员:意译为主。不当之處欢迎大家指正
译者说:近来一些国外的大牛分享自己站点的CSS,从中我们了解css相关技术的应用情况把握CSS的使用规范,今天翻译下分享嘚CodePen's希望能够给大家一些帮助。
从Mark Otto的和Ian Feather的哪里获得灵感我迫不及待地加入到这个活动中来谈谈我们在CodePen站点里是怎么怎么做的。
1.我们使用SCSS(CSS预处理器)
2.我们使用Autoprefixer(浏览器前缀兼容性工具)
4.专门弄个SCSS文件来显示文档文件夹
5.我们也有样式不过主要是为了好看
7.努力保证每一个页媔使用2-3个css
8.使用@mixin来做媒体查询,以便于我们能够随时关闭该功能
9.使用凝视是个好主意
11.我是用了“我们”这个词但事实上大部分时候不过“峩”而已
总是有人喜欢或者讨厌CSS预处理器。可是假设没有预处理器想在不论什么站点使用和维护变量将会变成天方夜谭。
假设你认为由於过度工具化将会丧失创造性我只能一笑了之。
坦率的讲全部主流预处理器(SASS、LESS、Stylus)都能够实现我的大部分需求。可是我由于良好嘚交流社区。以下列出SCSS的重要特征(根据重要程度排列):
它又增添了一些难以置信的功能(我都想象不到)
我差点儿不不考虑css属性和值嘚浏览器前缀问题,由于能够非常好的解决问题我尤其喜欢它在处理flexbox时的表现。
我曾经常常使用Compass可是我发现我用到的95%都来自CSS3 @minxins。相对于呮为了前缀到处使用@include我更喜欢使用和原生的CSS一样的写法。
我如今怀念Compass的一点是它的生成SVG渐变的能力可是……,只为了IE9须要的一些东西咜太大一点了所以我想我损失的不多。
比如我把这些放到视图中
它会在我须要的时候生成一个css
我们设置一个非常长的过期时间。每次峩们部署的时候它都通过改变这些乱码数字打破缓存,因此非常好的缓存配置。
本来也能够在CSS中这样做可是不是必需:
b.假设使用SASS解決问题。依赖关系更好比如$variables和@mixin都能够跨文件使用。
有个专门的SCSS文件只用来展示须要载入的CSS文件相当于一个文件夹,而不做不论什么实際的事情比如站点的global.scss就是这样的:
我努力遵守这些,可是也存在着大量的意外的情况我不得不把应该导入的这些东西都扔到一个文件里詓,所以我创建了一个shame文件(不大光彩的文件)来实现这个目的
像强迫症一样运行的规范
a.对属性和嵌套应用2个空白的缩进
b.选择器前后各加一個空白
c.每行一个声明(对于区分来说非常重要)
e.给结束符}一个相当于其选择器的缩进级别
f.0作为长度时。不加单位
g.使用连字符不用下划线
夶部分情况下我都会遵守的规范
非常相关的声明块之间不加空行
略微有点相关的声明块之间加一个空行
非常不相关的声明块之间加两个空荇
属性的顺序,相关的属性以经典组合出现还是随便。
在实际使用中我甚至不遵循自己写的。
我的理论是尽量给全部元素加入一个類,我不知道这点不是不是接近于SMACSSOOCSS,BEM或者诸如此类。
当然不是说我不再进行不论什么嵌套。或者强制规定能够嵌套几层我不过不進行深度嵌套。
一般来说我常常这样做:
这个时候我会想,我是否应该给h2一个类我是否应该把这样的类型的标题做成一个可重用组件。
然后我就不在意了由于以后假设它变得非常常常使用。我能够非常easy的改动
整体哲学是保持较低的特殊性。
由于不管多棒的可重用性它总是可能多次覆盖,因此选择器的特殊性越低越easy覆盖。并且这样的覆盖我们能够比較easy的再次覆盖不用走ID选择器或者!important这样的极端。
rem莋文字的单位px作其它单位,当然也有意外
我努力保证每一个页面载入2-3个css请求
尽量降低页面的请求数量,可是不至于说把全部的东西都放到一个文件里去CodePen有太多的单独页面CSS。假设都放到一块去global.css将不堪重负我没有试过。或许那一天试试也非常有意思起个名字叫做squiCSSh_it_real_good.
注意mixin頭部的语句“@if ($MQs == true) ”实现媒体查询功能的开启与关闭功能,在内容文件夹的scss文件头部声明一个变量$MQs(true或者false)控制开关由于CodePen里的一些页面须要響应式布局而还有一些页面不用。没有採用响应式布局的页面可能跳转到一个专门的移动端版本号中去
我是一个凝视自由主义者,主要昰由于我从不懊悔假设之后该凝视不够明朗、不太贴切,我会直接删掉该凝视
一共同拥有160个单独的SCSS文件。我从来不操心找不到文件甴于Sublime提供了强大的查询功能,并且文件具有命名清晰、结构明了
css文件不是影响性能的关键因素。自己定义字体四倍与它JS文件10倍与它。
站点由三个人合作开发CSS方面主要是我负责。
我没有创建本地资源地图不过由于我认为如今Sass/chrome不能非常好的支持
我没有一个真正的模式类庫。创建一个可视化的模式类库或许会非常棒
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。