发表于： 2019-11-05 21:10:12
1 1040
一、今天完成的事情
css代码规范
一.命名规范BEM(Block Element Modifier)
1.Block name
-- 实体名称中的单词之间用连字符分隔(-)
HTML
<div class="menu">...</div><div class="menu-name">...</div>
CSS
.menu { color: red; }
.menu-name { color: red; }
2.Element name
***-- 元素名与块名之间用双下划线分隔(__)***
***-- 需要注意的是不要出现block__elem1__elem2类似的命名，因为元素总是块的一部分，而不是另一个元素的。***
HTML
<div class="menu">
...
<span class="menu__item"></span></div>
CSS
.menu__item { color: red; }
3.Block modifier name
-- 修饰符与块或元素的名称之间用双连字符分隔(--)
-- 修饰语的值与其名称之间用双连字符分隔(--)
HTML
<div class="menu menu--hidden"> ... </div><div class="menu menu--theme--islands"> ... </div>
CSS
.menu--hidden { display: none; }
.menu--theme--islands { color: green; }
Example:
HTML
<header class="header">
<img class="logo">
<form class="search-form">
<input class="search-form__input search-form__input--focus">
<button class="search-form__button search-form__button--size--s"></button>
</form>
<ul class="lang-switcher">
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">en</a>
</li>
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">ru</a>
</li>
</ul></header>
CSS
/* 块命名规则1：block *//* header Block */.header{
...
}
/* 块命名规则2：block-name *//* search-from Block */.header .search-form{
...
}
/* 元素命名规则：block-name__element-name *//* lang-switcher__item Element */.lang-switcher .lang-switcher__item{
...
}
/* 修饰符命名规则1：block-name__element-name--modifier-status *//* search-form__input--focus Modifier */.search-form .search-form__input--focus{
...
}
/* 修饰符命名规则2: block-name__element-name--modifier-name--modifier-value *//* search-form__button--size--s Modifier */.search-form__button--size--s{
...
}
二.注释规范
1.单行注释
注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行。
推荐
/* Comment Text */.sd-style{}
/* Comment Text */.sd-style{}
不推荐
/* Comment Text */.sd-style{}
.sd-style{}/* Comment Text */
2.模块注释
注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与/占一行，行与行之间相隔两行*
推荐
/* Module A
---------------------------------------------------------------- */.mod_a {}
/* Module B
---------------------------------------------------------------- */.mod_b {}
不推荐
/* Module A
---------------------------------------------------------------- */.mod_a {}
/* Module B
---------------------------------------------------------------- */.mod_b {}
3.文件信息注释
@charset "UTF-8";
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
三.代码风格
1.代码格式化
样式书写一般有两种：一种是紧凑格式 (Compact)
.sd-style{display: block;width: 50px;}
一种是展开格式（Expanded）
.sd-style{
display: block;
width: 50px;
}
我们约定统一使用展开格式书写样式
2.代码大小写
/* 推荐 */.jdc{
display:block;
}
/* 不推荐 */.JDC{
DISPLAY:BLOCK;
}
3.选择器
- 尽量少用通用选择器 *
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */.sd-style {}
.sd-style li {}
.sd-style li p{}
/* 不推荐 */
*{}
#sd-style {}
.sd-style div{}
4.属性书写顺序
建议遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.sd-style {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
5.CSS3浏览器私有前缀写法
CSS3 浏览器私有前缀在前，标准前缀在后
.sd-style {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
二、遇到的困难
左边有东西的时候，文字的换行问题，给左边一个最小宽度就不会崩，挤掉左边的内容。
三、明天要做的事情
开始任务六
四、收获
完成了任务五，任务总结之后单独写出来
返回列表
评论