专栏名称: 程序员之家
程序员第一自媒体,与你探讨码农人生路上遇到的各类泛技术话题,定期为你推荐码农人生思考、感悟以及启迪!
目录
相关文章推荐
程序员小灰  ·  深夜王炸,微信搜索:接入 DeepSeek ... ·  2 天前  
程序猿  ·  微信+DeepSeek来了! ·  2 天前  
程序员小灰  ·  DeepSeek 被放弃了,阿里牛逼!!! ·  4 天前  
码农翻身  ·  2月,软考彻底爆了!! ·  3 天前  
51好读  ›  专栏  ›  程序员之家

20条书写 CSS 代码的建议

程序员之家  · 公众号  · 程序员  · 2017-05-10 22:20

正文

作者:Danny Markov

原文:20 Tips For Writing Modern CSS

译者:高华锋

译文:www.jianshu.com/p/7a4947e12b85

(点击文末阅读原文即可前往)


在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。



1. 谨慎使用外边距属性


与其它的属性不同,垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距,那么二者中较大的一个将被留下。下面是一个简单的例子。

   


    .square {

        width: 80px;

        height: 80px;

    }


    .red {

        background-color: #F44336;

        margin-bottom: 40px;

    }


    .blue {

        background-color: #2196F3;

        margin-top: 30px;

    }

其实上述两个元素在垂直方向上的距离并不是 70px, 而是 40px, 蓝色正方形的 margin 没有被计算在内。 有很多的方法消除这种默认的行为,但最好的方法是只使用一个方向上的 margin 属性,比如说 margin-bottom 。



2. 利用盒子模型布局


盒子模型自然有其存在的理由。float 和 inline-block 当然也可以工作,但它们都是样式化文档的基础工具,而不是整个网站。从某种意义来说, Flexbox 是为更容易更精确创建我们想要的布局而设计的。


Flexbox 模型提供的一系列属性给了开发者更大的灵活性,而且你一旦熟悉了它们,那创建任何响应式布局都是轻而易举的事。浏览器对 Flexbox 的支持也已经接近完美,所以已经没有什么理由能够阻止你使用 Flexbox 了。

.container {

        display: flex;

        /* Don't forget to add prefixes for Safari */

        display: -webkit-flex;

    }

3.执行 CSS 重置


尽管这些年来情形已经有所好转,但是各浏览器的默认行为还是存在很多分歧。解决这个问题最好的办法就是使用一个 CSS 重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作,并且在所有浏览器中产生相同的结果。


有很多的库做这个工作做的非常不错,比如 normalize.css, minireset, 和 ress, 纠正了浏览器间的不一致。如果你不想使用库,你也可以自己制作一个简单的 CSS 重置,像下面这样。

  * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

这可能看上去比较苛刻,但是消除了默认的 margin 和 padding 我们将更容易的摆放我们的元素,而不用担心它会占用额外的空间。box-sizing: border-box 是一个很受用的属性,我们将在下面介绍这个属性。



4.为所有元素使用 Border-box


许多初学者不知道 box-sizing 属性,但它的确很重要。了解它的最好办法就是看看它的两个可选值。


content-box(default) - 当我们为元素设置了宽度和高度,但那只是内容的尺寸。所有的 padding 和 border 都在不包含在内容当中,也就是在内容的外部。举例来说,如果我们有一个 div它的宽度为 100px, padding 为 10px, 那么它的实际宽度为 120px。


border-box - padding和 border 被包含在 宽度和高度当中。 如果一个 div 的宽度为 100px ,而被设置了 box-sizing: border-box, 那么它的宽度将始终是 100px, 无论你添加多少 padding 和 border 。


为所有元素设置 border-box 将有利于样式化,而且你在也不用做乏味的数学运算了。



5. 图像作为背景


当你为自己的站点添加图片时,尤其是你想做响应式设计的时候,利用一个 div 标签并为其设置 background 属性,而不是使用 元素。


似乎额外的工作并没有起到任何作用,但实际上这更利于你对图片设置样式,保持它们原有的尺寸或者根据比例变化,这需要借助 background-size,background-size 还有一些其它的属性。

 

       

Img element

        bicycle

   


Div with background image


img {

width: 300px;

height: 200px;

}


