首页 > 网站 > WEB开发 > 正文

[转载]CSS 创作指南(Beta)(css规范)

2024-04-27 14:28:18
字体:
来源:转载
供稿:网友
[转载]CSS 创作指南(Beta)(css规范)

当年还在纠结各种规范的时候,不知道从哪里翻到这个,就让我脱离了css这个规范的苦海了。。。

反正就是团队和项目合作说的算,选择合适的进行使用就可以了,见到合适的文章,我也会转载过来的

来源

https://github.com/cssdream/css-creating#indentation

yisibl

CSS 创作指南(Beta)

CSS 是一种领域语言(DSL),层叠与继承赋予了 CSS 优雅多姿的无限创造力。正是由于它如此「简单」, 我们需要一些规范来使其变得更加可依赖。在使用 CSS 的时候不要把它当做一种编程语言,应该把它当做 绘画或者创作。所以本文档不仅仅是一份 CSS 书写规范,更像是 CSS 创作的调色盘。

「作为成功的项目的一员,很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人 使用你的代码,那么你需要编写最具明确性的代码,而不是以自我的喜好来彰显自己的智商。」—— Idan Gazit

目录

  1. 缩进与换行
  2. 注释
  3. 书写格式
  4. 细节美化
  5. 省略
  6. 缩写
  7. 书写顺序
  8. 选择器
  9. 字体
  10. 其他
  11. 预处理工具
  12. 后处理工具
  13. 代码组织
  14. 构建部署

许可

一、缩进与换行

用空格好还是 TAB 好?4个空格还是2个空格好?这是永远的圣战,累觉不爱,本文档不做详细说明。

但是无论如何,项目中应该保持统一的缩进风格,以利于代码的阅读,同时可以避免在 git 等版本管理工具中造成冗余的 diff 信息,而且千万不要空格和制表符(TAB)混用。

本文档规定:

  • 使用2个空格缩进。
  • 使用 Unix 风格换行符(LF) 保证跨平台的一致性,更多。

  • 删除行尾多余的空格因为这些空格通常是不必要的(JSHint 中会通过 trailing 来检测是否存在多余的空格)。

  • 文件末尾增加一个空行没有空行在合并多个文件时可能会把上一个文件的最后一行与下一个文件的第一行合并为一行,特别是,JS 中如果没有这个空行而恰巧末尾没有写分号,整个文件可能就会报错了。

    扩展阅读:

    • 为什么 C 语言源程序最后一行要是一个空行?
    • Why should files end with a newline?

1. 如何保证统一的缩进风格?

Sublime Text 在新建工程的时候会生成 xxx.sumlime-PRoject 文件,可以配置一些基本缩进和排除目录等,但遗憾的是无法与其他编辑器通用。

cube.css 中的示例:

{  "folders": [{    "path": ".",    "folder_exclude_patterns": ["node_modules", "_site"] // 排除目录  }],  "settings": {    "tab_size": 4,    "translate_tabs_to_spaces": true, // tab 转换为空格    "ensure_newline_at_eof_on_save": true, // 保存时文件末尾自动增加一个空行    "trim_trailing_white_space_on_save": true // 删除行尾多余的空格  }}

EditorConfig 是一个帮助开发者在不同的编辑器中保持统一编码 风格的插件,支持了大部分流行的编辑器。它包括两部分:代码风格规则定义(.editorconfig 文件)和支持此规则的编辑器插件。

2. 快速开始

  1. 在项目根目录新建一个 .editorconfig 文件,保存为 utf-8 格式。Windows 用户由于无法直接新建一个只有扩展名的文件,新建的时候在末尾多加一个点 即可(.editorconfig. ),也可以在命令行(CMD)中使用 echo.>.editorconfig 来创建。Windows 中创建 .editorconfig 文件示例

  2. 编辑 .editorconfig 文件

    # css-creating coding styleroot = true# 为所有文件设置风格[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lftrim_trailing_whitespace = trueinsert_final_newline = true# 为 Markdown 文件保留行尾空格[*.md]trim_trailing_whitespace = false
  3. 安装编辑器插件

AppCode Atom Brackets Code::Block
Emacs Geany Gedit GitHub
inteltdJ jEdit Notepad++ phpStorm
PyCharm RubyMine Subtdme Text TextMate
Vim Visual Studio WebStorm

3. EditorConfig 文档

  1. 通配符规则:

    * 匹配任意字符串,但不包括 /

    ** 匹配任何字符串

    ? 匹配任何单字符

    [name] 匹配任何括号中的单字符

    [!name] 匹配任何非括号中的单字符

    {s1,s2,s3} 匹配任何给出的多个字符串

    说明:

    • [] 匹配规则是从当前目录算起。
    • ? 只能匹配且必须有类似 f1.js、f2.js、f12.js 的文件,通过f??.js只能匹配到 f12.js,而f**.js可以匹配到所有。
    • {s1,s2,s3} 之间不能有空格。{f1.js, f2.js, f3.js} 无法匹配f2.jsf3.js
    • *** 可以匹配空字符串,例如 f*.js 可以匹配到 f.js
    • 多个匹配之间的规则如果不冲突是可以合并的。
    • 优先级问题,如果两个匹配所定义的规则冲突,则会以最靠近打开文件的`.editorc
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表