共享20条撰写 CSS 编码的提议

2021-01-20 18:08 jianzhan

在这篇文章内容中,我想跟你共享 20 条由 CSS 小区强烈推荐的承诺和最好实践活动。 一些提议将会较为合适初学者,而一些则更高級1些,但我期待每一个人都可以以在本篇文章内容中获得自身不知道道的专业知识。

01、慎重应用外边距特性

与其它的特性不一样,竖直方位上的外边距相遇时可能产生折叠。这代表着假如1个元素的下边距遇到了另外一个元素的上边距,那末2者中较大的1个将被留下。下面是1个简易的事例。

 <div class="square red"></div>
    <div class="square blue"></div>
    .square {
        width: 80px;
        height: 80px;
    }
    .red {
        background-color: #F44336;
        margin-bottom: 40px;
    }
    .blue {
        background-color: #2196F3;
        margin-top: 30px;
    }

实际上上述两个元素在竖直方位上的间距其实不是 70px, 而是 40px, 蓝色正方形的 margin 沒有被测算在内。 有许多的方式清除这类默认设置的个人行为,但最好是的方式是只应用1个方位上的 margin 特性,例如说 margin-bottom 。

02、运用盒子实体模型合理布局

盒子实体模型当然有其存在的理由。float 和 inline-block 自然还可以工作中,但它们全是款式化文本文档的基本专用工具,而并不是全部网站。从某种实际意义来讲, Flexbox 是为更非常容易更精准建立大家要想的合理布局而设计方案的。

Flexbox 实体模型出示的1系列特性给了开发设计者更大的灵便性,并且你1旦熟习了它们,那建立任何回应式合理布局全是易如反掌的事。访问器对 Flexbox 的适用也早已贴近完善,因此早已沒有甚么理由可以阻拦你应用 Flexbox 了。

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

03、实行 CSS 重设

虽然这些年来情况早已有一定的好转,可是各访问器的默认设置个人行为還是存在许多矛盾。处理这个难题最好是的方法便是应用1个 CSS 重设文档为全部元素再次设定默认设置款式。这可让你在1个纯净的款式自然环境下工作中,而且在全部访问器中造成同样的結果。

有许多的库做这个工作中做的十分非常好,例如 normalize.css, minireset, 和 ress, 改正了访问器间的不1致。假如你不想应用库,你还可以自身制做1个简易的 CSS 重设,像下面这样。

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

这将会看上去较为刻薄,可是清除了默认设置的 margin 和 padding 大家将更非常容易的放置大家的元素,而无需担忧它会占有附加的室内空间。box-sizing: border-box 是1个很受用的特性,大家将在下面详细介绍这个特性。

04、为全部元素应用 Border-box

很多初学者不知道道 box-sizing 特性,但它确实很关键。掌握它的最好是方法便是看看它的两个可选值。

content-box(default) - 当大家为元素设定了宽度和高宽比,但那只是內容的规格。全部的 padding 和 border 都在不包括在內容之中,也便是在內容的外界。

举例来讲,假如大家有1个 div它的宽度为 100px, padding 为 10px, 那末它的具体宽度为 120px。

border-box - padding和 border 被包括在 宽度和高宽比之中。 假如1个 div 的宽度为 100px ,而被设定了 box-sizing: border-box, 那末它的宽度将自始至终是 100px, 不管你加上是多少 padding 和 border 。

为全部元素设定 border-box 将有益于款式化,并且你在也无需做枯燥的数学课运算了吧。

05、图象做为情况当你为自身的站点加上照片时,特别是你想做回应式设计方案的情况下,运用1个 div 标识并为其设定 background 特性,而并不是应用 <img> 元素。

好像附加的工作中并沒有起到任何功效,但具体上这更利于你对照片设定款式,维持它们原来的规格或依据占比转变,这必须依靠 background-size,background-size 也有1些其它的特性。

  

 <section>
        <p>Img element</p>
        <img src="" alt="bicycle">
    </section>
    <section>
        <p>Div with background image</p>
        <div></div>
    </section>
    img {
        width: 300px;
        height: 200px;
    }
    div {
        width: 300px;
        height: 200px;
        background: url('');
        background-position: center center;
        background-size: cover;
    }
    section{
        float: left;
        margin: 15px;
    }

