CSS纵向书写和横向书写的特点

2016-02-19 15:16 18 1 收藏

下面是个CSS纵向书写和横向书写的特点教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

纵向书写特点:

每个CSS属性独立一行,一般不会出现换行或横向滚动条。

可以通过firebug等工具查找到模块,在DW中ctrl+g行定位,修改方便。

属性段落间有缩进,保证了代码的整洁,层次清楚,符合编程语言代码规范,修改更加直观。

存在的问题:代码冗余(如空格符、tab符、换行符);文件大小增加;容易出现纵向滚动条。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

横向书写特点:

最大化的利用了空间,单屏内能显示更多,减小了纵向滚动条出现的几率,能够快速捕获较多的信息。

减小了文件大小,省去了不必要的空格、换行等。

横向书写方便分块以及注释,便于查看CSS结构,选择符一目了然。当今显示器正朝着越来越大,越来越宽发展,基本上一行内可以显示完全。

加快编写CSS速度,不用每次敲换行和tab,并且减少拉动滚动条的次数。

如果是活动页,不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的,但是使用横向书写,基本上不存在多余的空格和换行,因此可以不用压缩,这样效率和能力都会得到提高。

便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好,因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐,再加上

.class_name_2  .class_name_2_1  .class_name_2_1_1的选择符层次分明,因此很容易定位到目标。

在调试小Bug的时候就可以直接打开CSS更改,不用再打开firebug去找到模块。

横向书写,是基于CSS选择符的写法,层次容易对比,更利于模块化。对整体CSS规划有好处,后期维护成本低。

便于不同版本的CSS代码对比。

存在的问题:书写过密,从而影响阅读。这种弊端显而易见,但只要优化做到家,这种状况会很少。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

尽管对于现如今的带宽来说,网页文件那仅以K为单位的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等,大大减小了文件大小。我们不能说哪种书写是对的,至于具体采用哪种写法依个人选择,当然改变习惯可能会影响一个人的工作效率,那我们提倡的是:提交的CSS样式文件是经过代码格式化的,而这个工作可以完全交给DW等工具,我们只要点击一下,整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服,修改容易,团队成员在后续交接也会变得更加顺利。

来源:http://www.tulaoshi.com/n/20160219/1609263.html

延伸阅读
标签: Web开发
CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。 样式表索引 样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。 给出该css文件作者的相关信...
标签: Web开发
mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //显示属性 * display * list-style * position * float * clear //自身属性 * width * height * margin * padding * border * background //文本属性 * color * font * tex...
标签: Web开发
随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,CSS文件就会比较繁琐,众多的选择符、属性让人眼花缭乱,那么如何更快的定位、如何更高效的编写样式呢?CSS的书写被很多人所...
标签: Web开发
    之所以在讲述一切技术技巧之前先谈论CSS书写习惯,是因为我觉得技术技巧是可以很快学到的,但是书写习惯是慢慢形成的,无论是书写的条理性,命名的规范性,注释的易读性还是代码的简化性都不是一朝一夕能够形成的。所以希望学习CSS的朋友们从一开始就要养成良好的书写习惯,这对将来自己查改样式或者交由他人修改的可读性都...
标签: Web开发
整理了一下自己写CSS时的顺序,跟大家分享下。 下表顺序为从上到下,从左到右: ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...

经验教程

742

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部