欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CodePen's CSS_html/css_WEB-ITnose

程序员文章站 2022-05-19 12:46:42
...
前端开发whqet,csdn,王海庆,whqet,前端开发专家

翻译自:CodePen's CSS

翻译人员:前端开发whqet,意译为主,不当之处欢迎大家指正。

译者说:近来一些国外的大牛分享自己网站的CSS,从中我们了解css相关技术的应用情况,把握CSS的使用规范,今天翻译下Chris Coyier 分享的CodePen's,希望可以给大家一些帮助。

------------------------------------------------------------

从Mark Otto的GitHub's CSS和Ian Feather的Lonely Planet's CSS哪里获得灵感,我迫不及待地加入到这个活动中来谈谈我们在CodePen网站里是怎么怎么做的。

概览

1.我们使用SCSS(CSS预处理器)

2.我们使用Autoprefixer(浏览器前缀兼容性工具)

3.我们使用the Rails Asset Pipeline(JS、CSS压缩工具)

4.专门弄个SCSS文件来显示文档目录

5.我们也有样式,当主要是为了好看

6.我们不适用任何特殊的架构,除了“use classes a bunch ”之外

7.努力保证每个页面使用2-3个css

8.使用@mixin来做媒体查询,以便于我们可以随时关闭该功能

9.使用注释是个好主意

10.一些统计

11.我是用了我们这个词,但其实大部分时候只是我而已

12.我们可能的未来


预处理器

总是有人喜欢或者讨厌CSS预处理器,但是如果没有预处理器,你想在任何网站使用和维护变量将会变成天方夜谭。如果你觉得因为过渡工具化将会丧失创造性,我只能一笑了之。

坦率的讲,所有主流预处理器(SASS、LESS、Stylus)都能够实现我的大部分需求,但是我更喜欢SCSS,因为良好的交流社区。下面列出SCSS的有用程度列表:

a.@import

b.@mixin

c.nesting

d.variables

e.@extend

f.math

g.loops

h.working with them enough so I understand all the cool kid demos

它又增添了一些难以置信的功能(我都想象不到)。

前缀处理

我几乎不不考虑css属性和值的浏览器前缀问题,因为Autoprefixer可以很好的解决这个问题,我尤其喜欢它在处理flexbox时的表现。

我以前经常使用Compass,但是我发现我用到的95%都来自CSS3 @minxins,相对于仅仅为了前缀到处使用@include,我更喜欢使用和原生的CSS一样的写法。

我现在怀念Compass的一点是它的生成SVG渐变的能力,但是……,仅仅为了IE9需要的一些东西它太大一点了,所以我想我损失的不多。

Rails

我是Rails Asset Pipeline的疯狂粉丝。例如我把这些放到视图中

    

它会在我需要的时候生成一个css。

我们设置一个很长的过期时间。每次我们部署的时候,它都通过改变这些乱码数字打破缓存,因此,非常好的缓存配置。

在CodePen网站我们确实使用Sprockets,但是仅仅针对Javascript,类似于这样工作:

    //= require common/whatever.js    //= require_tree ./../hearting/

本来也可以在CSS中这样做,但是没必要:

a.SASS可以做到这些

b.如果使用SASS解决问题,依赖关系更好。例如$variables和@mixin都可以跨文件使用。

文件组织

有个专门的SCSS文件仅仅用来展示需要加载的CSS文件,相当于一个目录,而不做任何实际的事情。例如网站的global.scss就是这样的:

// General Dependencies    @import "global/colors";    @import "global/bits";// Base    @import "global/reset";    @import "global/layout";// Areas    @import "global/header";    @import "global/footer";// Patterns    @import "global/typography";    @import "global/forms";    @import "global/toolbox";    @import "global/buttons";        @import "global/modals";    @import "global/messages";    @import "global/badges";// Third-Party Components    // (none at the moment)

我努力遵守这些,但是也存在着大量的意外的情况,我不得不把应该导入的这些东西都扔到一个文件中去,所以我创建了一个shame文件(不大光彩的文件)来实现这个目的。

@import "shame";  // get organized, ya schlub.

代码组织

像强迫症一样执行的规范

a.对属性和嵌套应用2个空白的缩进

b.选择器前后各加一个空白

c.每行一个声明(对于区分来说非常重要)

d.:之后加一个空白

e.给结束符}一个相当于其选择器的缩进级别

f.0作为长度时,不加单位

g.使用连字符,不用下划线

大部分情况下我都会遵守的规范

