资讯专栏INFORMATION COLUMN

莫闲前端之路学习markdown使用,html和css的编写顺序以及class命名规范

Snailclimb / 2939人阅读

摘要:属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称,使用有组织的或目的明确的名称名称应当尽可能短,并且意义明确,避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。

html属性顺序
class
id
data-*,name
src, for, type, href
title, alt
aria-*, role
/*a标签*/

  Example link


/*input标签*/


/*img标签 img必须加上alt*/


html
css命名 class命名规范:

class 名称中只能出现小写字符和破折号"-";

class 使用有意义的名称,使用有组织的或目的明确的名称;

class 名称应当尽可能短,并且意义明确,避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思;

BEM命名方法:
/* 块--代表更高级别的抽象或组件 */
.block

/* 元素--代表.block的后代 */
.block_element

/* 修饰符--代表.block的不同状态或不同版本 */
.block--modifier

/* 例如 */
.media{}
.media_img{}
.media_img--rev{}
.media_body{}
Foo Corp logo

Welcome to Foo Corp

Foo Corp is the best, seriously!

/*.media是一个块,.media_img--rev是一个加了修饰符的.media_img的变体,它是属于.media的元素。而.media_body是一个尚未被改变过的也是属于.media的元素。*/ html
常用命名:
/* --base 基本-- */
.header                 /* --头部-- */
.logo                   /* --logo-- */
.footer                 /* --底部-- */
.nav                    /* --导航-- */
.top-nav                /* --顶部导航链接-- */
.main                   /* --主体内容-- */
.container              /* --内容居中-- */

--current               /* --默认状态-- */
-title                  /* --标题-- */
-item                   /* --列表-- */
-con                    /* --内容-- */
icon-                   /* --图标- */

/* --侧边栏-- */
.aside
.aside-nav              /* --侧边栏导航-- */
.aside-nav_item         /* --侧边栏分类-- */
.aside-nav--current     /* --侧边栏当前状态-- */

/* --盒子-- */
.box
.box-title              /* --盒子标题-- */
.box-title_txt          /* --盒子标题文字-- */
.box-con                /* --盒子内容-- */
css编码规范
.selector{
  /*显示相关*/
  display
  float
  clear
  cursor
  content

  /*定位等*/
  position
  top
  left
  z-index

  /*盒模型*/
  margin
  padding
  width
  height
  border
  border-radius

  /*排版文字等*/
  color
  font
  vertical-align
  line-height
  white-space
  text-decoration
  text-align

  /*背景*/
  background
  opacity
}

如:
.selector {
  display: block;
  float: right;

  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;

  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  background-color: #f5f5f5;
}

css
less规范
/* less嵌套不超过三层 */
.aside-nav{
  margin-bottom: 10px;
  margin-top: 0;

  dt {
    cursor: pointer;
    background: #fff;

    a {
      text-decoration: none;
      color: @cDark;
    }
  }

  dd {
    display: none;
    height: 30px;
    padding-left: 20px;
    line-height: 30px;
  }
}

less
less文件命规范
index.less                  /* --首页样式-- */
header.less                 /* --头部样式-- */
footer.less                 /* --底部样式-- */
bass.less                   /* --基本样式-- */
box.less                    /* --盒子样式-- */
table.less                  /* --表格样式-- */
buttom.less                 /* --按钮样式-- */
icon.less                   /* --图标样式-- */
iconfont.less               /* --图标字体样式-- */
variable.less               /* --less变量样式-- */
forms.less                  /* --表单样式-- */
aside.less                  /* --侧边样式-- */
normalize.less              /* --重置样式-- */
paginator.less              /* --分页样式-- */
login.less                  /* --登录样式-- */
reg.less                    /* --注册样式-- */

ul***.less                  /* --以ui开头是插件样式-- */
特别注意

html和css/less都用两个空格代替制表符(tab)进行缩进

以组件为单位组织代码段

制定一致的注释规范

使用一致的空白符将代码分隔成块

为选择器分组时,将多带带的选择器多带带放在一行

声明块的右花括号应当多带带成行

每条声明都应该独占一行,所有声明语句都应当以分号结尾

尽量使用简写形式的十六进制,十六进制值应该全部小写,例如,#fff

避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;

/* selector */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0px 1px 2px #ccc;
  background-color: rgba(0,0,0,.5);
}

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

css

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49882.html

相关文章

  • 莫闲前端之路学习markdown使用htmlcss编写顺序以及class命名规范

    摘要:属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称,使用有组织的或目的明确的名称名称应当尽可能短,并且意义明确,避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

    mo0n1andin 评论0 收藏0
  • 前端进阶之路: 前端架构设计(1)-代码核心

    摘要:可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型 可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...

    DevYK 评论0 收藏0
  • 前端进阶之路: 前端架构设计(1)-代码核心

    摘要:可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型 可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...

    baishancloud 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<