CodePenのCSS_html/css_WEB-ITnose

フロントエンド開発 whqet、csdn、Wang Haiqing、whqet、フロントエンド開発エキスパート

翻訳元: CodePen の CSS

翻訳者: フロントエンド開発 whqet、主に意訳、不適切な場合は修正してください。

翻訳者はこう言いました: 最近、外国の専門家が自分のウェブサイトの CSS を共有しており、そこから CSS 関連技術の応用を理解し、CSS の使用仕様を把握することができます。今日は、Chris Coyier が共有した CodePen を翻訳します。 、少しでもお役に立てれば幸いです。

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

Mark Otto の GitHub の CSS と Ian Feather の Lonely Planet の CSS からインスピレーションを受けて、このイベントに参加して、CodePen Web サイトでどのようにそれを行うかについて話すのが待ちきれません。

概要

1. SCSS (CSS プリプロセッサ) を使用します

2. Autoprefixer (ブラウザープレフィックス互換性ツール) を使用します

3. Rails Asset Pipeline (JS、CSS 圧縮ツール) を使用します

4.ドキュメント ディレクトリを表示するための特別な SCSS ファイル

5. 主に見た目を良くするためのスタイルもあります

6. 「クラスを大量に使用する」ことを除いて、特別なアーキテクチャは適用しません

7. 1 ページあたり 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

彼らと十分に協力しているので、クールな子供用デモをすべて理解しています

信じられないほどの機能が追加されています (私には想像すらできません)。

プレフィックス処理

CSS のプロパティと値に対するブラウザーのプレフィックスの問題を考慮することはほとんどありません。Autoprefixer はこの問題を非常にうまく解決でき、フレックスボックスを扱うときのパフォーマンスが特に気に入っているからです。

私は Compass をよく使用していましたが、使用したものの 95% は CSS3 @minxins から来ていることがわかり、接頭辞のためだけにどこでも @include を使用するのではなく、ネイティブ CSS と同じ記述方法を使用することを好みます。

Compass について今恋しいことの 1 つは、SVG グラデーションを生成する機能ですが、IE9 に必要なものの一部だけでは少し大きすぎるので、それほど失うことはないと思います。

Rails

私は Rails Asset Pipeline の大ファンです。たとえば、これらをビュー

    <%= stylesheet_link_tag "about/about" %>

に入れると、必要なときに CSS が生成されます。

<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/css" />

有効期限を長めに設定しております。デプロイするたびに、これらの意味不明な数値が変更されてキャッシュが破壊されるため、非常に優れたキャッシュ構成になります。

CodePen では Sprockets を使用しますが、JavaScript の場合のみ、次のようなものが機能します:

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

CSS でもこれを行うこともできますが、必須ではありません:

a. SASS でこれを行うことができます

b .SASS を使用して問題を解決すると、依存関係がより良くなります。たとえば、$variables と @mixin はどちらもファイル間で使用できます。

ファイル構成

ロードする必要がある CSS ファイルを表示するためにのみ使用される特別な SCSS ファイルがあります。これはディレクトリに相当し、実際には何も行いません。たとえば、Web サイトの 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)

これらを遵守するよう努めていますが、インポートすべきものをすべて放り込まなければならない予期せぬ状況もたくさんあります。ファイルなので、この目的を達成するために作成されたシェープファイル（恥ファイル）です。

すごいです

コード構成

仕様はOCDのように実行されます

a.属性とネストに2つの空白インデントを適用します b.セレクターの前後に空白を追加します

c. 1 件につき 1 つの宣言行 (区別するために非常に重要)

d.: 後ろにスペースを追加します

e. 単位を追加せずに、ターミネータ } に長さとして同等のインデント レベルを与えます

g。 、アンダースコアはありません

ほとんどの場合に従うルール

非常に関連性の高い宣言ブロックの間に空白行はありません

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

わずかに関連する宣言ブロックの間に空白行を追加します

.thing {}.related-thing {}

空白を2つ追加します非常に無関係な宣言ブロック間の行

.thing {}.another-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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------