div {

width: 300px;

height: 200px;

background: url('');

background-position: center center;

background-size: cover;

}


section{

float: left;

margin: 15px;

}

这种技术的一个缺点是你页面的可访问性可能略有打击,因为你的图片不会被屏幕阅读器和引擎正确抓取。 这个问题可以被 object-fit 解决,但它还不被所有浏览器支持。



6.更好的 Table 边框


HTML 中的 table 没什么意思。它们非常古怪,难以设计成响应式的,而且很难与整体风格一致。比如说,你想为 table 和其中的元素添加上边框,你可能会得到下面的结果。


正如你所见到的,它有很多重复的边框而且看起来不是很好,有一个非常快速且简单的去除双边框的方法,就是将 border-collapse: collapse 添加到 table.


这样看起来就好多了。



7.更好的注释方式


CSS 可能不是一门编程语言但它的代码仍然需要被记录,所以一些简单的注释将会对你的同事或者未来的自己很有帮助!


对于 CSS 中的一些比较大的模块,比如主要模块或者媒体查询,使用风格化的注释并且在其后留下一些空行。

    /*---------------

        #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;  

    }


8.命名连接


当 class 或者 id 不止一个单词的时候,需要使用 - 符号连接,  CSS 对大小写不敏感,所以骆驼命名法不是一个好的选择。很久以前,下划线不被支持所以破折号成为了默认约定。

/*  Do     */

    .footer-column-left { }


    /*  Don't  */

    .footerColumnLeft { }


    .footer_column_left { }

9. 不要重复设置


CSS 的许多属性值都是从 DOM 树中的上一级继承下来的,因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点,你不需要为页面中的每一个元素设置该属性。


你只需要为 或者 设置 font 样式,然后让它一级一级流传下去就可以了。 下面是一个很好的例子。

html {

        font: normal 16px/1.4 sans-serif;

    }

当然,在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。



10. CSS 动画与变换


不要通过直接更改元素的宽度和高度去动画元素,或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。


下面是一个例子,我们想动画一个 ball,让它往右滑动。 不要去改变 left 的值,最好是使用 translateX() 。

.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 等)拥有几乎一致的浏览器兼容性,你可以自由使用它们。



11.不要 DIY, 使用库


CSS 社区非常的庞大而且不断出现新的库。 库被提供于各种用途,从小片段到完善的框架,用于构建响应式程序,而且它们当中大部分都是开源的。


所以下次当你碰到 CSS 问题的时候,在你想自己动手去解决问题的时候,最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。



12.保持选择器的特指度低


不是所有 CSS 选择器都是生而相等的,当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。 但是事情并不总像我们想的那样,就像下面这个例子:

a{

        color: #fff;

        padding: 15px;

    }


    a#blue-btn {

        background-color: blue;

    }


    a.active {

        background-color: red;

    }

我们想为所有按钮添加 .active 类使其变为红色,但这是不起作用的,因为按钮已经被一个 id 选择器设置了 background-color,而 id 选择器具有更高的特指度。它们之间的规则就像下面这样:

ID (#id) > Class (.class) > Type (比如 header)。


特指度是可以堆叠的,所以 a#button.active 的特指度是高于 a#button 的。 使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器,这将最终导致 !important 效果。



13.不要使用 !important


很认真的告诉你,不要使用 !important。 即时的一个快速修复在将来可能导致大量的重写。相反,找出你 CSS 选择器不工作的原因,并且尝试去修复它。


只有在一种情景中使用 !important 是可以接受的,那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式,建议停止使用。



14. 使用 text-transform


在 HTML 中,当你使用大写字母的时候可能是出于某种语义目的,比如说你想强调一个单词的重要性。

Employees MUST wear a helmet!


如果出于某种目的你将一组文本都设置成大写,可以在 HTML 中正常书写文本,然后利用 CSS 转换其大小写。 它们看起来都是一样的,但是如果不在上下文中,你的内容将更有意义。

Star Wars: The Force Awakens


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

这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。



15. Em, Rem 和 Pixel


人们在对元素和文本设置尺寸应该用 em,rem 还是 px 有很多的争论。事实是,这三者都是可行的,有自己的优点和缺点。


所有的开发者和项目都是不同的,所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法:







请到「今天看啥」查看全文