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

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

  1. 每个css选择器的属性名按照字典序排列。我虽然不知道为什么要这种做，但是非常用心。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .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的架构非常清晰，也按模块归总。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    /*--------------------------------------------------------------
    >>> 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单位的方式。
    1
    2
    3
    4
    .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作为单位。
    1
    2
    3
    4
    5
    6
    7
    8
    .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. 大致就是这些，不写了。

 

 

 

我要分享

曾小乱

作者： 曾小乱

喜欢写点有意思的东西