发表于： 2020-07-15 23:42:58
0 1254
标题：
任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？
（1）背景介绍：
HTML、CSS规范以及CSS架构都是我们编写代码时需要用到的，HTML、CSS规范能提高代码质量和协作效率，CSS架构的好处就是可拓展性，可利用性，以及便于后期的维护等。那他们间如果有冲突我们应当如何抉择？且听下张讲解
（2）知识剖析：
1.HTML5规范
文档结构，代码规范，文档内容
2.CSS规范
代码风格，通用，值与单位，文本排版
3.CSS架构
有的会分为：header.css，body.css，footer.css,有的会分为：reset.css，main.css，content.css。并没有好坏之分，哪种适合就用哪种
（3）常见问题：
当css架构的模块样式跟需要运用的有冲突时，应该如何解决
（4）解决方案：
首先我认为不应该修改架构的模块，因为既然你把它单独设成一个模块，必然他是可重复利用的，当你修改他的时候，别的页面用到它的话也会被修改，或者你可以保证改动他的同时其他页面不变。或者可以改需要经常改动的部分分成组件，有需要就把组件放上去，反之则不放。
（5）编码实战：
html规范
文档结构
<!DOCTYPE html> <!--文档类型：声明为html5文档-->
<html lang="en"> <!--语言属性：为html根元素制定lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等-->
<head>
<meta charset="UTF-8"> <!--字符编码：表示用UTF-8来编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--viewport：加上viewport可以让我们开发出来的页面在不同大小的设备上都能统一友好显示-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--兼容属性：用来确定绘制当前页面所采用的ie版本-->
<title>Document</title> <!--页面title：给每个页面加上有意义的标题-->
<!-- <meta name="" content=""> 文档描述：keywords，为搜索引擎定义关键字，description，为网页定义描述内容 -> -->
</head>
<body>
<!-- 关注点分离：必须将css文件并置于head中，必须将js文件引入并置于body底部-->
<!-- 缩进： 每次缩进使用4个空格不要使用Tab-->
<!-- 数形结构： 针对每一个块级元素都另起一行，并在每个子元素前缩进，可提升可读性 -->
<!-- 减少嵌套： 减少不必要的标签，如果结构可以满足上下文要求，就不需要有多余的结构 -->
代码规范
<!-- 注释: -->
<!-- 图片和颜色： 给图片添加width和height，提升页面加载速度，给所有img添加alt属性，不要使用或尽量少用gif文件-->
<!-- 避免长句： 在IDE中，需要去来回拖动滚动条来查看末尾的代码是很不方便的，所以要在合适的位置来断句。-->
文档内容
<!--展现内容分离： 不要使用内联样式，用<p>来代替<br>来对内容换行， 不要使用<em>和<strong> ，用css来控制，不要使用<i>和<b>，HTML5不赞成使用-->
<!--属性顺序 1. class
2. id, name
3. data-*
4. src, for, type, href
5. title, alt
6. aria-*, role -->
</body>
</html>
css规范
代码风格：
/* 1.缩进：使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。 --> */
/* 2.空格：选择器 与 { 之间必须包含空格。
属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
列表型属性值书写在单行时，, 后必须跟一个空格。*/
.selector {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 3.行长度：每行不得超过 120 个字符，除非单行不可分割。*/
/* 4.选择器： 但一些属性有多个选择器时，每个选择器声明必须独占一行。*/
.post,
.page,
.comment {
line-height: 1.5;
}
/* 4.选择器： >、+、~ 选择器的两边各保留一个空格*/
main > nav {
padding: 10px;
}
/* 4.选择器：属性选择器中的值必须用双引号包围。*/
article[character="juliet"] {
font-family: "Vivien Leigh", victoria, female;
}
/* 5.属性：属性定义必须另起一行，属性定义后必须以分号结尾。 */
通用：
/* 1.选择器： 如无必要，不得为 id、class 选择器添加类型选择器进行限定。*/
p.danger-message { /* 错误示范*/
color: #c00; /* 错误示范*/
} /* 错误示范*/
/* 2.属性缩写： 在可以使用缩写的情况下，尽量使用属性缩写。*/
.post {
margin: 0 0 0 0;
font: 12px/1.5 arial, sans-serif;
}
/* 3.属性书写顺序：
1. Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
2.Box Model 相关属性包括：border / margin / padding / width / height 等
3.Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
4.Visual 相关属性包括：background / color / transition / list-style 等 */
/* 4. !important：尽量不使用 !important 声明。*/
值与单位
/* 1.文本： 文本内容必须用双引号包围。 */
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
/* 2.数值：当数值为 0 - 1 之间的小数时，省略整数部分的 0 */
.panel {
opacity: .8
}
/* 3.url()：url() 函数中的路径不加引号。*/
body {
background: url(bg.png);
}
/* 4.长度：长度为 0 时须省略单位。 (也只有长度单位可省) */
/* 5.颜色： RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
颜色值可以缩写时，必须使用缩写形式。
颜色值不允许使用命名色值。
颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致*/
文本排行
/* 1.字号：需要在 Windows 平台显示的中文内容，其字号应不小于 12px */
/* 2.字体风格： 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用*/
/* 3.字重： font-weight 属性必须使用数值方式描述。
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。*/
/* 4.行高： line-height 在定义文本段落时，应使用数值。*/
（6）拓展思考：
（7）参考文献：
1.前端 HTML-CSS 规范 https://www.runoob.com/w3cnote/html-css-guide.html
2.CSS编码规范 https://github.com/fex-team/styleguide/blob/master/css.md
返回列表
评论