前端开发常见问题(非js)与解决方案

在开发越来越深入,越来越复杂,人员也越来越多时,各种各样的团队问题便随之而来。

以下列出一些我在开发中经常遇到的问题,并应用相应的方法来解决,大家有很好的建议不防提出来大家讨论。:)

问题

设计:

  • UI不够统一
  • 设计不规范,导致制作时出样式出现偏差

CSS:

  • CSS过于混乱,多人联合编写时命名空间冲突问题
  • 各自为政,不能使相同的部分共用起来,造成沉余与维护困难
  • 乱用Selector优先级,导致无法更新样式。

HTML:

  • 结构嵌套问题
  • 语意不明确

解决方案

设计:

  • 多利用草稿,制定初期架构草图(图1)
  • 制定统一版式与UI样式(图2)
  • 精确计算宽度值与其他数据(可以蓝图阶段进行),并严格遵循

Draft Draft

CSS:

CSS采用统一的命名规则如:header_wrapper, main_containter或header-wrapper, main-containter

注:后一种写法header-wrapper在.net的服务端控件中会报错,由于.net中无法识别id中含有‘-’

通常我的作法为:

id:headerWrapper

class:header-wrapper

当然其实我还是建议采用‘-’的写法,如果不是为.net做开发的话。

引用类库或自己编写相关类库,并制作相关文档,按文档编写。这样可以最大限度的避免命名冲突。

另外一点就是在全局引用‘命名空间’的做法,因为CSS本身并没有这一概念所以需要做一些hack手段

代码:

<html>
<body class="text-page">
...
</body>
</html>

利用CSS的权重进行的hack,也是一种比较通用的hack手法,这样就可以利用CSS的优先级来做不同的样式。所以CSS的优先级是个非常重要的工具!

HTML:

对于页面的基础,莫过于HTML。整个架构的骨架!

为避免大规模开发时造成不必要的混乱,一定要按W3C的一些标准来实施

可参考:符合XHTML Strict 1.0 W3C组织标准的标签与结构

进而就需要考虑应用一些规则

如:Grid System

这里先打个招面,以后的文章里再详细说明一下Grid System。

现在网站大家都是即时开发,很少有整理与规划HTML的习惯,鉴于这点,应该多向CSS Zen Garden学习,整理由最适合用自己的骨架。

此条目发表在 try it, 实验室 分类目录,贴了 , , 标签。将固定链接加入收藏夹。