WordPress官方主题css代码的组织方式

有很多人诟病wordpress的架构方式落后，前端代码就是jQuery及其插件的大杂烩。但是我觉得其css代码的组织方式还是值得学习的，聊一聊我从中看到的一些css特征。

1. 每个css选择器的属性名按照字典序排列。我虽然不知道为什么要这种做，但是非常用心。

   .screen-reader-text:focus {
   	background-color: #f1f1f1;
   	-webkit-border-radius: 3px;
   	border-radius: 3px;
   	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   	clip: auto !important;
   	color: #21759b;
   	display: block;
   	font-size: 14px;
   	font-size: 0.875rem;
   	font-weight: 700;
   	height: auto;
   	left: 5px;
   	line-height: normal;
   	padding: 15px 23px 14px;
   	text-decoration: none;
   	top: 5px;
   	width: auto;
   	z-index: 100000; /* Above WP toolbar. */
   }

   这种技能非得有点强迫症才发挥得出来。

2. css的架构非常清晰，也按模块归总。

   /*--------------------------------------------------------------
   >>> TABLE OF CONTENTS:
   ----------------------------------------------------------------
   1.0 Normalize
   2.0 Accessibility
   3.0 Alignments
   4.0 Clearings
   5.0 Typography
   6.0 Forms
   7.0 Formatting
   8.0 Lists
   9.0 Tables
   10.0 Links
   11.0 Featured Image Hover
   12.0 Navigation
   13.0 Layout
      13.1 Header
      13.2 Front Page
      13.3 Regular Content
      13.4 Posts
      13.5 Pages
      13.6 Footer
   14.0 Comments
   15.0 Widgets
   16.0 Media
      16.1 Galleries
   17.0 Customizer
   18.0 SVGs Fallbacks
   19.0 Media Queries
   20.0 Print
   --------------------------------------------------------------*/

   平常我一般会为每一个页面配上一个css文件，再通过grunt合并起来，通用的部分提取出来放到公用的css文件里。WordPress主题将一个页面分为header.php、index.php、footer.php其实这就是现代web组件化的思想，每一个文件里都包含这个页面用到的css和js（我就是这么干的，但是官方不是这样），代码会非常清晰简洁易于维护和重构，只可惜WordPress不是一个单页网站。这也是为什么说现在的前端人员替代了一部分后端人员的工作的原因之一。

3. 字体大小大量使用rem单位覆盖px单位的方式。

   .page-numbers.current {
   		font-size: 15px;
   		font-size: 0.9375rem;
   	}

   一般网上有文章分析通过rem单位来实现字体的响应式，通过更改html元素的字体大小来控制不同屏幕尺寸的字体大小，但是WordPress的官方主题并没有这么做。html元素的默认字体大小是16px，那么16*0.9375=15.而且我注意到WordPress主题的字体大小都是通过rem来控制的，而不会通过em来给自己找麻烦。不过我想不通的是为什么先写了px，再写一次rem呢，估计是为了兼容老旧的IE？难道是因为rem单位不够直观？另外WordPress官方主题还写了在打印机上的样式，使用的是pt单位。

4. margin、padding这些css属性值使用em作为单位。

   .pagination .page-numbers {
   	display: none;
   	letter-spacing: 0.013157895em;
   	line-height: 1;
   	margin: 0 0.7368421053em 0 -0.7368421053em;
   	padding: 0.8157894737em 0.7368421053em 0.3947368421em;
   	text-transform: uppercase;
   }

   写出如此长的margin、padding也是服了。我们都知道em单位是相对单位，但是相对谁呢？每个css属性参照值会不会不一样呢？我个人的测试是字体大小参照的父元素的字体大小，margin参照自身元素的字体值大小。具体情况大家可以自己去试一试。

5. 大致就是这些，不写了。

 

 

 

我要分享