首页 > css教程 > 正文

可维护、精简化前端代码的 CSS 策略有哪些?【西安IT培训】

转载 2019-02-11 0 16

原标题:可维护、精简化前端代码的 CSS 策略有哪些?【西安IT培训】

陕西优就业西安IT培训小编为web前端工程师推荐CSS策略,希望对大家有用!

 1.不要写不需要的样式

减少 CSS 文件的长度,这样更容易在 CSS 文件中定位代码位置。

明确 CSS 类实际需要做什么,而不是定义一堆已有的垃圾样式。

 2. 考虑把 CSS 当作可复用组件

如果你可以定义可复用的 CSS 工具和组件来使用而不是把 CSS 元素看作每个单页特有的形式和元素,就会大大减少代码的复杂性。

确定你的设计在多个不同的页面之间保持一致,你应该知道如果你改变了一个类的样式,变化会表现在每一个页面上。

 3. 在 CSS 中定义工具以使你的 CSS 更实用

我们将工具定义为这样一种 CSS 类,它是为某种特定的目标而生,而不是为了表示一整个元素。

在流程的 CSS 框架,比如 Bootstrap 和 Foundation 中,你会经常看到对这一策略的应用。

我们已经创建了自己的工具文件并在各个应用之间共用,我们使用一些公共工具来减少为每个元素写特定样式的需求。

关于这点,有一个不错的例子,使用 margin 和 padding 工具。这里我们有一个 padding 工具的示例(我们也定义了 margin 相关的工具,以及只有 padding-left 和 padding-right 的工具等):

通过组合这些工具,我们可以保持空白像素一致,同时快速为页面做上标记,还不用写大量的 CSS。

在定义工具的时候,你应该考虑到会多次使用它们。如果是一次性的样式,或者只是想组合一些常用的样式,那么最好是定义成专门的 CSS 类。

4. 避免嵌套,除非你真的需要它

有一些复选框的表单。 在这个特定的情况下,你需要你的复选框内联(并排)。

你要是试图像这样写你的风格:

这个.link - 黑色链接将被CSS的特殊性所覆盖,并且将无法压倒.my-form li风格。

这可能是您的意图,现在要确保您的列表元素中的所有锚点标记是红色的,但是你不知道未来的元素和可能做出的设计更改。

 5. 利用 BEM 来防止过多的嵌套

BEM (Block Element Modifier) 策略可以地真正防止过度嵌套。

 6. 只在不得已时使用 !important

在一个类上定义 !important 是一种使代码被有痛覆盖的方法,特别是当你试图处理 media 查询时。

而且这对于移动端来说很麻烦。比如说,如果你希望在手机屏幕显示某些内容,则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。

7. 有时候需要重新发明轮子,但请认真考量其他可行选项

在客户端项目中构建自己的网格 CSS 框架,这就是一个重复造轮子的例子。

据我的经验,除非你想知道它是如何工作的,否则自己写这些东西并没有多大的好处。出现过很多自己构建的边缘案例,而且也没有理由不去用别人已经做得很好且免费的东西。

 8. 在乎你的前端代码

在一个需要长期维护的应用程序和一个很难上手且总是出问题的项目之间,我相信不断改进代码是最大重要因素之一。

写 CSS 时使用这八个技巧,你不仅可以节省你自己的时间,还能节省未来接手你代码的开发者的时间。

 点击获取免费网课: http://xue.ujiuye.com/zt/itjnkc/?wt.mc_id=17009350

  给你一个成为土豪的机会(推荐有奖):http://www.ujiuye.com/zt/qgjx/?wt.mc_id=17009350

  给你认识我的机会:http://shaanxi.ujiuye.com/

  来和小U交流IT相关,这里还有50G高薪技能学习资料哦!☞☞企鹅群:468910291

相关文章


  • 通栏导航栏的制作,综合使用CSS属性,代码不超过30行
  • 【有趣的CSS题目二】从条纹边框的实现谈盒子模型
  • 性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式
  • 镂空广告,一行CSS实现滚动时藏在信息流后面的广告效果
  • 如何使用css在放大和缩小浏览器的同时不修改背景图片
  • iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说
  • 【167期】Stylelint 在提升企业微信 CSS 代码质量上的实践
  • CSS的内容属性,多种可能的取值,让样式设置更加丰富