搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 猿哥说 > 前端开发基本原则

前端开发基本原则

猿哥说 2018-02-28

结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。

缩进

统一两个空格缩进(总之缩进统一即可),不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

  • 在 HTML 中指定编码<meta charset="utf-8">

  • 无需使用@charset 指定样式表的编码,它默认为 UTF-8(参考 Mixed Content问题,减小文件字节数。

    其它协议(ftp 等)的 URL 不省略。

    <!-- Recommended -->
    <script ></script>
    
    <!-- Not recommended -->
    <script ></script>
    /* Recommended */
    .example {
      background: url(//www.google.com/images/example);
    }
    
    /* Not recommended */
    .example {
      background: url(http://www.google.com/images/example);
    }

    统一注释

    通过配置编辑器,可以提供快捷键来输出一致认可的注释模式。

    HTML 注释

    <!-- 文章列表列表模块 -->
    <div class="article-list">
    ...
    </div>
    <!--
    @name: Drop Down Menu
    @description: Style of top bar drop down menu.
    @author: Ashu(Aaaaaashu@gmail.com)
    -->

    CSS 注释

    组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔;

    /* ==========================================================================
       组件块
     ============================================================================ */
    
    /* 子组件块
     ============================================================================ */
    .selector {
      padding: 15px;
      margin-bottom: 15px;
    }
    
    /* 子组件块
     ============================================================================ */
    .selector-secondary {
      display: block; /* 注释*/
    }
    
    .selector-three {
      display: span;
    }

    JavaScript 注释

    代码验证

    代码验证不是最终目的,真的目的在于让开发者在经过多次的这种验证过程后,能够深刻理解到怎样的语法或写法是非标准和不推荐的,即使在某些场景下被迫要使用非标准写法,也可以做到心中有数。

    • 使用 W3C CSS Validator 来验证你的 CSS 代码有效性;

    • 区块注释

    • 模块注释


猿哥 | 微信/QQ号:2345775




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《前端开发基本原则》的版权归原作者「猿哥说」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注猿哥说微信公众号

猿哥说微信公众号:gh_c47ce30e2478

猿哥说

手机扫描上方二维码即可关注猿哥说微信公众号

猿哥说最新文章

精品公众号随机推荐