如何使用CSS编写高效率的CSS代码?6个建议

作者 : 开心源码 本文共1278个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共189人阅读

如何使用CSS编写高效率的CSS代码?6个建议

良好的命名习惯

无疑乱七八糟或者者无语义命名的代码,谁看了都会抓狂。就像这样的代码:

如何使用CSS编写高效率的CSS代码?6个建议

XHTML我想即便是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

如何使用CSS编写高效率的CSS代码?6个建议

CSS问题在于假如你需要把所有本来红色的字体改成蓝色,那修改后就样式就会变成:

如何使用CSS编写高效率的CSS代码?6个建议

这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏假如需要修改成右侧边栏也会很麻烦。所以,请不要用元素的特性(颜色,位置,大小等)来命名一个class或者id,您能选择意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

这样,无论你如何修改定义这些class或者id的样式,都不影响它跟HTML元素间的联络。

另外还有一种情况,少量固定的样式,定义后就不会修改的了,那你命名时就不使用担忧刚刚说的那种情况,如

如何使用CSS编写高效率的CSS代码?6个建议

那么对于这样一个段落

如何使用CSS编写高效率的CSS代码?6个建议

假如果需要把这个段落由原价的左对齐修改为右对齐,那么只要要修改它的className就为alignright即可以了。

代码缩写

CSS代码缩写能提高你写代码的速度,精简你的代码量。在CSS里面有不少能缩写的属性,包括margin,padding,border,font,background和颜色值等,假如您学会了代码缩写,例如代码:

如何使用CSS编写高效率的CSS代码?6个建议

假如您想更理解这些属性要怎样缩写,能参考《常使用CSS缩写语法总结》或者者下载CSS-Shorthand-Cheat-Sheet.pdf

利使用CSS继承

假如页面中父元素的多个子元素用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你能很好的维护你的代码,并且还能减少代码量。那么原本这样的代码:

如何使用CSS编写高效率的CSS代码?6个建议

能合并为

如何使用CSS编写高效率的CSS代码?6个建议

在CSS中定义实使用工具来干你的CSS

我们将’utilities’定义为一个CSS类,实际上它只使用来做一件特定的事情,而不是封装整个元素。

你会看到这个策略经常使用于流行的CSS框架,如Bootstrap和Foundation。

在这些流行的框架中你所看到的少量例子是:

如何使用CSS编写高效率的CSS代码?6个建议

例如,用.hide,就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只要要在你的元素上加上.hide类,它会使元素display: none; 。

我们写了少量实使用程序文件,这些文件在应使用程序之间共享,用少量常使用的实使用程序能减少为每个元素编写特定样式的需求。

一个很好的例子是我们如何用margin和padding实使用程序。下面是padding实使用程序的一个简单例子:

如何使用CSS编写高效率的CSS代码?6个建议

通过结合用这些工具,我们能与我们间距的像素数保持一致,并且能快速标记页面,而不必编写非常多的CSS。

实使用程序背后的理念是,你认为你可可以会不止一次地用它们。假如它是一次性样式,或者者假如你认为组合样式会经常用,那么可可以它作为CSS类将能更好地工作。

适当的代码注释

代码注释能让别人更容易读懂你的代码,且正当的组织代码注释,可使得结构更加清晰。

保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高。当对于少量样式属性较少的选择器,我会写到一行.

如何使用CSS编写高效率的CSS代码?6个建议

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 如何使用CSS编写高效率的CSS代码?6个建议

发表回复