最全面的前端开发指南

2016-9-29 11:22| 发布者: yinxiufeng| 查看: 517| 评论: 0 |原作者: 凯图科技 |来自: 原创



HTML


语义


HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。



你需要理解你正在使用的元素的语义。用一种错误的方式使用语义元素比保持中立更糟糕。


简洁


保持代码的简洁。忘记原来的XHTML习惯。



可访问性


可访问性不应该是以后再想的事情。提高网站不需要你成为一个WCAG专家,你完全可以通过修复一些小问题,从而造成一个巨大的变化,例如:

  • 学习正确使用alt 属性

  • 确保链接和按钮被同样地标记(不允许

  • 不专门依靠颜色来传递信息

  • 明确标注表单控件



语言


当定义语言和字符编码是可选择的时候,总是建议在文档级别同时声明,即使它们在你的HTTP标头已经详细说明。比任何其他字符编码更偏爱UTF-8。



性能


除非有正当理由才能在内容前加载脚本,不要阻塞页面的渲染。如果你的样式表很重,开头就孤立那些绝对需要得样式,并在一个单独的样式表中推迟二次声明的加载。两个HTTP请求显然比一个慢,但是感知速度是最重要的因素。




CSS


分号


虽然分号在技术上是CSS一个分隔符,但应该始终把它作为一个终止符。


盒子模型对于整个文档而言最好是相同的。全局性的* { box-sizing: border-box; }就非常不错,但是不要改变默认盒子模型的特定元素,如果可以避免的话。




不要更改元素的默认行为,如果可以避免的话。元素尽可能地保持在自然的文档流中。例如,删除图像下方的空格而不改变其默认显示:


同样,如果可以避免的话,不要关闭元素流。


定位


在CSS中有许多定位元素的方法,但应该尽量限制以下属性/值。按优先顺序排列:



选择器


最小化紧密耦合到DOM的选择器。当选择器有多于3个结构伪类,后代或兄弟选择器的时候,考虑添加一个类到你想匹配的元素。

当你不需要的时候避免过载选择器。


特异性


不要让值和选择器难以覆盖。尽量少用id,并避免!important。


覆盖


覆盖样式使得选择器和调试变得困难。如果可能的话,避免覆盖样式。




继承


不要重复可以继承的样式声明。


简洁


保持代码的简洁。使用简写属性,没有必要的话,要避免使用多个属性。


语言


英语表达优于数学公式。



浏览器引擎前缀


果断地删除过时的浏览器引擎前缀。如果需要使用的话,可以在标准属性前插入它们。



动画


视图转换优于动画。除了opacity 和transform,避免动画其他属性。



单位


可以的话,使用无单位的值。如果使用相对单位,那就用rem 。秒优于毫秒。




颜色


如果你需要透明度,使用rgba。另外,始终使用十六进制格式。



绘画


当资源很容易用CSS复制的时候,避免HTTP请求。



Hacks


不要使用Hacks。




JavaScript


性能


可读性,正确性和可表达性优于性能。JavaScript基本上永远不会是你的性能瓶颈。图像压缩,网络接入和DOM重排来代替优化。如果从本文中你只能记住一个指导原则,那么毫无疑问就是这一条。



<
>
 
QQ在线咨询
售前咨询热线
13191868165
售后服务热线
13191868165
返回顶部