资讯专栏INFORMATION COLUMN

优雅地写css

Kyxy / 2699人阅读

摘要:在规则声明的左大括号前加上一个空格。规则声明之间用空行分隔开。根据属性的重要性顺序书写。因此私有在前,标准在后的写法是考虑到了以后可能会出现的问题。且最好尽量减少没有实际作用的冗余的属性。

https://csswizardry.com/2013/...
https://css-tricks.com/bem-101/
https://www.smashingmagazine....
https://hackhands.com/70-Expe...
重置你的CSS样式
normalize   http://necolas.github.io/norm...
reset http://html5reset.org/
http://www.zhangxinxu.com/wor...
使用CSS常量进行更快速的开发。
/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 
*/
工作流程:调试
* { border: 1px solid #f00; }
使用主样式表
/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("structure.css");
格式

1.类名建议使用破折号代替驼峰法。如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。
2.不要使用 ID 选择器。
3.在一个规则声明中应用了多个选择器时,每个选择器独占一行。
4.在规则声明的左大括号 { 前加上一个空格。
5.在属性的冒号 : 后面加上一个空格,前面不加空格。
6.规则声明的右大括号 } 独占一行。
7.规则声明之间用空行分隔开。

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
 // ... 
}
注释

1.建议使用行注释 (在 Sass 中是 //) 代替块注释。
2.建议注释独占一行。避免行末注释。
3.给没有自注释的代码写上详细说明,比如:为什么用到了 z-index 兼容性处理
4.使用标志。“将样式表分成特定的部分:全局样式 - (正文,段落,列表等),页眉,页面结构,标题,文本样式,导航,表单,注释,附件。

OOCSS 和 BEM

出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:

可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

可以帮助我们创建出可重用、易装配的组件。

可以减少嵌套,降低特定性。

可以帮助我们创建出可扩展的样式表。

OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。

尽量不要使用ID 选择器!!!

在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。

JavaScript 钩子

避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况:轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改。
我们推荐在创建用于特定 JavaScript 的类名时,添加 .js- 前缀:

Sass

属性声明的排序
首先列出除去 @include 和嵌套选择器之外的所有属性声明。紧随后面的是 @include,这样可以使得整个选择器的可读性更高

嵌套选择器

不要让嵌套选择器的深度超过 3 层!

如果有必要_用到嵌套选择器,把它们放到最后,在规则声明和嵌套选择器之间要加上空白,相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}
变量

变量名应使用破折号(例如 $my-variable)代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀(例如 $_my-variable)

css分类

按照css的性质和用途,我们可以将css文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”,并以此为顺序引用。那么他们分别是什么呢?

公共型样式是最为重要的部分,对于比较小的项目,我们只引入一个css,这个css的样式即公共型样式,一般包括:“标签的重置和设置默认值”(以消除不同浏览器之间的差异)、“统一调用背景图和清除浮动或其他需统一处理的长样式(这样就无需对每个进行分别的处理)”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。后面会具体介绍。

特殊型样式即对某个维护率较高的栏目或者某个与网站整体差异较大的页面独立引入这样一个特殊型样式,方便我们维护。

皮肤型样式即产品需要换肤功能,那么我们就需要将颜色、背景等抽离出来放在这里,方便管理。

css文件我们分为了公共型样式、特殊型样式、皮肤型样式,那么在css文件的内部我们又是怎么分类的呢?(此部分为重点) 

重置和默认的css代码
这是为了消除默认样式和浏览器的差异,并设置部分标签的初始样式,以减少后面的重复劳动。 你可以根据自己的网站需求设置,这一部分代码放在css内部的最上面。

统一处理的css代码。 这里可以统一调用背景图和清除浮动(指通用性较高的布局、模块、原件内的清楚)

布局(grid): 我们将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等。常用!

模块(module):即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用!

元件(unit):通常是一个不可再分的较为小巧的个体,被重复用于各种模块中,比如按钮、输入框、loading、图表等。常用!

功能(function):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动。不常用,不可滥用!

皮肤(skin):对于换肤型网站需要使用,将皮肤型的样式抽离出来,非换肤型网站不可滥用,不常用。

状态(state):即一些状态类样式。不常用。

css代码格式

1.选择器、属性和值都是用小写。

这一点非常关键:根据xhtml规范,所有的标签属性和值都要使用小写形式,而我们知道xhtml更为标准,所以最好遵循之,这样,选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了,如class="u-leftArrow"实际上就是不规范的了,最好写成class="u-left_arrow",也可以表达相同的意思。

2.单行写完一个选择器定义。

优点:便于选择器的寻找和阅读,也便于插入新的选择器和编辑,便于模块等的识别。更重要的是可以去除多余空格,使代码紧凑减少换行。试想,如果每一行只有一个属性名和属性值,那么对于一个大项目而言,就很难做到选择器的寻找和阅读了,而使用一行写完一个选择器,那么就有可能缩短为1/6到1/10,这还是非常客观的。

3.最后一个值也要一分号结尾。

实际上,在大括号结束前的值可以省略分号,但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。比如,在最后添加一个属性,如果之前没有在末尾添加分号,那么你就要在新添加的属性前添加分号,否则就会出错

4.省略值为0的单位

优点:可以节省不必要的字节同时也为了方便阅读,我们将0px、0em、0%等都缩写为0

5.使用16进制表示颜色值,其中的字母使用大写形式,并尽量缩写。

除非在你需要透明度而使用rgba,否则都是用#FFFFFF这样的写法,并尽量缩写,如#FFF。使用大写形式,是因为这样更加具有易读性,且有利于压缩,而缩写为了减少不必要的字节。

