前端开发规范小结

1.工作目录构建规范：

一、前端目录构建规范的作用

目的是与项目开发的目录结构保持一致，便于项目的构建与管理。

二、资源分类

1、源代码资源

指开发者编写的源代码，包括html、css、template等

2、内容资源

指希望作为内容提供给访问者的资源，包括图片、字体、flash、pdf等，最常用的应该就是readme.md文件

三、目录命名规则

1、简洁　　有习惯性的缩写单词，采用容易理解的缩写。如源代码目录src，不要写成source

2、常用的一些文件名称

img：图片　　不要使用image、images、imgs等

js：JavaScript脚本　　不要使用script、scripts等

css：样式表　　不要使用style、styles等

swf：flash　　不要使用flash等

src：源文件目录　　不要使用source等

dep：第三方依赖包　　不要使用lib、library、dependency等

注意：不允许出现复数形式，如imgs、deps是不允许的。

四、根目录的划分

根目录下按照职能进行划分，不允许将资源类型或者业务逻辑的目录划分到根目录下。

根目录下常用的文件如下：

src

test

doc

dep

五、业务逻辑划分src目录结构

业务项目的src目录内，绝大多数情况应该根据业务逻辑划分目录结构。

业务逻辑下常用的文件如下：

utils

common

components

routers

assets

api

store

view

sttic

注意：这是按照vue/react进行的划分，不是固定的，个人习惯。

2.代码命名的规范 （BEM）：

BEM（块元素修饰符）

<div class="box box--simple">
    <div class="box__content box__content--active">
           <p class="box__title">BEM</p>
    </div>
</div>

BEM是一个CSS命名的命名规则，它不涉及如何书写CSS的结构，只是建议每个元素都添加带有如下内容的CSS类名

• • 块名

所属组件的名称

• • 元素

​ 元素在块里面的名称

• • 修饰符

任何与块或元素相关联的修饰符

BEM模式下，看起来很累赘、很冗余，但是每一个CSS类名都很好的描述了它的作用，在结合LESS或者SASS使用时，会使它的书写复杂程度降低。

3.oocss （书写规范）：

OOCSS（面向对象的CSS）

OOCSS有两个主要的原则：分离结构和外观，以及分离容器和内容。

与任何基于对象的编程方法一样，OOCSS 的目的是鼓励代码复用，使得最终的样式可以更快地和更有效地添加和维护。

OOCSS风格的CSS也可以描述为两点：增加class、不使用继承选择符。

同样的，使用oocss 风格，重写BEM上面的代码

<div class="box simple">
    <div class="box-content active">
           <p class="box-title">OOCSS</p>
    </div>
</div>

上面这段代码是一段遵循OOCSS模式的代码

• • 其中"normal"作为外观和结构分离，例如"simple"可用使用的是直角，我将"simple"换成"complex"，就"box"变成了圆角。
  • 分离容器和内容，是指不再将元素位置作为样式的限定词，比如"box-title"就是文本的样式，无论这个类作用在哪里，都会是相同的样式呈现。

​ OOCSS的缺点

• • OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
  • 如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
  • 最好给每一个组件备写一份说明文档，有助于调用与维护