详解Html/CSS中的符号学

本文从索绪尔语言哲学等理论高度认为不需要CSS中的class属性。

CSS的好处是：HTML元素可以在不依赖class属性的情况下实现各种风格的样式化，文章试图证明class属性是过时的，不适合于布局，不用class可以训练我们创建更多可用，可重用的内容。

如果同一类型的两个元素属于出现在相同的上下文中，则它们是相似的，怎么办？

索绪尔对语言作为一个系统的理解基于两种基本关系; 范式和语段(聚合关系和组合关系):

范式

范式是是一组词，具有功能相似性但在含义上有细微或根本的差异。比如“螃蟹位于龙虾旁边”，“位于”这个词属于一种替代词的范式，还可以代指包括“休息于”和“蹲伏于”以及“站立于”，这是一种替代关系。

在英语中替换有一定的规则，动词不能用名词替换，就像在HTML中一样，内联元素(表示内联这样的动作动词)不能总是用块级元素（名词）替换。

语段

一个语段基本上是一个由范式选择组成的结构段。在英语中，句子，段落，章节和书籍都是语段。在HTML中，由您选择的元素组成的代码块可以被视为一种语段。

每个语段都有自己的语义系统，较小的语段可以属于较大的语段系统，就像一个段落可以属于一个章节，

用处？

索绪尔的语言模型可以识别或写出数TB的小说，小说，散文和戏剧，不必发明新词或重新定义旧词。如果这个模型对于诸如英语之类的自然语言来说已经足够好了，那么它对于诸如HTML之类的简单元语言来说已经足够好了。当然，随着时间的推移，新词会被创造出来，就像HTML规范中慢慢引入新元素一样，但这是通过仔细的审议和共识来完成的。class没有这样的授权过程。

索绪尔模型为我们提供了足够的优雅和发明空间，并禁止我们做出错误的选择。通过根据它们的内容和位置what and where来构造元素的样式从而组成我们文档，那么现在误导或混淆用户就变得极其困难，我们所做的只是使用CSS来显示页面的固有结构。

语境的重要性

从符号学的角度来看，也许两个相似的事物之间唯一真正的区别在于它们的背景：它们被发现的环境。英国本土人和法国本地人在基因上相似但在文化上有所不同。他们的国籍背景使他们以许多值得注意的方式不相同。

下面这段Html/CSS:

<font><i>// HTML:</i></font><font><article>   <h1 <b>class</b>=</font><font>"main-title"</font><font>>Article Title</h1>   <aside>      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1>   </aside></article></font><font><i>// CSS:</i></font><font>.main-title {   font-size:30px;}</font>

创造class类型为.main-title，我们创建了一个翻译器来帮助我们轻松地为所有顶级标题设置相似的样式。但是，我们示例中的两个标题h1并不相似，任何理解HTML5解析器的人都会知道，有一个标题h1属于aside组合，而另外一个标题h1直接属于article内，这两种关系哪个最重要？

直接属于article:

<article>   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1></font>

直接属于aside, aside属于article:

<article>   <h1 <b>class</b>=<font>"main-title"</font><font>>Article Title</h1>   <aside>      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h1></font>

解析器将把aside的h1标题视为仅仅是副标题，属于第一个标题之后的副标题。

这个例子中的class是多余的：我们可以使用h1 style属性来设置元素的样式如font-size: 30px。关键是如果我们根据上下文区分这两个元素，那么区分上下文的办法是使用派生选择器：aside h1，那么CSS将绑定到HTML的结构(aside h1是一种结构，h1属于小语段，aside属于大语段，h1小语段被包含在大语段aside中)，并且元素的外观将与其计算的含义一致。