优雅地写css

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");
<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>

格式

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- 前缀：
<button class="btn btn-primary js-request-to-book">Request to Book</button>

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...

本文转载于:猿2048→https://www.mk2048.com/blog/blog_hkhiaca1icb.html

posted @ 2020-06-10 13:12  10年码农  阅读(161)  评论(0)  编辑  收藏  举报