HTML+CSS入门之有关 CSS 样式冲突的问题
沉沙 2019-06-11 来源 : 阅读 1417 评论 0

摘要:本篇文章探讨了HTML+CSS入门之有关 CSS 样式冲突的问题,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML+CSS入门之有关 CSS 样式冲突的问题,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

HTML+CSS入门之有关 CSS 样式冲突的问题

<

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

今天,有个朋友问我有什么好的方法。其实,我也只能提供一些原则性的东西,对于像 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 框架。    

      本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程