首页 > 代码库 > CSS编写技巧

CSS编写技巧

2024-08-16 23:54:22   219人阅读

1.尽量少的使用全局的重置代码

全局重置代码：*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生，并且有很多人的第一句CSS代码就是这句。它可以避免不同浏览器的默认间距不同而造成的浏览器兼容性问题。“*”在代码中一般都是代表通配符，在CSS中也是如此，可以代表所有的HTML元素。虽可以杜绝很多代码在浏览器之间的兼容问题，但是这种写法会降低CSS解析的效率。我们有更好的解决办法，就是用下面这种写法：

  • html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
  • table { border-collapse:collapse; border-spacing:0; }
  • fieldset, img { border:0; }
  • ul { list-style:none }
  • 2.不要使用IE的Hacks

  • 虽然CSS的hacks可以解决不少针对IE6的老式浏览器出现的和标准浏览器之间的兼容问题，但是使用这些hacks的同时也会给代码带来一些负面影响并且不能通过CSS的标准验证。更好的写法就是在HTML代码的<head>中添加if条件语句：

    • <!--[if lte IE 6]&#62;
    • <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘styles/ie-styles.css‘ />
    • <![endif]-->

    3.为id和class使用有意义的命名

    假设给你的侧边栏(sidebar)用.l12来命名class, 假如你几个月后或者一两年后再来对网页的样式进行修改，你还会记得这个类名吗，可能在当时你命名的时候它只是一个缩写，但现在看来是两眼一摸黑。如果把侧边栏的类名换成.left_blue,这样一来，你可能立即就会知道这个类选择符是为左侧边栏的显示蓝色区块而创建的，这时它就正确的表达了一定的语义。

    4.合理的利用CSS的继承

    如果页面中的子元素和父元素有很多相同的样式属性,这个时候只要写父元素的属性即可,子元素会继承父元素中的属性。这样可以使代码更简洁,也有效降低了CSS文件的体积。

    例如：

    • #container li{ font-family:Georgia, serif; }
    • #container p{ font-family:Georgia, serif; }
    • #container h1{font-family:Georgia, serif; }

    可以写成：

    • #container{ font-family:Georgia, serif; }

    5.结合多重选择器

    如果有很多样式属性是相同的，你同样可以结合成一句代码，这样也可以使代码更简洁。

    例如：

    • h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    • h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    • h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    更好的写法：

    • h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    6.将代码缩写

    利用CSS的缩写，可以将不少CSS属性进行缩写，比如font、padding、margin、border-width、background等都可以进行缩写。

    例如：

    • li{
    • font-family: Arial, Helvetica, sans-serif;
    • font-size: 1.2em;
    • line-height: 1.4em;
    • padding-top: 5px;
    • padding-bottom: 10px;
    • padding-left: 5px;
    • }

    可以写成：

    • li{
    • font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    • padding: 5px 0 10px 5px;
    • }

    7.有组织的编写代码

    应当给代码添加一些注释，这样当你日后再来修改这些CSS代码的时候能够做到一目了然，而不是看到一堆杂乱无章的代码。

    • /*-------------------------
    •    CSS Reset
    • -------------------------*/
    •  
    • /*-------------------------
    •    Generic Classes
    • -------------------------*/
    •  
    • /*-------------------------
    •    Layout styles
    • -------------------------*/
    •  
    • /*-------------------------
    •    Section specific styles
    • -------------------------*/
    •  
    • /*-------------------------
    •    Header
    • -------------------------*/
    •  
    • /*-------------------------
    •    Content
    • -------------------------*/
    •  
    • /*-------------------------
    •    Footer
    • -------------------------*/

    8.使用外部样式表

    要养成将HTML结构和CSS样式表进行分离的好习惯，将CSS代码写在一个CSS文件中并通过的形式在网页中引用。如果是单独的页面你可以不这么做，但如果是多个页面的时候这样做的好处就很明显了。通过修改外部CSS文件，你就可以轻松修改CSS代码，而不是到每个HTML页面中去寻找CSS样式表。

    • <style type=‘text/css‘ >
    • #container{ .. }
    • #sidebar{ .. }
    • </style >
    •  
    • OR
    •  
    • <li style=‘font-family:Arial, helvetica, sans-serif; color:#666; ‘ >

    更好的写法：

    • <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘css/styles.css‘ />

    9.将CSS文件进行拆分

    如果在一个大型Web项目中有多个模块，每个模块又设置了不同的样式。这个时候可以将CSS文件分割成几个小CSS文件。一般的做法是重置代码分成一个单独的CSS文件，布局分成一个单独的CSS文件，一般类的模块分成一个CSS文件，特殊类的模块分成一个CSS文件。这样的做法可以让你在大型Web项目中轻松组织你的CSS代码，多个CSS文件的载入意味着更多的HTTP请求，在相应的页面载入相应的CSS文件，这样当然可以减少HTTP的请求数。具体的做法是将多个CSS文件导入到一个单独的CSS文件中。

    • @import ‘style/css/reset.css‘;
    • @import ‘style/css/typography.css‘;
    • @import ‘style/css/layout.css‘;

    10.压缩CSS代码

    一旦项目完成之后，将你的CSS代码文件上传到CSS Compressor，可以对CSS文件进行压缩，以减小CSS文件的大小和网页装载的时间。

    希望这些CSS的小技巧能帮助你写出更好更高质量的CSS代码，如果你也要分享你的几个CSS技巧，你可以发表评论。

CSS编写技巧


联系
我们