zoukankan      html  css  js  c++  java
  • 前端开发规范之CSS

    前端开发规范之CSS

    使用技术(Css预处理Sass)

    Sass

    Sass官网

    Sass介绍

    Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。

    与Sass相似的是Less

    特色

    • 完全兼容 CSS3
    • 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)
    • 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
    • 函数库控制指令之类的高级功能
    • 良好的格式,可对输出格式进行定制
    • 支持 Firebug

    安装方法

    1. ruby安装 http://rubyinstaller.org/downloads

    因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。 先导官网下载个ruby
    在安装的时候,请勾选 Add Ruby executables to your PATH 这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

    1. 淘宝RubyGems镜像安装 sass

    打开终端(win下可以用git)

       $ gem sources --remove https://rubygems.org/
       $ gem sources -a https://ruby.taobao.org/
       $ gem sources -l
       *** CURRENT SOURCES ***
       
       https://ruby.taobao.org
       <!--请确保只有 ruby.taobao.org-->
       $ gem install sass
    

    Compass

    Compass官网

    compass介绍

    简单说,Compass是Sass的工具库(toolkit)。
    Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

    安装方法

    1. 同样需要预先安装 ruby 这里就不再赘述
    2. 打开终端
    	sudo gem install compass
    	
    	<!--windows可省略sudo-->
    	gem install compass
    

    常用命令

    compass create	<!--compass模板-->
    compass compile		<!--编译文件-->
    compass watch		<!--监听文件改变并编译-->
    

    常用插件

    @import 'compass/css3';			//css3兼容
    

    目录结构及配置

    目录结构

    假如项目名字为 demo

    demo						<!--项目目录-->
    	sass					<!--sass源文件目录-->
    		style.scss			<!--需边缘scss文件-->
    		common				<!--共用scss片段目录-->
    			_var.scss			<!--定义scss-->
    			_reset.scss			<!--重置scss-->
    			_common.scss		<!--共用scss-->
    		index					<!--首页scss片段代码目录-->
    		...
    	stylesheets				<!--编译后文件目录-->
    	config.rb				<!--compass配置文件-->
    

    配置

    require 'compass/import-once/activate'
    require 'compass-normalize'
    # Require any additional compass plugins here.
    
    # Set this to the root of your project when deployed:
    http_path = "/"
    css_dir = "stylesheets"
    sass_dir = "sass"
    images_dir = "images"
    javascripts_dir = "javascripts"
    
    # You can select your preferred output style here (can be overridden via the command line):
    # output_style = :expanded or :nested or :compact or :compressed
    outoput = :compressed
    
    # To enable relative paths to assets via compass helper functions. Uncomment:
    # relative_assets = true
    
    # To disable debugging comments that display the original location of your selectors. Uncomment:
    # line_comments = false
    
    
    # If you prefer the indented syntax, you might want to regenerate this
    # project again passing --syntax sass, or you can uncomment this:
    # preferred_syntax = :sass
    # and then run:
    # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
    
    

    代码规范

    css模块化

    _reset.scss 	// 对浏览器的默认样式进行重设 
    _layout.scss 	// 管理页面的布局 
    _typeset.scss 	// 图文的编排与 
    _color.scss 	// 统一管理颜色的搭配 
    _ie.scss 		// 把对ie的hack单独分开
    

    书写规范

    样式书写遵循以下格式

    div.header{
    	font-size:12px;
    	font-weight:normal;
    	
    	backgorund:url(../images/bg.jpg) no-repeat #fff;
    	
    	color:$gray;
    	
    	border:1px solid $gray-light;
    	@include border-radius(5px);
    	
    	> ul.menu{
    		font-size:14px;
    		line-height:1;
    		
    		> li{
    			100px;
    			
    			> a{
    				color:$black;
    				
    				$:hover{
    					color:$blue;
    				}
    			}
    		}
    	}
    }
    

    具体规范

    样式重置

    Normalize.css
    介绍

    normalize.css官网

    normalize不是将所有样式清零,而是让css在各个浏览器中表现一致。这里我们将使用compass-normalize

    安装
    gem install compass-normalize
    
    使用
    1. 首先在compass的配置文件中添加
    require 'compass-normalize'
    
    1. 然后在style.scss里导入
    @import "normalize";
    

    当然你也可以部分导入

    @import 'normalize/html5';
    @import 'normalize/base';
    @import 'normalize/links';
    @import 'normalize/typography';
    @import 'normalize/embeds';
    @import 'normalize/groups';
    @import 'normalize/forms';
    @import 'normalize/tables';
    
    Neat.css
    介绍

    Neat.css官网

    Neat.css 是基于normalize的全新的 CSS Reset,兼容 IE 6+ 以及其他现代浏览器。

    「normalize」的核心理念是不盲目重置为0,让元素拥有统一的默认间距,大小等表现。但针对国内大部分网站不是纯文字排版,Neat.css 选择回归「有即是无,无即是有」的理念,把大部分标签的默认margin,padding 均重置为 0。如果你需要对大面积文字或者文档快速美化,推荐单独引入专门针对汉字排版的type.css。

    模块
    Neat
    全新的样式重置
     
    Layout
    更加丰富的布局
     
    Button
    自适应按钮
    
    Type
    照顾中文的版式设计
     
    Iconfont
    字体图标平台
    
    使用

    Cube 托管于强大的阿里 CDN 上,提供 https 支持,只需按如下方式引入便可自适应协议。

    <link rel="stylesheet" href="//g.alicdn.com/thx/cube/1.3.1/cube.min.css">
    

    布局规范

    非删格布局
    删格布局

    如采用删格布局,请采用bootstrap框架

    图文编排

    采用normalize默认格式,以下内容全部指文章内容的样式

    标题

    h1-h6 标签来定义标题,其它非文章页面尽量不要使用h1-h6标签

    概述

    使用article标签

    <article>这里是概述</article>
    
    正文
    <div class="content">
        <p>
          这里是段落
        </p>
        <p>
          这里是段落
        </p>
      </div>
    
    加粗(重要)

    用来展示重要信息

    <b>这里是加粗</b>
    
    斜体(重要)

    用来展示重要信息

    <em>这里是斜体</em>
    
    删除

    用来展示已过期信息

    <del>这里是删除</del>
    
    高亮(更重要)

    用来展示更重要的信息

    <strong>这里是高亮</strong>
    

    由于strong标签跟b标签同是加粗,故此给strong标签再加以下样式

    <style>
    	strong{
    		background-color:yellow;		//具体颜色根据主色来定
    	}
    </style>
    
    引用

    展示引用文本,内可嵌套p,span,a标签并且严格按照以下格式进行嵌套

    <cite>
    	<p>这里是引用内容</p>
    	<span>--摘自<a href="#">《前端开发规范之CSS》</a></span>
    </cite>
    

    同时给引用部分添加以下样式

    <style>
      cite{
        display:block;
        background-color:#f4f4f4;
        padding:1em;
      }
      cite span,cite a{
        font-size:0.8em;
        color:#999;
      }
      cite > span{
        display:block;
        text-align:right;
      }
    </style>
    
    有序列表

    注意:不要在文章页给li添加任何掩饰,容易引起IEbug

    <ol>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
      <li>列表4</li>
      <li>列表5</li>
    </ol>
    
    无序列表
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
      <li>列表4</li>
      <li>列表5</li>
    </ul>
    
    图片

    请尽可能的添加img的alt标签

    <img src="images/01.jpg" alt="详细展示">
    
    链接

    尽可能添加title属性,target属性如无特殊要求,全部为_blank

    <a href="http://dctxf.com" title="dctxf's website" target="_blank"></a>
    

    颜色

    颜色分类按照具体项目进行,大概可分为主色一种和辅助色五种左右

    defalut
    #333    //字体默认颜色
    #fff    //白色
    
    red

    警告色

    blue

    一版为链接色

    yellow

    提示色

    green

    成功

    gray

    不可用,无效

    组件

    按钮

    根据模块化原则按钮样式分为以下内容

    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
    

    添加以下样式

    <style>
      .btn{
        display:inline-block;
        padding:0.5em;
        border:1px solid #ddd;
        background:none;
        text-decoration:none;
        color:#333;
      }
      .btn:hover{
        background:#eee;
      }
    </style>
    

    更多个性化样式请在 btn- 里面添加

    表单

    保证每个输入框,下来框都有label包裹

    <form action="">
      <label for=""><input type="text"></label>
    </form>
    
    分页
    图片
    表格
    弹出
    正常
    成功
    失败
    错误
    未知
  • 相关阅读:
    printcap
    browser-ua
    PHP 开发 APP 接口 学习笔记与总结
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 72 编辑距离
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode 71 简化路径
    Java实现 LeetCode70 爬楼梯
  • 原文地址:https://www.cnblogs.com/dctxf/p/5104552.html
Copyright © 2011-2022 走看看