当前位置:首页 > 前端技术 > CSS规范--春风十里不如写好CSS

CSS规范--春风十里不如写好CSS

2022年08月05日 03:22:49前端技术2

先吟几句:

最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿。剧里面印象深刻的是《致橡树》这首诗,念几句:

我如果爱你,绝不像攀援的凌霄花,借你的高枝炫耀自己;
我如果爱你,绝不学痴情的鸟儿,为绿荫重复单调的歌曲;
也不止像险峰,增加你的高度,衬托你的威仪。

不骚了,回到正题,写css也一样需要爱,你爱一门技术就要用心付出,对知识寸土必争,寸草必得。写css容易,写好就需要下功夫了。如果我爱你,就会去研究怎么去写好你,下面先说说怎么规范的写css。


css语法规范:

  • 每条属性声明占一行,增加易读性
 /*bad*/
 body{margin: 0;padding: 0;}
 /*good*/
 body{
     margin: 0;
     padding: 0;
 }
  • 颜色采用十六进制写法(不使用颜色名),并且能够简写的进行简写:
/*bad*/
.example{
    color: #ffaabb;
}
/*good*/
.example{
    color: #fab;
}
  • 0值的单位进行省略,如将margin:0px,写成margin:0:
/*bad*/
.example{
    margin: 0px;
}
/*good*/
.example{
    margin: 0;
}
  • 有选择器组时,每个选择器占一行:
  body,
  html,
  p{
      margin: 0;
      padding: 0;
  }
  • 连字符使用-,而不使用_,因为能少按一个shift就少按,还有和js变量命名区分开。
/*bad*/
.index_list {}
/*good*/
.index-list {}
  • 选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式,其次会对选择器寻找上也会在一定程度上浪费时间)
/*bad*/
.index-list li{}
/*good*/
.index-list .item{}
  • 媒体查询,不要写在文档最后或分开到另外文档,应该写在相应规则的附近,这样有利于修改和阅读
.index-nav{
    margin-top: 10px;
}
/*和相关的规则一起放*/
@media (min-width: 480px){
    .index-nav{
        margin-top: 5px;
    }
}
  • 前缀,css3的一些属性要注意带上前缀:
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
  • 引号方面,使用双引号而不使用单引号,url不用使用引号:
/*no good*/
.example{
    font-family: 'Times New Roman',Georgia,Serif;
    background: url("../images/icon.png");
}
/*good*/
.example{
    font-family: "Times New Roman",Georgia,Serif;
    background: url(../images/icon.png);
}
  • 每条属性声明语句结束后加上分号,最后一条声明可省略分号,但不建议
  • 每个属性声明的冒号(:)后添加一个空格
  • 小于1的小数点的值,省略0,如0.5px,可写成.5px
  • 避免使用@ import指令。应使用link标签来引入css文件
  • 避免使用!important,这个优先级最高,滥用会使得维护困难,代码混乱
  • Less,Sass等预处理言的嵌套不超过3层
  • 避免使用id:(因为id优先级高,且具有唯一性,复用性差,而且id是html与js的挂钩,class是HTML与css的挂钩,这样能够让代码更为的清晰,不用说看到一个id,既要到js里查查有没有什么用,又到css里看看有什么样式,确实麻烦。)
  • 注释需要全面易懂,不要只写一点

css属性声明顺序规范:

css属性的书写顺序大致分为4组,从上到下依次书写:

  1. Positioning Model(定位的相关属性):
    • 有position,display,TRBL,z-index,float,overflow等
  2. Box Model (盒子模型的属性):
    • 有margin,padding,border,width,height等
  3. Typographic (文本,排版)
    • 有font,line-height,text-align
  4. Visual (视觉方面的)
    • 有background,color,transition,list-style

例子:

.example{
    content: "hello";
    /*positioning*/
    position: absolute;
    top: 10px;
    left: 12px;
    /*box model*/
    margin-top: 20px;
    width: 100px;
    heith: 100px;
    /*typographic*/
    text-align: center;
    font-size: 12px;
    /*visual*/
    color: #f00;
    background-color: #0f0;
}

特别的:如果有content属性时,需要把其放到最前面


css的文件分类:

文件分类这不会有什么标准,分好,适合自己开发和维护便可。比如:可以有公共的css,某个页面的css,重置的css,皮肤的css,部件的css等,可根据自己的需求,习惯等分类。不必太过拘束。

  • common.css(通用)
  • main.css(主要)
  • reset.css(重置)
  • skin.css(皮肤)
    ……

css选择器命名:

命名这东西可以说让每个前端开发的人员苦恼的东西,有时得想半天去想一个名字,煎熬啊。老是想,到底怎么样的命名才比较好呢?我这样命名接着会不会重复?等等。。。
到底怎样命名才比较规范,参考一下NEC规范或者是BEM规范。个人比较喜欢NEC,因为其比较简约些,详细的可以到NEC官网上看看。
看看NEC的分类:

  • 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
  • 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
  • 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
  • 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
  • 皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
  • 状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{})

我们参考NEC的分类命名的规范,学习学习它的命名,可以照着使用,也可以有自己不同的命名,可以根据团队的习惯等。规矩是死的,人是活的,能灵活去变通才是最好的,能够写出清晰易懂的代码就ok。


css命名常用单词:

  • 头:header
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 外围容器:wrapper
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 信息:msg
  • 小技巧:tips
  • 标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner
  • 容器:container
  • 按钮:button

单词这方面能看懂就好,英语也要学号才行啊,有时候不懂怎么命名,就查查英文单词怎么写,看得出英语还是很重要啊。css的命名单词长度不要太长太冗余,看懂就好,有些单词过长可以适当的缩写一下。

最后说说:

如果想学好一门技术,就想要从各个方面研究他,本文也是,了解css也要css的规范,这对于强迫症的人就是很好的疗药,我就是这样,总觉得自己的css写得太不规范,也不容易维护,想要去修饰好,所以写写博客来强迫自己去改正,博客是个好东西,写给自己看看同时也写给别人看,所以这会有约束,从而不断的修饰改正错误,从中自己也会学到很多东西,可谓春风十里不如写博客。

作者:渊源远愿
来源链接:https://www.cnblogs.com/Ry-yuan/p/7384149.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17582.html

标签: css
分享给朋友:

“CSS规范--春风十里不如写好CSS” 的相关文章

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。