WEB前端

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

位置:首页 > WEB前端 > css教程,2018-08-10 12:20
良好的命名习惯无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:XHTML我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没

良好的命名习惯

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

CSS编写,CSS代码(图0)

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

CSS编写,CSS代码(图0)

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

CSS编写,CSS代码(图0)

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

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

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

CSS编写,CSS代码(图0)

那么对于这样一个段落

CSS编写,CSS代码(图1)

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

代码缩写

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

CSS编写,CSS代码(图1)

如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf

利用CSS继承

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

CSS编写,CSS代码(图2)

可以合并为

CSS编写,CSS代码(图3)

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

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

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

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

CSS编写,CSS代码(图3)

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

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

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

CSS编写,CSS代码(图3)

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

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

适当的代码注释

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

保持CSS的可读性

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

TAGS:CSS编写CSS代码

猜你喜欢

NewHot