这类技术性的1个缺陷是你网页页面的可浏览性将会略有严厉打击,由于你的照片不容易被显示屏阅读文章器和模块正确抓取。 这个难题能够被 object-fit 处理,但它还不被全部访问器适用。

06、更好的 Table 边框 

HTML 中的 table 没甚么意思。它们十分怪异,无法设计方案成回应式的,并且很难与总体设计风格1致。例如说,你想为 table 和在其中的元素加上上边框,你将会会获得下面的結果。

正如你所见到的,它有许多反复的边框并且看起来并不是很好,有1个十分迅速且简易的除去双边框的方式,便是将 border-collapse: collapse 加上到 table.

这样看起来就许多了。

07、更好的注解方法

CSS 将会并不是1门程序编写語言但它的编码依然必须被纪录,因此1些简易的注解可能对你的朋友或将来的自身很有协助!

针对 CSS 中的1些较为大的控制模块,例如关键控制模块或新闻媒体查寻,应用设计风格化的注解而且在其后留下1些空行。

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

设计方案中的1些细节或那些并不是非常关键的控制模块,能够用单行注解。

 /*   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;  
    }

08、取名联接

当 class 或 id 不止1个单词的情况下,必须应用 - 标记联接,  CSS 对尺寸写不比较敏感,因此骆驼取名法并不是1个好的挑选。很久之前,下划线不被适用因此破折号变成了默认设置承诺。

 /*  Do     */
    .footer-column-left { }
    /*  Don't  */
    .footerColumnLeft { }
    .footer_column_left { }

09、不必反复设定  

CSS 的很多特性值全是从 DOM 树中的上1级承继下来的,因而取名为堆叠款式表。让大家以 font 为例 - 它基本上一直承继自父连接点,你不必须为网页页面中的每个元素设定该特性。

你只必须为 <html> 或 <body> 设定 font 款式,随后让它1级1级流传下去便可以了。 下面是1个很好的事例。

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

自然,在任何1个子元素中你都可以以依照自身的要求更改这1款式。我要说的便是能应用承继得到的特性就不必再去11特定了。

10、CSS 动漫与转换  

不必根据立即变更元素的宽度和高宽比去动漫元素,或是变更 left/right/top/bottom。最好是的方法是应用 transform() 特性由于它出示了更为圆润的过渡实际效果并且可让你的用意在阅读文章编码时更为易于了解。

下面是1个事例,大家想动漫1个 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 等)有着基本上1致的访问器适配性,你能够随意应用它们。

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 类使其变成鲜红色,但这是不起功效的,由于按钮早已被1个 id 挑选器设定了 background-color,而 id 挑选器材有更高的特指度。它们之间的标准就像下面这样:

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

特指度是能够层叠的,因此 a#button.active 的特指度是高于 a#button 的。 应用特指度高的挑选器将使你持续的应用更高的去遮盖那些本来存在的挑选器,这将最后致使 !important 实际效果。

13、不必应用 !important  

很用心的告知你,不必应用 !important。 及时的1个迅速修补在未来将会致使很多的重新写过。相反,找出你 CSS 挑选器不工作中的缘故,而且尝试去修补它。

仅有在1种场景中应用 !important 是能够接纳的,那便是你想遮盖那些在 HTML 中界定的行内款式。并且撰写行内款式也是1种十分不尽人意的方法,提议终止应用。

14、应用 text-transform  

在 HTML 中,当你应用大写字母的情况下将会是出于某种词义目地,例如说你想强调1个单词的关键性。

 <h3>Employees MUST wear a helmet!</h3>

假如出于某种目地你将1组文字都设定成大写,能够在 HTML 中一切正常撰写文字,随后运用 CSS 变换其尺寸写。 它们看起来全是1样的,可是假如不在左右文中,你的內容将更成心义。  

<div class="movie-poster">Star Wars: The Force Awakens</div>
    .movie-poster { text-transform: uppercase;}

这一样可用于大写或小写的标识符串 - text-transform 特性能够将它们解决的很好。

15、Em, Rem 和 Pixel  

人们在对元素和文字设定规格应当用 em,rem 還是 px 有许多的争执。客观事实是,这3者全是可行的,有自身的优势和缺陷。

