加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > PHP教程 > 正文

PHP命名空间 有关 CSS 样式冲突的问题

发布时间:2022-10-24 14:02:15 所属栏目:PHP教程 来源:网络
导读: CSS 是不支持命名空间的,所以在使用上,如果不人为的加以限定,很容易造成样式冲突,这种情况尤其表现在多人开发一个项目PHP命名空间,或对已有项目的改造上。
今天,有个朋友问我有什么好

CSS 是不支持命名空间的,所以在使用上,如果不人为的加以限定,很容易造成样式冲突,这种情况尤其表现在多人开发一个项目PHP命名空间,或对已有项目的改造上。

今天,有个朋友问我有什么好的方法。其实,我也只能提供一些原则性的东西,对于像 CSS 框架这种东西(例如:blueprint),我觉得不太适合网页的快速与松散开发模式。

下面给出一些原则性的建议,您可以根据原则性建议,组织您自己的 CSS 框架。另外,如果您觉得以下有什么问题,您可以留言,因为 CSS 并不是我的强项。

原则如下

1. 对于那些希望应用于全局的样式,可以通过单一的标记或 class 来定义,暂且称其为泛定义,需将其存成一个独立的 CSS 文件。如下

a{ }

a:hover{ }

a:active{ }

.ajax-loading-mini{ }

.ajax-loading-max{ }

2. 对于不同的页面频道,由于需要个性化的局部样式,所以其必须采用独立的样式表文件,禁止混用同一个样式表文件。

3. 对于频道页面中的 HTML 布局元素(如左、中、右布局),必须给其 id 命名(如 left-panel, middle-panel, right-panel)。之后,在频道的 CSS 文件中,通过已定义的布局元素 id,来限制其下样式的影响范围。

假设 left-panel 是一个布局元素的 id,像下面这样。

#left-panel{ }

#left-panel ul.nav-list{ }

#left-panel div.ajax-loading-mini{ }

解释一下上面的例子,假设 ajax-loading-max 是一个全局的样式类,我可以对其写其全局默认样式。然后在频道的 CSS 中,通过 #left-panel 选择器做特殊限定,以覆盖掉默认的全局设置。

有关 CSS 选择器的命名

前面就是我们遵守的 CSS 原则。但我们不会对 CSS 选择器的命名做苛刻的要求,因为写 CSS 人的英语水平及命名习惯不尽相同,你不能强制地做出要求,反之可能会伤害 CSS 人员的自尊心。但我们可以适当地对特殊的 DOM 元素定义一些前缀(如 btn,chk 等)。因为命名的好坏对页面的用户展示,并没有直接的影响,虽然也许会影响代码的质量。

我们强调的是,必须对频道或模块中的样式选择器序列,做出以 id 开头的强制要求。

其实有许多好的网站,他们都有自己的一套 CSS 框架,但以上讲的只是减少 CSS 覆盖影响的原则,非具体的实施方案。其实,根据一些原则,任何网站都可以针对自己的特点,写出符合自己需要的 CSS 框架。

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!