Skip to content

streamwhite/A-easy-to-follow-CSS-Guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

容易遵循的CSS编码风格

整体结构

依照目的,不断地,将大块拆分成小块,这样结构会更清晰。 比如,navbar可以分成menu, toggler和form。

语法

依照使用的代码编辑器,选择一个较好的CSS格式化插件。比如, shorturl.at/dnoN5

声明顺序

复制以下注释,在注释下添加对应声明:

/* Positioning 声明 */

/* Box-model 声明 */

/* Typography声明*/

/* Visual 声明*/

/* 其他声明*/

前缀

依照使用的代码编辑器,选择一个CSS自动添加前缀的插件;比如,shorturl.at/ciwBE。

简写

  • 尽量不使用简写,来避免重复的声明可能造成的问题。

  • 同时使用自动完成,来节省时间。

Media Query的位置

直接放在单个CSS模块后面,这样结构会更清晰。比如,nav模块的Media Query紧跟着nav模块。

注释

添加语境,或者描述目的。

命名

描述目标,并使用公司已有的常用词汇。

Selectors类型

为了避免重复定义:

  • 尽量使用class。

  • 并且考虑是否可以,让一个样式对应唯一一个class(一对一的关系)。

调整

根据项目实际情况,对规则做出适当调整。

About

A Easy-to-follow CSS Coding Guide

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published