6.根据属性的重要性顺序书写。

 只遵循横向顺序即可,即先书写定位布局类属性,在书写盒模型等自身属性,最后书写文本类及修饰类属性。 另外,如果属性间存在关联性,则不要隔开写
height和line-height具有关联性,我们尽量不要分开写。

7.私有在前,标准在后。

 先写带有浏览器私有标志的属性,后写W3C标准的属性。因为私有的属性,说明浏览器自身还没有规范化,标准属性是用不了的。若某一天该浏览器的属性规范化了,那么说明标准属性可以使用了,而如果我们先写W3C标准属性,最后写私有属性,就有可能导致私有属性覆盖标准属性。因此私有在前,标准在后的写法是考虑到了以后可能会出现的问题。

8.选择器等级

!important>行内样式style>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器

9.css内部的顺序

 我认为,对于一个网页而言,我们在写css时,可以分为几个部分来写,比如header部分的css代码,main部分的css代码,部分之间通过空格隔开并给以响应的注释,这样更有利于我们的阅读和后期的维护

10.优化方案:对于可以缩写的值我们尽量采用缩写形式,这样有利于减小css文件大小,并增加可读性和可维护性。且最好尽量减少没有实际作用的冗余的属性。有时我们会将定义相同的或者有大部分属性值相同的一系列的选择器组合到一起(采用逗号的方法)来统一定义,这样可以为你节省很多字节和宝贵时间。

10.类选择器的命名建议
 在前面说到,命名className时,应当以其作用、功能来命名,而不要使用没有语义化或者以颜色、左右空间位置的文字来命名。

常用命名

 1. 对于布局,即用.g-作为前缀,通常有以下推荐的写法。
  头部: header或head
  主体: body
  尾部:footer或foot
  主栏: main
  侧栏:side
  盒容器: wrap或box
  主栏子容器:mainc
 侧栏子容器:sidec
 2.对于模块,即.m-作为前缀。元件,.u-作为前缀,通常有下面推荐的写法。
  导航: nav
  子导航:subnav
  菜单:menu
  选项卡:tab
  标题区:head或title
  内容区:body或content
  列表:list
  表格:table
  表单:form
  排行:top
  热点:hot
  登录:login
  标志:logo
  广告:adervertise
  搜索:search
  幻灯:slide
  帮助:help
  新闻:news
  下载:download
  注册:register或regist
  投票:vote
  版权:copyright
  结果:result
  按钮:button
  输入:input
 3.对于功能,即以.f-为前缀,通常推荐如下:
  清除浮动:clearboth
  向左浮动:floatleft
  向右浮动: floatright
  溢出隐藏:overflowhidden
 4.对于颜色,即以.s-为前缀,通常推荐如下:
  字体颜色:fontcolor
  背景:background
  背景颜色:backgroundcolor
  背景图片:backgroundimage
  背景定位:backgroundposition
  边框颜色:bordercolor
 5.对于状态,即以.z-为前缀,通常推荐如下:
  选中:selected
  当前:current
  显示:show
  隐藏:hide
  打开:open
  关闭:close
  出错:error
  不可用:disabled

参考文章
https://www.cnblogs.com/zhuzh...

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

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

相关文章

  • 【underscore 源码解读】如何优雅地写一个『在数组中寻找指定元素』的方法

    摘要:今天要讲的是,如何在数组中寻找元素,对应中的,,,以及方法。如果往一个有序数组中插入元素,使得数组继续保持有序,那么这个插入位置是这就是这个方法的作用,有序,很显然用二分查找即可。 Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中。 阅读一...

    0x584a 评论0 收藏0
  • 由浅入深 | 如何优雅地写一个Mesos Framework

    摘要:从的源代码可以看出实现得比较优雅它是一个代码。它最优的特点是消息在不同的之间传递,它抽象了,消息传递其实是一个事件的库。底层实际上依赖于,为了保证分布式存储最终一致性。如果想写一个,其实大部分时间在如何写好一个实现这一部分。 上周小数羞涩出镜,和数人云架构师春明一起为大家进行了在线直播的干货分享,今天小数抱来了实录,大家可以一睹为快啦!本文从Mesos的基础概念讲起,不懂Mesos的小...

    jzzlee 评论0 收藏0
  • 如何愉悦地写 React 样式

    摘要:样式化组件巧妙地利用标签模板把和组件结合在一起,使得组件跟样式之间的界限变得模糊。由于和都是组件,因此我们可以跟其他任何组件一样使用它们,最终的效果如下使用样式化组件来写样式跟普通的写法是一模一样的。 showImg(https://segmentfault.com/img/bV5OtZ?w=612&h=176); 在 React 中写 CSS 一直是大家觉得不太爽的地方。 有没有一种...

    zhigoo 评论0 收藏0
  • 玩转 React(一)- 前言

    摘要:本人计划编写一个针对中初级前端开发者学习的系列教程玩转。使用的原因是新的语言规范开发效率更高代码更优雅,尤其是基于开发的项目。其次也是目前特别流行的一个前端框架,截止目前,上有将近万,国内一二线互联网公司都有深度依赖开发的项目。 本人计划编写一个针对中初级前端开发者学习 React 的系列教程 - 《玩转 React》。 文章更新频率:每周 1 ~ 2 篇。 目录 玩转 React(...

    waltr 评论0 收藏0
  • 实用Javascript调试技巧分享

    摘要:见过太多同学调试只会用简单的甚至,看着真为他们捉鸡。。下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信。其实提供了文件的搜索功能,只不过大部分时候我们给忽略了。。 见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点...

    jk_v1 评论0 收藏0

发表评论

0条评论

Kyxy

|高级讲师

TA的文章

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