新版网站改版 - html css 一些个人想法

新版网站改版 - html css 一些个人想法

-    Css公共样式拆分{

u  Head.css

u  Nav.css

u  Footer.css

u  Reset.css

u  Common.css

u  Module_md.css – 媒体模块（电影、电视剧）  

u  Module_vd.css – 小视频模块

u  Module_lst.css – 排行榜模块

u  Page.css – 分页

u  Z_index.css – 层级样式（对网站需要的所有需要z-index的dom，都分门别类，给每个特性下的类别一个区间，这样应该能好管理z-index，我就深受其害啊）

u  Title.css

-    }

-    业务层的css{

n  Movie.css

n  Tv.css

n  Index.css

n  …

-    }

-    Css编码格式, 看大家喜好那个模式，最终确定一种吧，要不然有点乱{

n  Expanded格式 如 .x{

Width: 10px;

Height:10px;

}

n  Compact 格式 如 .x{width;10px;height:10px;}

-    }

-    Css命名想法{

n  我现在就对命名很无奈，有的英文词太长不知道怎么缩短为适，还能让别人看懂这个是干嘛的。（一般都是有道词典~）

n  命名建议 用风行的首字母 fx-idx（首页）、fx-tv（电视剧）、fx-md（媒体页）、fx-var（综艺）、fx-coo（动漫）、fx-pl（播放页）等等。

n  大家开发的时候一定会出现命名冲突，比如公共样式有个 .item, 你开发的时候也用到了.item,最好的办法就是在前面加上层级比如是首页 .fx-index .item

n  层级也不要写的太深，导致以后要重置这个样式 就会更加深，也导致css的效率降低（虽然微乎其微）比如这次播放页改版我嵌套的就有些深，以前的种子样式没有写好，结构不是很清晰，导致重置的时候就有些棘手（层级太深了）。

n  Class名 尽量不要和id重名

-    }

-    Css 是否单独设置 margin20 padding20 这类的class ，还是直接写到相对应的class内部如 .y{margin:20px;padding:20;},大家研究下，看看哪种方式比较好维护或者更方便，最后统一一下标准写法。

-    Css 注释也蛮重要的，虽然没什么复杂行和语法，但是还是需要告诉其他前端开发这块是做什么的，建议大家都写下注释，便于维护。

-     

-    媒体展现种子的html结构，这次改版要注意，最好是能做到统一，就是说电影、电视剧、搜素媒体展现都能用一套的html结构搞定（理想状态下），或者是给需要展现种子面板的dom添加一个无意义的class，方便以后遍历。大家研究研究，看看那个方案比较靠谱。

Css 尝试 用预编译开发 如sass、less，我最近看了一些这两种语言的不同，sass比less的功能强大一些，现在不少公司都在用这个。这两种语言fis下都有插件可以安装，对于js大牛更加友好，对于我这js小白也还不错，基本上大家练习练习就能上手。

用这个开发也有一定的好处，编码风格就会一致，也会少写代码，能省去不少雷同的代码，避免代码重复。

这次改版响应式布局可以用@media查询，浏览器基本上都支持这个属性（IE9以下不支持，可以用js处理）。

我觉得这次改版，参与改版的前端同学可以坐在一起或者开个小会先考虑考虑怎么做，把公共的和特俗的样式或者结构都分析分析，然后大家在再动手去做,省得后期打补丁（很受伤~）。

http://www.w3cplus.com/sassguide/syntax.html  这个是sass语言的语法和安装

http://www.bootcss.com/p/lesscss/  less语言的语法和安装

https://github.com/fouber/fis-parser-sass      fis下安装插件的方法

http://www.cnblogs.com/web-ed2/archive/2011/08/03/2126748.html  css优化

大家有啥好的想法可以写出来，然后咱们找个时间碰一下。