标签：
新版网站改版 - 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优化
大家有啥好的想法可以写出来，然后咱们找个时间碰一下。
标签：
原文地址：http://www.cnblogs.com/sunhw360/p/4190162.html
