欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

20个编写当代CSS代码的提议

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

大白何谓Margin Collapse

差异于其他许多属性,盒模子中垂直偏向上的Margin会在相遇时产生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保存下来,可以从下面这个简朴的例子来进修:

.square {
    width: 80px;
    height: 80px;
}

.red {
    background-color: #F44336;
    margin-bottom: 40px;
}

.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

在上述例子中我们会发明,赤色和蓝色方块的外边距并没有相加获得70px,而是只有赤色的下外边距保存了下来。我们可以行使一些要领来停止这种举动,不外提议来嗣魅照旧只管同一行使margin-bottom属性,这样就显得调和多了。

行使Flexbox举办机关

CSS拭魅战之Flex详解以及其在微信中的兼容实现

在传统的机关中我们风俗行使Floats可能inline-blocks,不外它们更得当于名目化文档,而不是整个网站。而Flexbox则是专门的用于举办机关的器材。Flexbox模子应承开拓者行使许多便捷可扩展的属性来举办机关,预计你一旦用上就舍不得了:

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}

我们已经在Tutorialzine上提供了许多的关于Flexbox的先容与小能力,譬如5 Flexbox Techniques You Need to Know About

行使CSS Reset

固然这些年来跟着赏识器的敏捷成长与类型的同一,赏识器特征碎片化的环境有所改进,可是在差异的赏识器之间如故存在着许多的举动差别。而办理这种题目的最好的步伐就是行使某个CSS Reset来为全部的元素配置同一的样式,担保你能在相对同一干净的样式表的基本上开始事变。今朝风行的Reset库有 normalize.Css, minireset以及 ress ,它们都可以批改许多已知的赏识器之间的差别性。而假如你不规划用某个外在的库,那么提议可以行使如下的根基法则:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

上面的法则看起来没啥用,不外假如差异的赏识器在默认环境下为你配置了差异的外边距/内边距的默认值,照旧会挺贫困的。

统统应为Border-box

固然许多初学者并不相识box-sizing这个属性,可是它确实相等的重要。而最好的领略它的方法就是看看它的两种取值:

  • 默认值为content-box,即当我们配置某个元素的heght/width属性时,仅仅会浸染于其内容尺寸。而全部的内边距与边都是在其之上的累加,譬如某个<div>标签配置为宽100,内边距为10,那么最终元素会占用120(100 + 2*10)的像素。

  • border-box:内边距与边是包括在了width/height之内,譬如配置了width:100px的<div>无论其内边距可能边长配置为几多,其占有的巨细都是100px。

将元素配置为border-box会很利便你举办样式机关,这样的话你就可以在父元素配置高脱期制而不担忧子元素的内边距可能边冲破了这种限定。

以配景图方法行使Images

假如必要在相应式的情形下展示图片,有个简朴的小能力就是行使该图片作为某个<div>的配景图而不是直接行使img标签。基于这种方法共同上background-size与background-position这两个属性,可以很利便地按比例缩放:

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}

不外这种方法也是存在缺陷的,譬如你无法配置图片的懒加载、图片无法被搜刮引擎可能其他相同的器材抓取到,有个不错的属性叫object-fit可以办理这个题目,不外该属性今朝的赏识器支持并不是很完美。

Better Table Borders

HTML中行使Tables举办机关一向是个很头疼的题目,它们行使起来很简朴,可是无法举办相应式操纵,而且也不利便举办全局样式配置。譬如,假如你规划为Table的边与单位的边添加样式,也许获得的功效如下:

table {
    width: 600px;
    border: 1px solid #505050;
    margin-bottom: 15px;
    color:#505050;
}

td{
    border: 1px solid #505050;
    padding: 10px;
}

20个编写今世CSS代码的发起

这里存在的题目是呈现了许多的一再的边,会导致视觉上不和谐的环境,那么我们可以通过配置border-collapse:collapse来举办处理赏罚:

20个编写今世CSS代码的发起

注释名目优化

CSS固然谈不上一门编程说话可是其如故必要添加注释以保障整体代码的可读性,只要添加些简朴的注释不只可以利便你更好地组织整个样式表还可以或许让你的同事可能将来的本身更好地领略。对付CSS中整块的注释可能行使在Media-Query中的注释,提议是行使如下情势:

/*---------------
    #Header
---------------*/header { }header nav { }/*---------------
    #Slideshow
---------------*/.slideshow { }

而计划的细节声名可能一些不重要的组件可以用如下单行注释的方法:

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

同时,不要忘了CSS中是没有//这种注释方法的:

/*  Do  */p {
    padding: 15px;
    /*border: 1px solid #222;*/
}/*  Don't  */p {
    padding: 15px;
    // border: 1px solid #222;  
}

行使Kebab-case定名变量

对付样式类名可能ID名的定名都必要在多个单词之间添加-标记,CSS自己是巨细写不敏感的因此你是用不了camelCase的,另一方面,好久之前也不支持下划线,以是此刻的默认的定名方法就是行使-:

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

而涉及到详细的变量定名类型时,提议是行使BEM类型,只要遵循一些简朴的原则即可以担保基于组件气魄威风凛凛的定名同等性。你也可以参考CSS Tricks来得到更多的细节描写。

停止一再代码

