簡易CSSコード_html/css_WEB-ITnose

CSS コードを合理化すると、スタイル ファイルのサイズが削減され、コードが明確になり、保守が容易になります。

省略された属性とデフォルト値を使用する

.header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}/* 可以使用简写属性 margin */.header { margin: 10px 20px 30px 40px; /* 4个值分别对应方向为 top right bottom left */}/* ========== 我是分割线 ========== */.nav-list { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 14px; font-family: Georgia, Serif; line-height: 24px;}/* 可以使用简写属性 font */.nav-list { font: italic small-caps bold 14px/24px Georgia, Serif;}

一般的な省略属性には、アニメーション、背景、境界線、フォント、マージン、パディング、トランジション...が含まれます

使用時にアイコンなどを使用しない場合省略された font 属性 キーワードを使用する場合は、少なくとも font-size 属性と font-family 属性を指定する必要があり、他の属性 (font-weight、font-style、font- など) を指定する場合は、font-size を font-family の前に配置する必要があります。バリアント) が指定されていない場合、デフォルト値が自動的に使用され、font-size の前に配置する必要があり、line-height は font-size の後に配置し、font-size から "/" で区切る必要があります。一部の省略された属性値は省略され、欠落している部分が使用されます。属性のデフォルト値

div { font: 14px Serif;}/* 相当于 */div { font: normal normal normal 14px/normal Serif; /* 1 */}/** * 1.此处缺失的 font-style/font-variant/font-weight/line-height * 都会被解析为默认值 normal,该默认值甚至会覆盖继承的值 * 这和下面的分开申明是有区别的 * 下面代码的 font-style/font-variant/font-weight/line-height 并没有申明， * 则会继承自父元素，也就是 inherit */div { font-family: Serif; font-size: 14px;}

省略された属性に ! important を使用する場合、省略された属性の下にあるすべてのサブ属性が使用されます。属性は重要に設定されます。

色のない境界線を指定して、変更効果を実現できます

a { border: 1px solid; /* 边框颜色默认和字体颜色一样 */ color: red;}a:hover { color: green; /* 字体颜色变化了，边框颜色也会跟着变化 */}

トランジション効果は、期間を指定するだけで簡略化できます

transition: 0.4s; /* transition-duration 不指定的话默认为 0s，那就没有效果了 *//* 相当于 */<br />transition: all 0.4s ease 0s;

background-position のデフォルト値は 0 です% 0 %,

background-position: 0% 0%;<br />

は、省略背景属性を使用する場合に省略できます。どちらか 1 つだけを省略した場合、省略された方が 50%/center になります。

background-position: 0%;/* 相当于 */background-position: 0% 50%;

省略属性にはいくつかの例外があります。省略 不足している部分はデフォルト値を使用せず、既存の値からコピーします (このように理解できます),

例えば、border-color、border-style、border-width、border-radius、 margin、padding...

これらの属性の特徴は、通常、1 つの属性が 4 つの異なる方向に対応する 4 つの値を持つことです。

border-width: 1px; /* => */ border-width: 1px 1px 1px 1px; /* 复制3次 */margin: 10px 20px; /* => */ margin: 10px 20px 10px 20px; /* 复制1次 */padding: 10px 20px 30px; /* => */ padding: 10px 20px 30px 20px; /* 复制中间那个放在最后 */

一部のユーザー エージェント (ブラウザー) によって定義されたスタイルもあります) スタイル シートであり、最新のすべてのブラウザで使用されています。ブラウザのパフォーマンスが一貫している場合は、再度定義する必要はありません。

div { display: block; /* 根本没有意义 */}

結論: 一部の属性に期待する値がデフォルト値と一致している場合またはユーザーエージェントスタイルシートで指定した値を指定する場合は重複を避けて記述してください。

継承を適切に使用する

通常、指定されたスタイルを持つ要素の子孫は、color などの特定のスタイル属性を自動的に継承します

