CSS写法跟HTML的架构-壹企:高端网站策划、设计、建设、推广方案提供者,互联网整合营销专家

建站知识

首页 建站知识 CSS写法跟HTML的架构

CSS写法跟HTML的架构

来源: 2014-09-19 19:22




很久很久以前。在工业革命时代,差不多1700~1800,发明了许多商业量产的新技术,虽然传统手工的工匠们还是得以保持工作,却不肯迈进学习,觉得机器这些东西是无法取代他们的工作。
但差不多在十九世纪因为时代的改变,需求量越来越多,不得不以这个可以量产更多,更快的机器来取代工匠们的工作。后来这些老工匠们看到机器是如何代替他们的工作,而发现自己的技术已经被淘汰已久。

以前的网页

在很久以前,当网路还是以table作为架构, 类似这种 < font color = "red"> foo < /font > 被设计网页广泛的使用。
那时我才刚开始接触网页设计,约2008年开始,那时table的架构已经开始的慢慢的被css取代, 常上的smashing magazine, web designer ledger, speckboy magazine, nettuts等这些网站已经很直接的植入css为下一代的网页基础。每个阅读的文章,都是在讲关于semantic,干淨的HTML。
那时候要修改wordpress, blogspot, 都是下载一个theme structure, 然后透过css去修改, 想当初我还觉得网页设计怎可以如此困难。

以前的网页只是很小众,还记得十多年前,网页可能就只有一页,而且只是用来放放自己每天的生活日记,把自己喜欢的音乐放上去,而且还是midi的。
现在的网页的scope却很大, 从数十页至百页,且还可以每年赚十几亿的商机。

从table转至css是网页技术的小改变,却没想到这改变了下一代网页的趋势。

现在的网页

现在的网页越来越大,跟以前的相比之下,已经越来越复杂,也越来越重要,当然,也可以赚更多的钱。

当网站的需求越来越大,开发团队也相对的会越来越多,现在比较重要的可能已经不再是hand-code, semantic, 以及干淨的网页。
反而是能够快速开发,更强大的技术是比较需要的。没错-我们又得追上这个“改变”了。

当然,那些十年前的网页最佳技术等到现在也还是可以使用,我们无法否认,只是目前网页的改变比我们想像中的还要快。我们现在的网页可能都要做出可以每天提供上万人的服务,并制造出上百万的业绩。
我们应该以不一样的态度去看待这件事情。

我们可以把网页分给三个利害关系的组群:

1. 客户 – 付钱给我们制作网页。
2. 使用者 – 将会使用我们网页的人。
3. 开发者 – 维护及开发网页。
对于正确的组群做出适当的选择

一定要切记这三个组群,确保我们为这些组群做正确的选择。

客户

客户是绝对不会管网页到底是否semantic, 客户也绝对不会去管你的id或class总共有多少。他们也不需要了解到是否能够重复的使用id或class,这不是他们应该烦恼的问题,这应该是我们开发者应该帮他们解决的问题。
客户想要了解的只是网页的效率跟速度可以有多快多高。以最便宜及有效率的更新他们的网站。

使用者

使用者也不会管你的code,就算你是使用table,其实也不会有人知道的。不过使用者是比较在乎网页速度跟稳定性,试想一下,网页如果慢的话,又导致浏览器当掉的话,那绝对不是我们想要的。

开发者

开发者,也就是我们。会很在意我们的code文件有多整齐,有多方便合作,多方便维护,多方便扩张,多方便修改。
如果新增两个div会使我们方便维护,何乐而不为呢?

我们要为自己写code,同时要写的够清楚给团队,写的有够稳定给客户,写得效能够好给使用者。

SEMANTIC

Semantic在前端是要考虑是否使用div或header, 有些字是否为h或p, 使用ul或ol. 关系在于文件的内容,而不是管我们写的class或id的关联性,或更加以直接的方式:
< div class = "heading-one" >My page title< /div >

< h1 class = "red" >My page title< /h1 >

第一个是不良的示范,所有的标题应该是以h去写mark up,而不是div. 就算class的关联性有多好,不过文件上这是对于网页没有好处的写法。
第二个是正确的示范,文件上就会很清楚的了解这个标题是很重要的,就算使用red的class,没有css他还是无法了解此内容的重要性。

实际上浏览器不会去阅读你的css, 而是阅读html文件, 再透过文件去搭配你css写好的class。所以你css class写的太好也没用,因为html根本就看不懂你的red是否重要,凡而是你的h1会告诉他说他是重要的标题。

很多人对于semantic的误解,其实是命名的相关性,每当我们写class的名字的时候,其实是件很令人懊恼的东西,建议是要考虑以后的维护性,以后这个class修改后会多久再次更新。
最直接的sample是:
< strong class = "red" >$99.9< /strong>
.red {
color: red;
}

如果这时候客户希望我们将更改颜色,那么,我们是否要这样:
< strong class = "red" >$99.9< /strong>
.red {
color: blue;
}

不过最好的建议,当然是这样:
< strong class = "special-offer" >$99.9< /strong>
.special-offer {
color: red;
}

这样的话是否更好呢?
写class的话, 是不需要semantic的,而是察觉性 (sensibility)。

我想讲个其实是,时代正在慢慢的改变,虽然要跟上改变的速度是难的,要重新学习也不是件容易的事,不过这是事实,技术越来越成熟,自然而然有更好的东西一直出来。

以前只有单纯的css, 现在有sass, 有less, 有stylus.
以前只有html, 现在有haml.
以前只有javascript, 现在有jquery, 有coffeescript.

以前可能写一写就上线了, 现在还要调整网页速度, 优化, seo, 维护, 等等等等~

网页不论是技术或设计,商业模式,都正在改变。
但是,你跟上了吗?