<!-- bad --> <MyTag></MyTag> <!-- good --> <my-tag></my-tag>
class属性
使用小写字母加连字符，需要在Javascript中使用时，以J_开头，接大驼峰命名
1 2 3 4
<!-- bad --> <divclass="FooBar J_foo-bar"></div> <!-- good --> <divclass="foo-bar J_FooBar"></div>
id属性
同上。建议使用class属性关联CSS。
属性
使用双引号包裹
1 2 3 4
<!-- bad --> <divclass='foo'></div> <!-- good --> <divclass="foo"></div>
Boolean属性
不要为Boolean属性指定值。
一个元素中 Boolean 属性的存在表示取值true，不存在则表示取值false。
1 2 3 4 5 6 7 8 9 10 11 12
<!-- bad --> <inputtype="text"name="nickname"disabled="disabled"> <inputtype="checkbox"name="hobbies"value="bicycle"checked="checked"> <select> <optionvalue="FrontEnd"selected="selected">FrontEnd</option> </select> <!-- good --> <inputtype="text"name="nickname"disabled> <inputtype="checkbox"name="hobbies"value="bicycle"checked> <select> <optionvalue="FrontEnd"selected>FrontEnd</option> </select>
自定义属性
必须以data-为前缀，保证可读
1 2 3 4
<!-- bad --> <divage="10"></div> <!-- good --> <divdata-age="10"></div>
顺序
保证可读性，一致的属性顺序可以提高压缩率。按照出现频率，依次是：
class
id
data-*
…
少用style属性
建议使用class来控制样式，可以提高可维护性和可读性。
不在属性值中使用JavaScript语句
1 2 3 4 5 6 7 8
<!-- bad --> <aid="hello"href="javascript:alert('hi');"onclick=";(function(){alert('hello');})()"> <!-- good --> <script> document.getElementById("hello").addEventListener(function() { alert('hello'); }); </script>
多媒体
img的src属性禁止留空
为img标签添加alt属性以声明替代文本
在多媒体标签内部提供指示浏览器不支持该标签的说明，如object、audio、video
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!-- bad --> <imgsrc="cat.png"> <audiocontrols> <sourcesrc="foo.ogg"type="audio/ogg"> <sourcesrc="bar.mp3"type="audio/mpeg"> </audio>
<!-- good --> <imgsrc="cat.png"alt="cat"> <audiocontrols> <sourcesrc="baz.ogg"type="audio/ogg"> <sourcesrc="qaz.mp3"type="audio/mpeg"> Your browser does not support the audio tag. </audio>
CSS
基本
推荐使用两个空格缩进
1 2 3 4 5 6 7 8
/* bad */ .example { color: #fff; } /* good */ .example { color: #000; }
单行不能超过120个字符，除非不可分割，如URL
声明块左花括号前推荐添加空格
1 2 3 4 5 6 7 8 9
/* bad */ .example{ width: 100px; }
/* good */ .example { height: 15px; }
声明块右花括号推荐单独成行
1 2 3 4 5 6 7 8
/* bad */ .example { width: 100px;}
/* good */ .example { height: 15px; }
声明语句:后需要有空格，前无空格
1 2 3 4 5 6 7 8 9
/* bad */ .example { left:15px; }
/* good */ .example { top: 15px; }
声明语句必须以分号结尾
1 2 3 4 5 6 7 8 9
/* bad */ .example { left:15px }
/* good */ .example { top: 15px; }
注释
文档注释
声明在文件头部，表示文件作用
1 2 3
/** * 这个文件的作用 */
代码注释
传达代码上下文和目标，应该容易被人类理解。不要简单重复类名等冗余信息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/* bad */
/* header */ .header { text-align: center; ... }
/* good */
/* Wrapping contents of .title and .user-info */ .header { text-align: center; ... }
reverse : List a -> List a reverse list = case list of [] -> [] (x::xs) -> reverse xs ++ [x]
quicksort : List comparable -> List comparable quicksort list = case list of [] -> [] (x::xs) -> let smallerSorted = quicksort (List.filter ((>) x) xs) biggerSorted = quicksort (List.filter ((<=) x) xs) in smallerSorted ++ [x] ++ biggerSorted
可以找到规律：
Usually you define an edge case and then you define a function that does something between some element and the function applied to the rest.
更具体的解释可以看参考链接3。
控制结构
Elm中没有for和while循环（都通过递归实现了）。但是存在if和case语句。
1 2 3 4 5 6 7 8 9 10 11 12 13
if powerLevel > 9000then"OVER 9000!!!"else"meh" case maybe of Just xs -> xs Nothing -> []
case xs of hd::tl -> Just (hd,tl) [] -> Nothing
case n of 0 -> 1 1 -> 1 _ -> fib (n-1) + fib (n-2) -- _表示不接受入参
view : Model -> HtmlMsg view model = div [] [ input [ placeholder "Text to reverse", onInput Change ] [] , div [] [ text (String.reverse model.content) ] ]
decodeString : Decoder a -> String -> ResultString a
由第一个参数指定decoder类型，如 decodeString int "42"就指定了一个整数的解析器。在多数情况下，JSON字符串并没这么简单。这时，需要先利用基本的int、string、list、dict解析器结合map2、map3等构造相应的Decoder，再交给decodeString处理。函数返回Result类型。
1 2 3 4 5 6 7
import Json.Decode exposing (..)
typealiasPoint = { x : Int, y : Int }
pointDecoder = map2 Point (field "x" int) (field "y" int)
decodeString pointDecoder """{ "x": 3, "y": 4 }"""-- Ok { x = 3, y = 4 } : Result String Point
CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
XSS（Cross Site Script，跨站脚本攻击），分为反射式，存储式，前者只对特定用户生效，如存储在个人资料中的脚本，后者对访问网站的所有用户生效，如攻击站点本身代码。防御转义时，不仅要监测<script>标签，对可以书写JavaScript的href属性，src属性，甚至img的onerror等事件也要做防御。