非常相关的声明块之间不加空行

.thing {}.related-thing {}

稍微有点相关的声明块之间加一个空行

.thing {}.another-thing {}

非常不相关的声明块之间加两个空行

.thing {}.totally-different-thing {}

一些我不太在意的规范

属性的顺序,相关的属性以经典组合出现,还是随便。

注释使用的样式。

在实际使用中,我甚至不遵循自己写的规范。

架构

我的理论是,尽量给所有元素添加一个类,我不知道这点不是不是接近于SMACSS,OOCSS,BEM,或者诸如此类。

当然,不是说我不再进行任何嵌套,或者强制规定可以嵌套几层,我只是不进行深度嵌套。

一般来说,我经常这样做:

.box {   h2 {    &:after {    }  }}

这个时候我会想,我是否应该给h2一个类,我是否应该把这种类型的标题做成一个可重用组件。然后我就不在意了,因为以后如果它变得非常常用,我可以很容易的修改。

总体哲学是保持较低的特殊性。因为无论多棒的可重用性,它总是可能多次覆盖,因此选择器的特殊性越低,越容易覆盖。而且这种覆盖我们可以比较容易的再次覆盖,不用走ID选择器或者!important这种极端。

rem作文字的单位,px作其他单位,当然也有意外。

请求

我努力保证每个页面加载2-3个css请求

  • global.css
  • page.css (if not the editor)
  • section.css (if needed)
  • 尽量减少页面的请求数量,但是不至于说把所有的东西都放到一个文件中去。CodePen有太多的单独页面CSS,如果都放到一块去global.css将不堪重负,我没有试过,也许那一天试试也很有意思,起个名字叫做squiCSSh_it_real_good.

    媒体查询

    我使用@minxin实现媒体查询,有时我采用“this width and bigger”,有时采用“this width and smaller”(可以看看媒体查询逻辑)。类似于这样:

    @mixin breakpoint($point) {  @if ($MQs == true) {    @if $point == baby-bear {      @media (max-width: 500px) { @content; }    }    @if $point == mama-bear {      @media (max-width: 700px) { @content; }    }    @if $point == papa-bear {      @media (max-width: 800px) { @content; }    }    @if $point == super-bear {      @media (max-width: 1280px) { @content; }    }    @if $point == reverso-baby-bear {      @media (min-width: 501px) { @content; }    }    @if $point == reverso-mama-bear {      @media (min-width: 701px) { @content; }    }    @if $point == reverso-papa-bear {      @media (min-width: 801px) { @content; }    }    @if $point == reverso-super-bear {      @media (min-width: 1281px) { @content; }    }    @if $point == exclusive-baby-bear {      @media (max-width: 500px) { @content; }    }    @if $point == exclusive-mama-bear {      @media (min-width: 501px) and (max-width: 800px) { @content; }    }    @if $point == exclusive-papa-bear {      @media (min-width: 801px) and (max-width: 1280px) { @content; }    }    @if $point == iOS {      @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {         @content;       }    }  }}

    注意mixin头部的语句“@if ($MQs == true) ”实现媒体查询功能的开启与关闭功能,在内容目录的scss文件头部声明一个变量$MQs(true或者false)控制开关。因为CodePen里的一些页面需要响应式布局而另一些页面不用,没有采用响应式布局的页面可能跳转到一个专门的移动端版本中去。

    注释

    我是一个注释*主义者,主要是因为我从不后悔,如果之后该注释不够明朗、不太贴切,我会直接删掉该注释。

    .drag-from-pen-grid {  padding-bottom: 52px; /* adding this to make room for pagination. A little magic-numbery... */}

    一些统计

    一共有160个单独的SCSS文件,我从来不担心找不到文件,因为Sublime提供了强大的查询功能,而且文件具有命名清晰、结构明了。

    SCSS文件共13345行

    global.css文件11.8k

    page.css文件5.5k

    editor.css文件6.2k

    css文件不是影响性能的关键因素,自定义字体四倍与它,JS文件10倍与它。

    仅仅是我

    网站由三个人合作开发,CSS方面主要是我负责。

    未来

    我现在没有lint,我将会lint javascript,那会很好

    我没有创建本地资源地图,只是因为我觉得现在Sass/chrome不能很好的支持

    我没有一个真正的模式类库。创建一个可视化的模式类库也许会很棒。


    Enjoy it.

    ----------------------------------------------------------

    前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
    ---------------------------------------------------------------------------------------------------------

    相关标签: css codepen