全部的开发设计者和新项目全是不一样的,因此不可该有甚么严苛的标准表明何时该用哪种。下面是1些提醒和优良的做法:

em - 1 em 的尺寸与立即父元素的字体样式尺寸相关。 一般用于新闻媒体查寻,em 对回应式设计方案而言是是非非常棒的 ,可是将每一个元素的 em 值变换为 px 的占比是是非非常无法测算的,由于你将会要在 DOM 树上逐级追踪元素。

rem - 以 <html> 元素中的 font-size 为标准, rem 将占比化网页页面中的题目和段落变得很非常容易。维持 <html> 中默认设置的 font-size 而且为其它的元素设定 rem 是1种十分棒的方式。

px - 像素是最精准的操纵方法,可是在 回应式设计方案中它其实不友善,由于它不容易随显示屏尺寸转变而全自动放缩。它们是靠谱的,易于了解的,而且在值和具体結果之间展现出优良的视觉效果联络。

下面我要说的是,不必担心尝试。去应用它们而且找出哪种是你最喜爱的。 有时 em 和 rem 很方便,特别针对回应式页面。

16、在大新项目中应用预解决器  

你将会早已听闻过它们了 - Sass, Less, PostCSS, Stylus 。预解决器是 CSS 发展趋势的下1环节。 它们出示的作用诸如自变量, CSS 涵数,挑选器嵌套循环和其它1些十分酷的物品。这使得 CSS 编码十分易于管理方法,特别在大新项目中。

举个简易的事例,下面是应用了 CSS 自变量和涵数的 Sass 编码片断。

$accent-color: #2196F3;
    a {
        padding: 10px 15px;
        background-color: $accent-color;
    }
    a:hover {
        background-color: darken($accent-color,10%);
    }

应用 CSS 预解决器的唯1缺陷是,它们必须编译程序成真实的 CSS 编码,可是假如你早已决策在你的新项目中应用1个搭建脚本制作,那末这就已不是你应当苦恼的难题了。

假如你想掌握更多有关预解决器的专业知识,请查询现阶段最受欢迎的两个系统软件的实例教程 - Sass 和 Less。

17、Autoprefixers  

为各个访问器加上前缀算得上是撰写 CSS 编码最恼人的难题了。它们不1致,你始终没法精准的你必须哪个,并且假如你真的去1个个兼容并将它们都放到款式表格中,你会发现这是1场恶梦。

谢谢上天,有许多专用工具能够全自动的帮你完成这1全过程,乃至可让你特定你必须适用的访问器 :

线上专用工具: Autoprefixer 文字编写器软件 - Sublime Text, Atom 库 - Autoprefixer

18、在新项目中应用精简编码  

以便提升网站或app的网页页面载入速率大家必须一直应用精简编码 . 编码的精简版本号会移除掉空白和反复的一部分,这样会减少文档的尺寸. 自然,这样的话你的 CSS 编码可能变得十分无法阅读文章,因此最好是一直出示1个 .min 的精简版本号和1个基本的发展趋势版本号.

有许多不一样的方式去精简 CSS 编码 :

线上专用工具 - CSS Minifier, CSS Compressor 文字编写软件 - Sublime Text, Atom 库 - Minfiy , CSSO 和 CSSNano

依据你的工作中步骤,你能够采用上述1个选项,可是提议你一直应用某种方法全自动实行此全过程。

19、Can I Use

不一样的访问器依然存在着许多不1致的适配性难题, 运用 caniuse 或其它相近的服务检验你正在应用的特性是不是被普遍适用, 是不是必须加上前缀, 或说是不是会在某服务平台下出現 bug .

仅仅检验是不是依然是不足的, 你依然必须检测合理布局是不是会莫名其妙的奔溃. 充足掌握客户常常应用的访问器也会出示很大的协助, 因而你能够看到好的适用是是非非常重要的.

20、Validate

认证 CSS 编码将会沒有认证 HTML 或 JavaScript 编码关键, 可是在1个 CSS 认证器上运作你的编码還是有协助的, 它会提醒你是不是撰写了不正确或较为不尽人意的编码, 乃至会得出1些较为中肯的提议协助你改善编码。

总结

以上所述是网编给大伙儿详细介绍的20条撰写 CSS 编码的提议,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!