ホームページ > 記事 > ウェブフロントエンド > 新会社のフロントエンド開発仕様書(初稿)_html/css_WEB-ITnose
インデント
すべてのプログラミング言語では、インデントはソフトタブ (スペース文字を含む) である必要があります。テキスト エディターで 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 仕様では、スラッシュはオプションであると規定されています。
オプションの終了タグ (例: と ) を無視しないでください。在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。
<!DOCTYPE html>
通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后,需要避免在 HTML 中出现字符实体,直接提供字符与文档一致的编码(通常是 UTF-8)。
<head> <meta charset="UTF-8"></head>
Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要,通常通过 edge mode 来通知 IE 使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
根据 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生成标签让内容变得更难查找,更难编辑,<b>性能更差</b>。应该尽量避免这种情况的出现。
坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括: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
'1'+1==2 //false; 1+1==2 //true
if (name !== 0 || name !== '' || name!==null || name!==undefined) {...}if (name) {...}if (collection.length > 0) { ...}if (collection.length) {...}
if(a){ d='b' }else{ d='c' } d=a?'b':'c';
if(a){ b() } a && c(); if(bb){ a=bb }else{ a=2 } a=bb||2
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' ];
画像