摘要:为什么说最佳实践是呢简单来说,就是这类预处理器在提供一定的抽象能力的同时,也不会破坏自身的特性。就语义化这件事情而言,如果你的是基于标准来编写的,意味着你的页面具备更多的可能性。
原文:https://github.com/kuitos/kuitos.github.io/issues/33
15年年末写了篇关于BEM方法论(实践上内容并不是原BEM)的文章,文末给自己挖了个坑说要聊聊web语义化,跳票至今?。16年第一篇用来填坑好了!
什么是语义化The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. --Wikipedia
语义化Web具备让数据跨终端共享/重用的能力。
对于HTML体系而言,Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和机器都容易理解。
语义化说起来好像都懂,但是实际情况并不是那么乐观。
再谈各种所谓的CSS设计模式
OOCSS (Object Oriented CSS)
...a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. — Nicole Sullivan
...
目标:
减少对HTML结构的依赖
增加CSS class重复性的使用
SMACSS(Scalable and Modular Architecture for CSS)
...an attempt to document a consistent approach to site development when using CSS. — SMACSS
一种css架构风格
BEM(Block,Element,Modular)
The BEM approach ensures that everyone participating in the development of a website is working with the same codebase and using the same terminology — BEM Methodology
与SMACSS类似
METACSS | ATOMCSS (原子CSS)
WTFSS
为什么会有这么多层出不穷(千奇百怪)的CSS设计模式Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. --MDN
CSS本身的不足,不具备逻辑表达能力 & 抽象能力
We had to maintain a shit。。。所以我们需要更有效的去减少让自己恶心的成本。。
但这些都只是部分客观原因,主要原因在于我们对于Web语义化的理解度不够以及非正确的工作流。
以表现为中心(面向UI) VS 以信息为中心(面向语义)以表现为中心的工作流: 需求原型 --> UI设计稿 --> 以HTML/CSS实现设计稿
以信息为中心的工作流: 需求原型 --> 分析需求并以HTML描述 --> UI设计稿 --> 分析样式并以CSS实现
两者最大的区别在于,对于面向UI的工作流而言,HTML/CSS只是实现UI的手段,而对于纯正的Web开发(面向语义的工作流)而言,我们应该是以信息为中心的,即首先考虑信息的本质(语义),并以合适的标签来标记,最后再考虑样式和行为(UI)。
之所以会有那么多层出不穷(不知所谓)的CSS设计模式,是因为它们大都是以表现为中心提出的“最佳实践”,而这两种方法论本身又是不适配的。
为什么说面向语义(以信息为中心)才是纯正的Web开发
Web诞生的目的是用于在网络上传递资源跟信息的。HTML设计之初是用来作为互联网上主要的内容载体,其本身是用来描述信息的。在最早期的Web时代,HTML作为一种通用的描述语言用来表述在互联网上传输/共享的文档的信息。
Web 万维网The World Wide Web (WWW) is an open source information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.
HTML 作为一种对计算机而言通用易懂的母语
To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand.
Web领域的一套基础架构跟技术(包括HTTP、REST、HTML等),是按照语义中心的方式设计出来的。如果采用UI中心的方法论,必然导致阻抗不匹配。
w3c官方也在致力于推广Web语义化
各种表现型标签/属性在HTML5中被废弃/不推荐使用(center、big、width等)
HTML5中新增的各种语义化标签(header、nav等),而这些标签在表现上跟div无二。
CSS语义化?通常意义上我们说的CSS语义指的是class的语义。class作为HTML与CSS之间的主要钩子,却是被我们误解最深的一个东西。
There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content. --w3c
class属性本意是用来描述元素内容的,而不是描述元素展现的。其典型‘反模式’代表就是METACSS。
看看这两段代码,哪一个更容易理解?userName:Kuitos相关文章
前端面试【整理更新中】:HTML常见题目(带答案)
摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。使用之前需要考虑这两个缺点。数据的有效期不同。在设置的过期时间之前一直有效,即使窗口或者浏览器关闭。仅在浏览器窗口关闭之前有效。 一、HTML常见题目01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?02、 HTML5 为什么只需要写 !DOCTYPE HTML?03、行内元素有哪些?块级元素有哪些?空(voi...
前端面试【整理更新中】:HTML常见题目(带答案)
摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。使用之前需要考虑这两个缺点。数据的有效期不同。在设置的过期时间之前一直有效,即使窗口或者浏览器关闭。仅在浏览器窗口关闭之前有效。 一、HTML常见题目01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?02、 HTML5 为什么只需要写 !DOCTYPE HTML?03、行内元素有哪些?块级元素有哪些?空(voi...
前端面试【整理更新中】:HTML常见题目(带答案)
摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。使用之前需要考虑这两个缺点。数据的有效期不同。在设置的过期时间之前一直有效,即使窗口或者浏览器关闭。仅在浏览器窗口关闭之前有效。 一、HTML常见题目01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?02、 HTML5 为什么只需要写 !DOCTYPE HTML?03、行内元素有哪些?块级元素有哪些?空(voi...
前端面试题1(HTML篇)
摘要:不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。又称内核及以上版本,等内核及以上。内核原为,现为内核等。如果不能确定时,首选使用自然样式标签 HTML 语义化 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class 为什么需要语义化: 去...
发表评论
0条评论
vspiders
男|高级讲师
TA的文章
阅读更多
用C语言实现三子棋
阅读 632·2021-11-11 16:55
转行软件测试两个多月,感觉很迷茫,下一步该如何提高自己?
阅读 2146·2021-11-11 16:55
你的编程能力从什么时候开始突飞猛进?
阅读 1929·2021-11-11 16:55
年度狂欢双十一云服务商活动我们需要准备什么(双十一云服务器会有活动吗)
阅读 2318·2021-10-25 09:46
云主机怎么建站-新睿云云主机怎么搭建网站?
阅读 1574·2021-09-22 15:20
C语言------(8道)指针笔试题全面解析
阅读 2215·2021-09-10 10:51
搬瓦工:新增两款CN2高配机型 – DC3机房,CN2线路,月流量最高16TB
阅读 1685·2021-08-25 09:38
Web语义化标准解读
阅读 2591·2019-08-30 12:48
阅读需要支付1元查看