CSS也要语义化

冰雨1198

冰雨1198

2016-02-19 23:46

下面图老师小编要跟大家分享CSS也要语义化,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

其实想重提下那个话题,一直都在忙这忙那的没时间。好不容易到一个周末了,原定安排是去D2的但是因为时间安排不过来,所以能抽空写写。早前的讨论不了了之,其实这一点都不是Twinsen的风格。

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

名字,你看名字多重要,我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我一直说的作为一个技术人员应当遵守的准则互联网创作共享协议。我不能抄一个刚入门的小朋友Idea(因为他们思维没被禁锢),然后换一套名称和说法说是自己的。sorry,我做不到。

不过其实这片文章只是Twinsen的一个想法了,可以说比较的疯狂。另外顺带一提的是这里的是Twinsen的站点,并不是腾讯的站点。这里的东西并不是代表腾讯的观点和角度。

引用森林群的谈话内容
技术人员的争论就是技术人员争论,谈锤子政治和外交。要叼冲我来,我是非常乐意被叼的。是啊,我很犯贱;你叼我就是塞钱进我的袋子里面。正如我常说的那句话:SB之所以继续为SB是因为他压根就从来没有意识到自己是一个SB。粗俗?但是原话是心理学家弗洛伊德说的哦:人总是先有自我认知才会再有自我超脱的。我现在就是到了自我认知的瓶颈了,所以要创造这样的环境逼迫我自我认知。

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

另外说到网格的内容,为什么我反对这个思想的流传?首先声明的我不是反对关于设计的网格化,我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码:

div id="yui-main" div class="yui-b" div class="yui-g" div class="yui-u first"/div div class="yui-u"/div /div /div /div

大家可以很清晰的看到这里的yui-u,或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话把页面中的外观标记去除以后,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需要改动一下样式表就行了,而完全不必改动页面本身。像上面的那段代码不能达到结构、表现、行为三者分离,如果强行改变会出现下面的一些问题:

改变表现的时候必须动到html,一次美观上面的修改要动到三条工作线,极大的人力资源耗费。 会出现排在第五个的叫做first的框 会出现实际为240宽的叫做180宽的框 会出现实际为三列的叫做四列的布局 会出现实际为红色的叫做blue的字

这些也就是相当于现在很多人流行的left_box和right_box,快速改版以后变成了在左边的right_box。这不就是相当于歪曲事实的真理么?但其实最重要的是第一点,这样的工作方式和我们以往的table布局工作方式有差别么?你提个改个样式需求,全公司(设计、页面、开发、功能测试、CE数据监测)都跟着你去跑,这是很不智的。

写到这里回看下,顺带改了改标题变成《这将是一场革命》系列的第二篇关于CSS的文章算了。上面说完不对的,下面给大家看看一个我最近刚接手的一个新版项目代码段:

HTML片断 div id="index_news" class="mode" h3 class="title"公益新闻/h3 div class="content" ul lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li lia href="#"新闻标题,新闻标题,新闻标题,新闻标题/a/li /ul /div a class="more" href="#"更多/a /div CSS片断 .mode{ position:relative; float:left; font-size:12px; } .mode h3.title, .mode h4.title{ color:#234C00; padding:5px 10px; font-size:14px; } .mode .more{ top:5px; right:10px; font-size:12px; color:#4282ab; position:absolute; } .mode .content{ clear:both; } .mode .content:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden; } #index_news.mode, #index_bbs.mode, #index_area.mode{ background:url(small_gray_grid.png) repeat-y -400px bottom; width:200px; margin:5px 0 5px 5px; } #index_news.mode h3.title, #index_bbs.mode h3.title{ background:url(small_gray_grid.png) no-repeat -200px top; } #index_news.mode .content, #index_bbs.mode .content, #index_area.mode .content{ background:url(small_gray_grid.png) no-repeat -600px bottom; display:table; }

大家可以看到模块化思想的优势在于哪:

可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。 可以高度自由化的适应任何产品经理、任何老板的不同变态需求。 任何关于表现上面的修改不需要动用到开发人员,不需要功能测试。 CE数据监测绑定到id,不需要重新调整接口。 每个人担任单个模块的快速迭代开发。

另外就代码而言。标题就是标题,内容就是内容;总不会那种歪曲事实、自己打自己嘴巴的状态。

引用内容
我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样,能力和慧根属其次,人品首当其冲。
我以为,XHTML好比一个人的本质,CSS好比人的处事方式和态度,JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构,也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素,其实自然而然的也就代表了一种人生观。的确,一个人没有好的处事方式和态度很难在现在的社会很好的存活;但是这个处事的方式和态度位置过于偏重了,就成了一个善于欺骗、做事不择手段的人。

这个是一直想说的,有了CSS你可以将左右顺序变成右左顺序,他就是一个网页中的魔术师。你总不能把他乱用,去成了一个善于欺骗、做事不择手段的人。

展开更多 50%)
分享

猜你喜欢

CSS也要语义化

Web开发
CSS也要语义化

CSS教程:语义化方法替代结构化方法

Web开发
CSS教程:语义化方法替代结构化方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页CSS优化使网页具有语义化

Web开发
网页CSS优化使网页具有语义化

CSS教程:语义化标记抛弃DIV标记

电脑网络
CSS教程:语义化标记抛弃DIV标记

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

加深对HTML和CSS标签语义化的理解

Web开发
加深对HTML和CSS标签语义化的理解

纯语义化XHTML+CSS设计表单方法

Web开发
纯语义化XHTML+CSS设计表单方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS教程:vertical-align的值

CSS教程:vertical-align的值

CSS3教程(2):网页边框半径和网页圆角

CSS3教程(2):网页边框半径和网页圆角
下拉加载更多内容 ↓