S
Published on
· Last modified on
· Public

More CSS - Write More, Do Less

转载自我的博客:https://simod.org/more-css/

虽然是好几年前的旧梗了,但还是忍不住拿出来,求轻喷...

前言

More CSS 是一种类似于 Less CSS 的 CSS 预处理语言,但不同于 Less 的是,More 努力让 CSS 代码变得更加直观、可读性更强,符合人的思考方式。据 More 官方说法,More 同时支持客户端和服务端(Node.js)。

特色

直观

!unimportant

在 CSS 代码中,每一行的声明都是重要的,但有些声明是较为不重要的。在 More 中,没有 !unimportant 属性的声明都将会被添加 !important 属性,以来确保没有声明会被烦人的具体样式所覆盖。

/* More CSS */
white-space: pre !unimportant;
text-wrap: none;

/* Compiled CSS */
white-space: pre;
text-wrap: none !important

灵活

More CSS 让每个选择器只能指定一个声明,这让 More 变得十分灵活。再也没有烦人的大括号或是让人懒惰的分隔号。这让在你构思中的每一个属性只影响对应的选择器。

/* More CSS */
h3 font-family: sans-serif !unimportant;
h3 text-wrap: none !unimportant;
h4 display: none !unimportant;

/* Compiled CSS */
h3 {
  font-family: sans-serif;
  text-wrap: none;
}
h4 {
  display: none;
}

可读

单词替代数字

用单词来代替数字让 More 的代码阅读起来轻而易举。银行要求我们不使用缩写来写单词来确保准确性,现在 More 也在做同样的事。我们都是人类,所以优先编写人类可读的代码是自然而然的了。

/* More CSS */
#footer h2 line-height: eighteen pixels !unimportant;
#footer h2 height: one-thousand-one-hundred-and-twenty-three pixels !unimportant;
#footer h2 width: automatic !unimportant;

/* Compiled CSS */
#footer h2 {
  line-height: 18px;
  height: 1123px;
  width: auto;
}

缩写?No

More 通过移除缩写并要求所有属性都被指定,以使得你在输入代码时,将会准确地知道你会得到什么效果。再也不会有因为错误的缩写顺序而感到惊讶!

/* More CSS */
div margin-top: ten percent !unimportant;
div margin-right: automatic !unimportant;
div margin-bottom: ten percent !unimportant;
div margin-left: automatic !unimportant;

/* Compiled CSS */
div { 
  margin: 10% 0;
}

英式英语

英式英语更加通用。

/* More CSS */
section.about h3 background-position-horizontal: centre !unimportant;
section.about h3 background-position-vertical: centre !unimportant;
section.about h3 colour: grey !unimportant;

/* Compiled CSS */
section.about h3 {
  background-position: center center;
  color: gray;
}

以你的思考方式来编写

颜色

平面设计者的福音!More 只允许用单词指定颜色,不管是 CYMK 或是 Pantone,More 能让你轻易地把你的印刷设计转化成网页设计。直接从 Pantone 颜色样本书中挑选颜色,而不用考虑它们是否能与 RGB 相匹配。

/* More CSS */
h3 colour: cmyk(twenty-four, one-hundred, one-hundred, nineteen) !unimportant;
#heading background-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;

/* Compiled CSS */
h3 { 
  color: #E8DAB8;
}
#heading {
  background-color: #D06F1A;
}

分数支持

厌倦了每次需要输入小数时而拿出计算器?那么 More 就是为你而设计的!用容易记忆的分数来代替小数!

/* More CSS */
div letter-spacing: one-half pixels !unimportant;
div margin-top: ten-and-three-quarters percent !unimportant;
div margin-right: twelve-and-fourty-five-one-hundreths percent !unimportant;
div margin-bottom: zero !unimportant;
div margin-left: twenty-two-and-five-sevenths percent !unimportant;

/* Compiled CSS */
div {
  letter-spacing: 0.5px;
  margin: 10.75% 12.45% 0 22.714%;
}

浏览器前缀

不要再忘记浏览器前缀了!使用任何 CSS3 属性,More 推荐使用所有浏览器前缀。

/* More CSS */
div.container -moz-box-shadow-horizontal: zero !unimportant;
div.container -moz-box-shadow-vertical: zero !unimportant;
div.container -moz-box-shadow-blur: ten pixels !unimportant;
div.container -moz-box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
div.container -webkit-box-shadow-horizontal: zero !unimportant;
div.container -webkit-box-shadow-vertical: zero !unimportant;
div.container -webkit-box-shadow-blur: ten pixels !unimportant;
div.container -webkit-box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
div.container box-shadow-horizontal: zero !unimportant;
div.container box-shadow-vertical: zero !unimportant;
div.container box-shadow-blur: ten pixels !unimportant;
div.container box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;

/* Compiled CSS */
div.container {
  -moz-box-shadow: 0 0 10px #D06F1A;
  -webkit-box-shadow: 0 0 10px #D06F1A;
  box-shadow: 0 0 10px #D06F1A;
}

后记

本文所有代码来自于 More 官网。翻译水平低下,若有错误,欢迎指出!虽然是好几年前的旧梗了,但还是忍不住拿出来,求轻喷...

G
Published on

已星

V
Published on

已赞~

E
Published on

已星 我也求星

B
Published on

已星,求星

C
Published on
edire:

已星 我也求星

求星

M
Published on

已星,求星

S
Published on
mazyi:

已星,求星

不是我先星你的么...

H
Published on

已星,求星

I
Published on

已星 求星

P
Published on

已星 求星

N
Published on

已星,求星

D
Published on

每个都加一个 !unimportant 好烦哟..

Sign in or Sign up Leave Comment