大部门元素的CSS属性都是从DOM树根部担任而来,这也是其定名为级联样式表的由来。我们以font属性为例,该属性每每是担任自父属性,因此我们并不必要再单独地为元素配置该属性。我们只必要在Html可能body中添加该属性然后使其条理转达下去即可:

Html {
    font: normal 16px/1.4 sans-serif;
}

行使transform添加CSS Animations

不提议直接改变元素的width与height属性可能left/top/bottom/right这些属性来到达动画结果,而应该优先行使transform()属性来提供更滑腻的调动结果,而且能使得代码的可读性会更好:

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out {
    left: 500px;
}/* Cool*/.ball.slide-out {
    transform: translateX(450px);
}

Transform的几个属性translate、rotate、scale都具有较量好的赏识器兼容性可以安心行使。

不要一再造轮子

此刻CSS社区已经很是复杂,而且不绝地有新的各式百般的库开源出来。这些库可以辅佐我们办理从小的代码片到用于构建完备的相应式应用的全框架。以是假如下次你再遇到什么CSS题目的时辰,在规划撸起袖子本身上之前可以实行在GitHUB可能CodePen上搜刮可行方案。

尽也许行使低优先级的选择器

并不是全部的CSS选择器的优先级都一样,许多初学者在行使CSS选择器的时辰都是思量以新的特征去复写所有的担任特征,不外这一点在某个元素多状态时就贫困了,譬如下面这个例子:

a{
    color: #fff;
    padding: 15px;
}

a#blue-btn {
    background-color: blue;
}

a.active {
    background-color: red;
}

我们原来但愿将.active类添加到按钮上然后使其表现为赤色,不外在上面这个例子中很明明起不了浸染,由于button已经以ID选择器配置过了配景致,也就是所谓的Higher Selector Specificity。一样平常来说,选择器的优先级次序为:ID(#id) > Class(.class) > Type(header)

停止行使!important

当真的说,万万要停止行使!important,这也许会导致你在将来的开拓中无尽的属性重写,你应该选择更吻合的CSS选择器。而独一的可以行使!important属性的场景就是当你想去复写某些行内样式的时辰,不生手内样式自己也是必要停止的。

行使text-transform属性配置文本大写

<div class="movie-poster">Star Wars: The Force Awakens</div>

.movie-poster {
    text-transform: uppercase;
}

Em, Rem, 以及 Pixel

已经有许多关于人们应该怎样行使em,rem,以及px作为元素尺寸与文本尺寸的接头,而笔者以为,这三个尺寸单元都有其合用与不合用的处所。差异的开拓与项目都有其特定的配置,因此并没有通用的法则来抉择应该行使哪个单元,这里是我总结的几个思量:

  • em – 其根基单元即为当前元素的font-size值,常常合用于media-queries中,em是出格合用于相应式开拓中。

  • rem – 其是相对付Html属性的单元,可以担保文本段落真正的相应式尺寸特征。

  • px – Pixels 并没有任何的动态扩展性,它们每每用于描写绝对单元,而且可以在配置值与最终的表现结果之间保存必然的同等性。

在大型项目中行使预处理赏罚器

预计你必定传闻过 Sass, Less, PostCSS, Stylus这些预处理赏罚器与对应的语法。Preprocessors可以应承我们将将来的CSS特征应用在当前的代码开拓中,譬如变量支持、函数、嵌套式的选择器以及许多其他的特征,这里我们以Sass为例:

$accent-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

行使Autoprefixers来晋升赏识器兼容性

行使特定的赏识器前缀是CSS开拓中常见的事变之一,差异的赏识器、差异的属性对付前缀的要求也纷歧样,这就使得我们无法在编码进程中记着全部的前缀法则。而且在写样式代码的时辰还必要加上特定的赏识器前缀支持也是个贫困活,好在此刻也是有许多器材可以帮助我们举办这样的开拓:

在出产情形下行使Minified代码

为了晋升页面的加载速率,在出产情形下我们应该默认行使压缩之后的资源代码。在压缩的进程中,会将全部的空缺与一再剔除去从而镌汰整个文件的体积巨细。虽然,颠末压缩之后的代码毫无可读性,因此在开拓阶段我们照旧应该行使平凡的版本。对付CSS的压缩有许多的现行器材:

选择哪个器材必定是依靠于你本身的事变流啦~

多参阅Caniuse

差异的赏识器在兼容性上差别很大,因此假如我们可以针对我们所必要适配的赏识器,在caniuse上我们可以查询某个特征的赏识器版本适配性,是否必要添加特定的前缀可能在某个平台上是否存在Bug等等。不外光光行使caniuse必定是不足的,我们还必要行使些特另外处事来举办检测。

Validate:校验

对付CSS的校验也许不如HTML校验可能JavaScript校验那么重要,不外在正式宣布之前用Lint器材校验一波你的CSS代码照旧很故意义的。它会汇报你代码中隐藏的错误,提醒你一些不切合最佳实践的代码以及给你一些晋升代码机能的提议。就像Minifers与Autoprefixers,也有许多可用的器材:

原文:http://tutorialzine.com/2016/08/20-protips-for-writing-modern-Css/

本文地址:http://itbyc.com/web/13207.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1