imEhllBdPGMVaArZ

###演示

###注意

1、在用于生产环境时，请确保进行了浏览器默认样式的清理工作(比如常用的reset.css)

2、这里的标签切换只是提供基本的表现（未带相应交互效果），根据需要可以通过外挂其他样式名来更改

#CSS命名真是件难事原文：[Naming CSS Stuff Is Really Hard][1]

这不是一篇关于CSS结构的文章，当然也不是关于命名的相关规范。相反，让我们来谈谈我们怎么调用元素。他们自己的名称。The things we use to link blocks of styles to the elements they're associated with（我们使用连接块的东西他们与风格的元素）。

10个人里面有9个人会同意：在写CSS的时候，给需要的元素命名是最纠结的部分（译者：原文difficult, 认为命名其实可以很随意，但是想命好却很难、很纠结）。这是因为我们并不能预知未来（未来的需求变更）。一个CSS类名在某天或许很适合，但当设计更改，在某天这个就是错误的了。然后我们又要去重改我们的代码结构、样式来满足当前的需求。是不是感觉很讨厌呢？

我们该如何去解决这种问题？以使所选的名字尽可能的保持稳定。

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>闭包示例</title>
	<script>
	/*
	自己的惯性思维写的

	比较糟糕的一种方式,在循环中创建了函数，带来无谓的计算，引起混淆，

	<div class="pub_item">
	<div class="pub_item_wrap clearfix">
	<div class="pub_summary">
	<div class="pub_title"><a href="#">标题名称</a></div>
	<div class="pub_meta clearfix">
	<small class="meta_item timestamp">2014-5-14 18:20</small>
	<small class="meta_item">217浏览</small>
	<p class="meta_cont">The quick, brown fox jumps over a lazy dog.</p>
	</div>
	<div class="pub_action">

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>9x9</title>
	<style>
	span { padding: 0 10px; }
	</style>
	</head>
	<body>

	/*!
	* @author : ${1:author}
	* @date : ${2:date}
	* @desc : ${3:description}
	* @notice : generated by SCSS
	**/

	$base_font_size: 10px!default;
	@function rem($size) {
	@return $size / $base_font_size * 1rem;

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" cotent="IE=edge, chrome=1"><!-- 浏览器以最新版本显示页面 -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 默认的文档编码 -->
	<meta name="viewport" content="user-scalable=no,width=device-width"><!-- 手机viewpoert设置 -->
	<meta name="renderer" content="webkit"><!-- 告诉360浏览器切换为webkit核心(其他的国产多核浏览器会添加这个支持吧？谁知呢！) -->
	<title>常用Meta标签</title>
	</head>
	</html>

	<script>
	// Placeholder
	$('input[aria-label]').each(function() {
	var current = $(this);
	var flag = !!current.attr('aria-label');
	if(flag) {
	$('<span class="placeholder">'+current.attr('aria-label')+'</span>').appendTo(current.parent())
	};

	current.on("focus", function() {

	// 横竖屏
	(function() {
	orientationHandle();
	}());

	function orientationHandle() {
	if(window.orientation === 0) { // 竖屏
	} else { // 横屏
	}
	};