zoukankan      html  css  js  c++  java
  • Code Guide (CSS)

    Golden rule

    Every line of code should appear to be written by a single person, no matter the number of contributors.

    1.Syntax

    • Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
    • When grouping selectors, keep individual selectors to a single line.
    • Include one space before the opening brace of declaration blocks for legibility.
    • Place closing braces of declaration blocks on a new line.
    • Include one space after : for each declaration.
    • Each declaration should appear on its own line for more accurate error reporting.
    • End all declarrations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.
    • Comma-separated property values should include a space after each comma(e.g., box-shadow).
    • Don't includes spaces after commas within rgb(), rgba(), hsl(), hsla(), rect().
    • Don't prefix property values or color parameters with a leading zero. e.g. .5px;
    • #fff. not #FFF. not #ffffff.
    • Quote attribute values in selectors.e.g., inpput[type="text"].
    • Avoid 0px, just 0. e.g., margin: 0;

    2.Declaration order

    • Related property declarations should be grouped together following the order:
      1. Positioning
      2. Box model
      3. Typographic
      4. Visual
    • Positioning comes first because it can remove an element from the normal flow of the document and overrride box model related styles. The box model comes next as it dictates a component's dimensions and placement.
    • Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

    3.Don't use @import

    4.Media query placement

    • Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future.

    5.Prefixed properties

    • When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.

    6.Single declarations

    • one line is ok.

    7.Shorthand notation

    • Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values.
      • padding
      • margin
      • font
      • background
      • border
      • border-radius
    • Often times we don't need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier code with unnecessary overrides and unintended side effects.

    8.Boolean attributes

    • A boolean attributes is one that needs no declared value
    • e.g.: <input type="text" disabled> 

    9.Comments

    • Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.
    • Be sure to write in complete sentensces for larger comments and succinct phrases for general notes.

    10.Class names

    • Use meaningful names; use structural or purposeful names over presentational.
    • Prefix classes based on the closest parent or base class.

    11.Selectors

    • Use classes over generic element tag for optimum renering performance.
    • Keep selectors short and strive to limit the number of elements in each selector to three.
    • Scope classes to the closest parent only when necessary(e.g., when not using prefixed classes).

    12.Organization

    • Organize sections of code by component.
    • Develop a consistent commenting hirearchy.
    • Use consistent white space to your advantage when separating sections of code for scanning larger decuments.
    • When using multiple CSS files, break them down by compents instend of page. Pages can be rearranged and component moved.
  • 相关阅读:
    eclipse文件编辑器相关概念
    Oracle ROLLUP和CUBE 用法
    eclipse插件开发常用的选择器
    oracle多cpu并行查询
    MYECLISE6.5下CDT安装
    oracle SAMPLE 语法应用
    常用的gcc命令
    vbscript获取本机的ip地址和mac地址
    什么是Single Sign On
    eclipse插件开发中全局对象的获取
  • 原文地址:https://www.cnblogs.com/guojunru/p/5373682.html
Copyright © 2011-2022 走看看