资讯专栏INFORMATION COLUMN

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

mo0n1andin / 2165人阅读

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

html属性顺序

</>复制代码

  1. class
  2. id
  3. data-*,name
  4. src, for, type, href
  5. title, alt
  6. aria-*, role

</>复制代码

  1. /*a标签*/
  2. Example link
  3. /*input标签*/
  4. /*img标签 img必须加上alt*/
  5. html
css命名 class命名规范:

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

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

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

BEM命名方法:

</>复制代码

  1. /* 块--代表更高级别的抽象或组件 */
  2. .block
  3. /* 元素--代表.block的后代 */
  4. .block_element
  5. /* 修饰符--代表.block的不同状态或不同版本 */
  6. .block--modifier
  7. /* 例如 */
  8. .media{}
  9. .media_img{}
  10. .media_img--rev{}
  11. .media_body{}

</>复制代码

  1. Foo Corp logo
  2. Welcome to Foo Corp

  3. Foo Corp is the best, seriously!

  4. /*.media是一个块,.media_img--rev是一个加了修饰符的.media_img的变体,它是属于.media的元素。而.media_body是一个尚未被改变过的也是属于.media的元素。*/
  5. html
常用命名:

</>复制代码

  1. /* --base 基本-- */
  2. .header /* --头部-- */
  3. .logo /* --logo-- */
  4. .footer /* --底部-- */
  5. .nav /* --导航-- */
  6. .top-nav /* --顶部导航链接-- */
  7. .main /* --主体内容-- */
  8. .container /* --内容居中-- */
  9. --current /* --默认状态-- */
  10. -title /* --标题-- */
  11. -item /* --列表-- */
  12. -con /* --内容-- */
  13. icon- /* --图标- */
  14. /* --侧边栏-- */
  15. .aside
  16. .aside-nav /* --侧边栏导航-- */
  17. .aside-nav_item /* --侧边栏分类-- */
  18. .aside-nav--current /* --侧边栏当前状态-- */
  19. /* --盒子-- */
  20. .box
  21. .box-title /* --盒子标题-- */
  22. .box-title_txt /* --盒子标题文字-- */
  23. .box-con /* --盒子内容-- */
css编码规范

</>复制代码

  1. .selector{
  2. /*显示相关*/
  3. display
  4. float
  5. clear
  6. cursor
  7. content
  8. /*定位等*/
  9. position
  10. top
  11. left
  12. z-index
  13. /*盒模型*/
  14. margin
  15. padding
  16. width
  17. height
  18. border
  19. border-radius
  20. /*排版文字等*/
  21. color
  22. font
  23. vertical-align
  24. line-height
  25. white-space
  26. text-decoration
  27. text-align
  28. /*背景*/
  29. background
  30. opacity
  31. }
  32. 如:
  33. .selector {
  34. display: block;
  35. float: right;
  36. position: absolute;
  37. top: 0;
  38. right: 0;
  39. z-index: 100;
  40. width: 100px;
  41. height: 100px;
  42. border: 1px solid #e5e5e5;
  43. border-radius: 3px;
  44. font: normal 13px "Helvetica Neue", sans-serif;
  45. line-height: 1.5;
  46. color: #333;
  47. text-align: center;
  48. background-color: #f5f5f5;
  49. }
  50. css
less规范

</>复制代码

  1. /* less嵌套不超过三层 */
  2. .aside-nav{
  3. margin-bottom: 10px;
  4. margin-top: 0;
  5. dt {
  6. cursor: pointer;
  7. background: #fff;
  8. a {
  9. text-decoration: none;
  10. color: @cDark;
  11. }
  12. }
  13. dd {
  14. display: none;
  15. height: 30px;
  16. padding-left: 20px;
  17. line-height: 30px;
  18. }
  19. }
  20. less
less文件命规范

</>复制代码

  1. index.less /* --首页样式-- */
  2. header.less /* --头部样式-- */
  3. footer.less /* --底部样式-- */
  4. bass.less /* --基本样式-- */
  5. box.less /* --盒子样式-- */
  6. table.less /* --表格样式-- */
  7. buttom.less /* --按钮样式-- */
  8. icon.less /* --图标样式-- */
  9. iconfont.less /* --图标字体样式-- */
  10. variable.less /* --less变量样式-- */
  11. forms.less /* --表单样式-- */
  12. aside.less /* --侧边样式-- */
  13. normalize.less /* --重置样式-- */
  14. paginator.less /* --分页样式-- */
  15. login.less /* --登录样式-- */
  16. reg.less /* --注册样式-- */
  17. ul***.less /* --以ui开头是插件样式-- */
特别注意

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

以组件为单位组织代码段

制定一致的注释规范

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

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

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

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

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

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

</>复制代码

  1. /* selector */
  2. .selector,
  3. .selector-secondary,
  4. .selector[type="text"] {
  5. padding: 15px;
  6. margin-bottom: 15px;
  7. box-shadow: 0px 1px 2px #ccc;
  8. background-color: rgba(0,0,0,.5);
  9. }
  10. /* Single declarations on one line */
  11. .span1 { width: 60px; }
  12. .span2 { width: 140px; }
  13. .span3 { width: 220px; }
  14. /* Multiple declarations, one per line */
  15. .sprite {
  16. display: inline-block;
  17. width: 16px;
  18. height: 15px;
  19. background-image: url(../img/sprite.png);
  20. }
  21. css

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

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

相关文章

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

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

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

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

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

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

    baishancloud 评论0 收藏0

发表评论

0条评论

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