新会社のフロントエンド開発仕様書（初稿）_html/css

新会社のフロントエンド開発仕様書（初稿）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:33

オリジナル

1402 人が閲覧しました

一般原則

インデント

すべてのプログラミング言語では、インデントはソフトタブ (スペース文字を含む) である必要があります。テキストエディターで Tab を入力すると、スペース 4 つが入力されます。
可読性と圧縮

既存のファイルを維持する場合、ファイルサイズを節約することよりも可読性の方が重要であると考えています。多くの空白と適切な ASCII アートを使用することをお勧めします。開発者は、意図的に HTML や CSS を縮小したり、JavaScript コードを認識できないほど縮小したりしてはなりません。

サーバー側またはビルドプロセス中に、CSS や JS などのすべての静的クライアントファイルを自動的に最小化して gzip 圧縮します
HTML、CSS、JS コード分離

HTML コードを可能な限りクリーンに保ち、将来のメンテナンスと拡張を容易にするために複雑なレイアウト要件を完了するには最も単純なコードレベルを使用します

CSS コード自体はグローバルであり、すべての CSS モジュールJS コードは機能コードと業務コードに分割され、機能コードはチーム内の他の同僚が使いやすいように可能な限り機能コンポーネントに抽出されます
ファイルとフォルダー: すべて英語の小文字 + 数字またはコネクタ「-、_」、その他の文字は使用不可: jquery.1.x.x.js

ファイル: /libs ファイルの呼び出しにはバージョン番号が含まれている必要があり、圧縮ファイルには min キーワードが含まれている必要があります (/libs/modernizr-1.7.min.js

など)。 ID: キャメルケース命名法: firstName topBoxList footerCopyright

クラス: [マイナス記号コネクタ] 例: top-item main-box box-list-item-1

クリアを使用してみてくださいセマンティクス単語の名前付け、左下や左下などの単一単語の名前付けスタイルは避けてください。 🎜> 属性では一重引用符ではなく二重引用符を使用してください。

自動終了タグの末尾にはスラッシュを使用しないでください。HTML5 仕様では、スラッシュはオプションであると規定されています。
オプションの終了タグ (例: と ) を無視しないでください。

スタイルのレンダリングにはクラスを使用し、スタイルの記述に ID を使用しないようにしてください

Doctype

在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。

ログイン後にコピー

<!DOCTYPE html>

ログイン後にコピー

文字エンコーディング

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后，需要避免在 HTML 中出现字符实体，直接提供字符与文档一致的编码（通常是 UTF-8）。

ログイン後にコピー

<head>  <meta charset="UTF-8"></head>

ログイン後にコピー

IE 互換モード

Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。

ログイン後にコピー

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

ログイン後にコピー

CSS と JavaScript

根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

ログイン後にコピー

<link rel="stylesheet" href="code-guide.css"><script src="code-guide.js"></script><style>  /* ... */</style>

ログイン後にコピー

完璧より実用性を優先します

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:

ログイン後にコピー

<!-- Not so great --><span class="avatar">  <img src="..."></span><!-- Better --><img class="avatar" src="...">

ログイン後にコピー

タグの生成に document.write を使用しないでください

用 document.write生成标签让内容变得更难查找，更难编辑，<b>性能更差</b>。应该尽量避免这种情况的出现。

ログイン後にコピー

CSS 仕様

外部ファイルLINKはCSSを読み込んでファイル数を極力減らします。ロードタグはファイルの HEAD セクションに配置する必要があります。
インラインスタイルの使用を避けるスタイルタグで定義されているか要素に直接定義されているかに関係なく、ファイル内でインラインで導入されたスタイルを使用しないでください。これにより、スタイルルールを追跡することが困難になる可能性があります。
ブラウザ間でレンダリングの一貫性を高めるには、reset.css を使用します。
CSS 式の使用を避ける
@import を使用しない
ID セレクターの使用を避ける
:*

属性の省略形

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:paddingmarginfontbackgroundborderborder-radius大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

ログイン後にコピー

1 行ですか? 複数行ですか?

css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好。然而在和团队的工作中，尤其是大型的css文件，我是将样式写成一行，并使用css模块化思想:

ログイン後にコピー

.alert-window {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}.alert-window .window-title{...}.alert-window .window-content{...}.alert-window .window-buttom{...}

ログイン後にコピー

就我个人而言，觉得单行的可读性更好。当你查找css时多行样式就变得很麻烦，相比较而言单行查找更容易。

ログイン後にコピー

JavaScript

命名規則

Variables

<. 🎜>変数はあいまいであってはなりません。
関連する変数セットは同じコードブロックに配置する必要があります。
変数はできるだけ小さくする必要があります。
直接量を使用できる場合は、new....; を使用しないでください。 ; a=new RegExp('d','g');

with ステートメントを使用しない

Don' continue ステートメントを使用しない

ビット単位の演算を使用しないようにします

組み込みのプロトタイプ (オブジェクト、配列、文字列...) を展開しないでください

Don' eval();

+演算には注意してください

単純な条件判定方法を使用してください

    '1'+1==2 //false;    1+1==2 //true

ログイン後にコピー

単純な if else ではなく 3 項式を使用してください

if (name !== 0 || name !== '' || name!==null || name!==undefined) {...}if (name) {...}if (collection.length > 0) {  ...}if (collection.length) {...}

ログイン後にコピー

単純な if の代わりに && と || を使用します

    if(a){        d='b'    }else{        d='c'    }    d=a?'b':'c';

ログイン後にコピー

if を最適化するには配列または json を使用します

     if(a){        b()    }    a && c();    if(bb){        a=bb    }else{        a=2    }    a=bb||2

ログイン後にコピー

関数以外で関数を宣言しないでくださいブロック (if、while など)

    if(a=='1' || a=='b' || a=='c' || a=='ss'){        bb();    }else{        ...    }    var hasData={        '1':1,        'b':1,        'c':1,        'ss':1    }    if(hasData[a]){        bb()    }else{    ...    }

ログイン後にコピー

尽管浏览器允许你分配函数给一个变量，但坏消息是，不同的浏览器用不同的方式解析它如果一定要定义函数，请用函数表达式方式声明；如：

ログイン後にコピー

else を伴うすべての if には {}

    function b(){    ...    }    if(a){        function b(){            ...        }    }    var b=function(){    ...    }    if(a){        b=function(){            ....        }    }

ログイン後にコピー

余分なカンマはありません

    if(a)        b()    else        c();    if(a){        b();    }else{        c();    }

ログイン後にコピー

这会在IE6、IE7和IE9的怪异模式中导致一些问题；同时，在ES3的一些实现中，多余的逗号会增加数组的长度。在ES5中已经澄清

ログイン後にコピー

イベントデリゲートを使用する

 var hero = {    firstName: 'Kevin',    lastName: 'Flynn',  };  var heroes = [    'Batman',    'Superman',  ];  var hero = {    firstName: 'Kevin',    lastName: 'Flynn'  };  var heroes = [    'Batman',    'Superman'  ];

ログイン後にコピー