.content h1,<br />.content div,<br />.content p,<br />.content ul,.content li { color: #666;}/* 这样更简单 */.content { color: #666;}

一部の要素には、フォントなどのブラウザのデフォルトのスタイルがあることに注意してください-size of h1、このデフォルトのスタイルは継承された値をオーバーライドします

一般的に継承される属性には、color、font、text-align、text-indent...が含まれます

継承できない属性を強制的に指定して継承を実装することもできます

,

div { padding: inherit; /* 它自己继承了，但是它的后代依然是不能继承的 */}

逆に、継承されるべきプロパティを強制的に継承しないようにすることもできます,

div { font-size: initial; /* 恢复为默认值 */}

互換性の問題により、これら 2 つの値はあまり一般的には使用されません。

結論: 値が継承を通じて取得できる場合は、それを省略します。

グループ セレクター

h1 {color: blue;}h2 {color: blue;}h3 {color: blue;}h4 {color: blue;}h5 {color: blue;}h6 {color: blue;}/* 这样更简单 */h1, h2, h3, h4, h5, h6 {color: blue;}

多くの同じスタイルを持つセレクターをグループ化して、コードを効果的に合理化します。たとえば、ここでは2つの無関係なことが定義されています。コンポーネントのスタイルがあちこちに散在している場合、メンテナンスは困難になります。CSS プリプロセッサを使用すると、この問題を効果的に解決できます。たとえば、Sass の % プレースホルダー構文は、グループ セレクター用にほぼカスタマイズされています。セレクターをグループ化するときは、ブラウザ互換性のあるセレクターをグループ化しないように注意する必要があります。これにより、ルール セット全体が認識されず、無視されます。 16 進数の RGB カラー値

2 ビットすべてが等しい場合、

.badge {  background-color: orange; border-raidus: 5px; color: #fff; font-size: 13px;}中间还有很多其它样式.label { background-color: orange; border-raidus: 5px; color: #fff; font-size: 12px;}

と省略できます。

 

使用较短的具体数值代替较长的关键字

h2 { font-weight: 700;}p { font-weight: 400;}/* 相当于 */h2 { font-weight: bold;}p { font-weight: normal;}

数字 400 等价于 normal，而 700 等价于 bold。

 

简化背景图片路径

背景图片路径可能会是这样，

background-image: url("../../images/bg.gif");

背景图片和CSS文件分这么开起什么作用呢？两者本来就是密切相关的，所以应该把背景图片文件夹和CSS文件放在同一目录下，那路径就会变成这样

background-image: url("images/bg.gif");

简单多了，甚至图片文件夹根本没必要命名为复数形式，如果路径中没有空格或者一些特殊符号，引号也可以去掉，

background-image: url(img/bg.gif);

再进一步，用一个字母来命名图片文件夹，

background-image: url(i/bg.gif);

虽然文件夹的名字已经没有什么语义了，但是，通常在这个目录下常用的也就两个文件夹而已，一个图片文件夹，一个字体文件夹，还有可能会有一个放置其它文件的文件夹，对于背景图片相对较多的情况来说这种方式可以减少相当可观的代码字节量。

可以在 Sass 中把路径保存为一个变量以方便任意切换，

$bg-path: "../images" !default;...background-image: url(#{bg-path}/bg.gif);

 

去掉 0 值的单位

margin: 0px;/* 为0的值带不带单位都是0 */margin: 0;

 

Firefox暂时不支持去掉为0的时间值的单位，也就是说 

transition: color 0.5s linear 0; /* 当前 Firefox(28.0) 会忽略这条属性 */

与其这样，不如干脆就不指定这类值，通常情况下默认的值就是 0秒

transition: color 0.5s linear; /* 完事 */

 

去掉浮点数两端的0

div { background-color: rgba(0,0,0,0.3); opacity: 0.9}

对于不透明度，去掉小数点前面的0也可以很好的理解，因为它不会大于1

div { background-color: rgba(0,0,0,.3); opacity: .9;}

不过对于其它可能大于1的浮点值来说，也许会让其他人以为你是忘记了小数点前面的数，

transition: all .5s;

 

去掉ID选择器前面的限定符

ID本来就是唯一的，在前面加上元素限定和祖先元素通常情况下都是没有意义的，

.container div#box { }/* 精简后 */#box { }

 

下面的内容多多少少有点喜新厌旧的意思了

去掉老旧浏览器兼容代码

body { text-align: center;}.container { margin: 0 auto; text-align: left; width: 960px;}/* 上面的代码是为了实现怪异模式下的 IE 以及 IE5.x 的块元素居中效果 */.container { margin: 0 auto; width: 960px;}

请始终使用标准模式，如今IE6/7/8 都要面临淘汰了。

 

去掉多余的浏览器前缀

还在你的CSS代码中写一大堆浏览器厂商前缀吗？那你就out了！

.header { -webkit-border-radius: 5px; -moz-border-radius: 5px; /* 1 */ -ms-border-radius: 5px; /* 2 */ -o-border-radius: 5px; /* 3 */ border-radius: 5px;}/** * 1.新版本的 Firefox 已经不再支持 -moz-border-radius 属性， * 同时，从 Firefox 4.0 就开始支持标准的 border-radius 写法了。 * 2.IE 9+ 支持标准的 border-radius 写法，IE 8 及更低版本什么写法都不支持。 * 3.Opera 10.50+ 支持标准的 border-radius 写法 * 换芯后的 Opera 同时还支持 -webkit-border-radius 写法 */.header { -webkit-border-radius: 5px; border-radius: 5px;}/* 更进一步 */.header { border-radius: 5px; /* 4 */}/** * 4.另外 Android 2.1+, iOS 4.0+, Safari 5+ 均支持标准 border-radius 写法 */

可以使用 Sass 定义一个 Mixin 来完成这件事情，

@mixin border-radius($radius) {  -webkit-border-radius: $radius; border-radius: $radius;}.header { @include border-radius(5px);}

用 Less 同样，

.border-radius(@radius) {  -webkit-border-radius: @radius; border-radius: @radius;}.header { .border-radius(5px);}

将常用的 CSS3 属性全部封装成 Mixin，既可以减少代码量，也可以很好地控制哪些浏览器前缀应该去掉，而哪些应该保留，当某个前缀不再需要的时候可以很轻松地删掉，更多资料请参考 http://css3please.com/，在这里你可以更清楚地看到某个属性需要哪些浏览器厂商前缀，也可以参考使用以下项目，都有很成熟的 Mixins 供使用，