网站建设前段CSS跟HTML的框架

很久很久以前，在工业革命时代，差不多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, 维护, 等等等等~

网页不论是技术或设计，商业模式，都正在改变。