前端代码书写注意事项

   1、结构化命名 VS 语义化命名

       结构化命名：比较容易理解元素在代码中的位置，一旦网页结构发生变化，元素需要重新命名，而且样式也需要修改

       语义化命名：让人清楚元素在网页中的角色，一旦网页结构变化，不需要重新命名，只需要修改css样式即可。

      2、语义化命名tips

• • Container：就是将你页面中的所有元素包在一起的部分，这部分你还可以命名为: ”wrapper“, “wrap“, “page“.
  • Header：是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分你还可以命名为:”top“, “logo“, “page-header”
  • Navbar：横向的导航栏，是最典型的网页元素。这部分你还可以命名为:“nav”, “navigation”, “nav-wrapper”.
  • Menu：包含一般的链接和菜单，这部分你还可以命名为: ”sub-nav ”, “links“.
  • Sidebar： 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分你还可以命名为: ”sub-nav“, “side-panel“, “secondary-content“.
  • Footer：包含网站的一些附加信息，这部分你还可以命名为: ”copyright“.
  • topnav：顶部导航

       3、css属性的书写顺序

       遵循布局定位属性-->自身属性-->文本属性-->其他属性，尽量保证同类属性写在一起

• •   布局定位属性：display，list-style，position，top，right，bottom，left，float，clear，visibility，overflow；
  •   自身属性：width，height，margin，padding，border，background；
  •   文本属性：color，font，text-decoration，text-align，vertical-align，white-space；
  •   其他属性：不常用的属性；

      4、必须为大区块样式添加注释，小区块适量注释

      5、所有的图片最好加上alt属性

      6、css样式多个属性可以分行写，提高代码的简洁性可读性

      7、border：0 或者bord：0px，虽然页面上看不见，但浏览器进行了渲染，会消耗内存，这种情况下，直接border：none，浏览器不会进行渲染，也不会消耗内存。

           disp：none 不会做渲染，但是visiblity：hidden，则会做渲染，浪费浏览器内存。

      8、使用外部样式表：易于维护修改，而且可以提高页面速度，因为css文件会在浏览器中产生缓存。内置在html文档中的css则会每次重新下载，。

      9、代码压缩：当需要把项目部署到网络上时，可以使用YUI compressor来除去代码中的注释和空格，提高网页的加载速度。

      10、命名为两个单词中，首字母大写

      11、charset=“utf-8”是国际通用的编码格式，什么语言都可以正常访问，charset=“gb2312”只能用于中文，遇到别国的语言就会出现乱码的情况。

      12、块级元素会占据一整行，而内联元素会并列显示在一行

      13、浏览器一般会有默认的设置，所以需要重置样式，把浏览器默认的样式去掉。

      14、css的命名方式有 驼峰式（sideshowWarp），用-连接（sideshow-Warp ），下划线连接（sideshow_Warp ）,书写规则统一，尽量不要混着来写。