最新公告
  • 欢迎您光临三优资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Niushop单商户V4 前端编码规范

    命名规则

    文件目录命名

    采用小写+下划线方式,命名要精简,最好用一个单词

    例:addon

    JS文件命名

    采用小写+下划线方式

    例:common.js

    CSS文件命名

    采用小写+下划线方式

    例:common.css

    HTML文件命名

    采用小写+下划线方式

    例:index.html

    HTML

    规范

    1、缩进使用soft tab(4个空格);

    2、嵌套的节点应该缩进;

    3、在属性上,使用双引号,不要使用单引号;

    4、属性名全小写,用中划线做分隔符,例:data-name;

    5、不要忽略可选的关闭标签,例:</li>和</body>

    引用CSS,JS

    根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值,可以省略。

    css要写在{block name=”resources”}{/block}中

    例:

    {block name=”resources”}

    <link rel=”stylesheet” href=”login.css” />

    {/block}

    js要写在{block name=”script”}{/block}中

    例:

    {block name=”script”}

    <script>

    </script>

    {/block}

    减少标签嵌套

    在编写HTML代码时,需要尽量避免多余的父节点;

    尽量遵循HTML标准和语义,任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

    代码分离

    HTML、CSS、JS要最大化分离,一个功能对应一个JS、CSS文件,复杂功能除外,如果某个功能img、js比较多,那就单独建立一个文件夹。

    每个功能页面中不能有太多内联样式。

    CSS

    分号

    每个属性声明末尾都要加分号。

    引号

    最外层统一使用双引号;

    url的内容要用引号;

    属性选择器中的属性值需要引号。

    例:

    .logo{

    background-image: url(“logo.png”);

    }

    li[data-type=”single”] {

    }

    命名

    类名使用小写字母,以中划线分隔;

    id采用驼峰式命名;

    scss中的变量、函数、混合、placeholder采用驼峰式命名;

    例:

    /* class */

    .element-content {

    }

    /* id */

    #myDlalog{

    }

    /* 变量 */

    $colorBlack: #000;

    /* 函数 */

    @function pxToRem($px) {

    }

    /* 混合 */

    @mixin centerBlock {

    }

    /* placeholder */

    %myDialog {

    }

    属性简写

    margin 和 padding 尽量用简写;

    常见的属性简写包括:

    font

    background

    transition

    animation

    杂项

    不允许有空的规则;

    元素选择器用小写字母;

    去掉小数点前面的0;

    去掉数字中不必要的小数点和末尾的0;

    属性值’0’后面不要加单位;

    无前缀的标准属性应该写在有前缀的属性后面;

    不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;

    不要在一个文件里出现两个相同的规则;

    用border: 0;代替border: none;

    尽量少用’*’选择器;

    JavaScript

    分号

    为了保障代码的稳定性,每行代码都要加分号

    命名

    由于后端使用的是PHP语言,为了方便统一,js中的变量命名采用小写+下划线的方式,跟php变量名保持一致;

    函数采用驼峰式命名;

    常量全大写,用下划线连接;

    构造函数采用驼峰式命名,首字母大写;

    jquery对象必须以’$’开头命名;

    变量声明

    变量声明:var(禁止用let,兼容性不好);

    常量声明:const;

    数组、对象

    对象属性名不需要加引号;

    例:

    var a = {b: 1};

    数组、对象最后不要有逗号。

    字体图标

    在使用图片时,优先使用字体图标,减少代码体积,运行效率

    字体图标统一在iconfont.css中维护

    如果没有满足的图标,可以进行添加

    https://www.iconfont.cn/

    类名引用

    文字尺寸

    ns-font-size-sm(12px)

    ns-font-size-base(14px)

    ns-font-size-lg(16px)

    文字颜色

    ns-text-color (主色调)

    ns-text-color-red(红色) 用于提示

    ns-text-color-black(黑色)

    ns-text-color-gray(灰色)

    ns-text-color-light-gray(浅灰色)

    ns-text-color-dark-gray(深灰色)

    边框颜色

    ns-border-color(主色调)

    ns-border-color-gray(灰色)

    背景颜色

    ns-bg-color(主色调)

    ns-bg-color-gray(灰色)

    ns-bg-color-light-gray(浅灰色)

    ns-bg-color-dark-gray(深灰色)

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3165260857@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!


    三优资源网 » Niushop单商户V4 前端编码规范

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    三优资源网
    一个高级程序员模板开发平台

    发表评论

    • 162会员总数(位)
    • 1065资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情