検索

ホームページ  >  記事  >  ウェブフロントエンド  >  新会社のフロントエンド開発仕様書（初稿）_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-21 08:46:331426ブラウズ

一般原則

  • インデント

    すべてのプログラミング言語では、インデントはソフトタブ (スペース文字を含む) である必要があります。テキスト エディターで 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 セレクターの使用を避ける
  • :*
    • 次のようなクラスに HTML タグを追加することは禁止されています: li.list
    • セレクターを次のような正規表現のように見せることは避けてください: [name='aa'] 高度なセレクターの実行には時間がかかり、実行が困難です読んでくださいので、使用は避けてください。
    • HTML タグをスタイル セレクターとして直接使用しないでください
    • !重要な使用を避けてください
    • css3 疑似要素は控えめに使用してください
    • 次のような css3 の非効率的な属性の使用を避けてください: Linear-gradient, Bring-image; ### CSS を使用して CSS コードをモジュール化すること自体はグローバルであるため、すべてが CSS モジュール化のアイデアを採用し、CSS のルールを制約し、グローバルな汚染を最小限に抑える必要があります
属性の省略形

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括: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

命名規則

    二重引用符の代わりに一重引用符 ' を使用します "
    • クラスの名前付けCamel 命名規則を使用し、最初の文字は大文字になります。例: Account、EventHandler
    • 定数は大文字で、オブジェクト (クラス) または列挙型変数の前で宣言する必要があります。Camel 命名規則
    • クラスのプライベート変数と属性は _ で始まることが推奨されます。例: var _buffer; _init:function(){}
Variables

    で構成される必要があります。
    • 変数は、型が NULL であっても、使用する前に宣言して初期化する必要があります。
    • スコープの先頭で変数に値を割り当てると、変数の使用を避けることができます宣言の問題と宣言の巻き上げに関連する問題
  • <.>変数はあいまいであってはなりません。
  • 関連する変数セットは同じコード ブロックに配置する必要があります。
  • 変数はできるだけ小さくする必要があります。
  • 直接量を使用できる場合は、new....; を使用しないでください。 ; a=new RegExp('d','g');
    • void を使用しない

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'  ];

目立たないイベント リスナーを割り当てる場合、一般に受け入れられている慣行として、ハンドラーは結果のアクションをトリガーする要素に直接ディスパッチされます。ただし、複数の要素が同時にトリガー条件を満たす場合があり、各要素にイベント リスナーを割り当てると、パフォーマンスに悪影響を及ぼす可能性があります。この場合、代わりにイベント プロキシを使用する必要があります

画像

gif 画像の代わりに png8 を使用してみてください

携帯電話ではアニメーション gif 画像を使用しないでください

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：上海 HTML5 サミット ノートのコレクションと概要_html/css_WEB-ITnose次の記事：上海 HTML5 サミット ノートのコレクションと概要_html/css_WEB-ITnose

関連記事

続きを見る