等待-放飞梦想

勤现在-乐将来

如何使你的CSS样式更易阅读?

Await / 前端交互 / 2009/07/07 3:47 / 热度(4,051)

在做wordpress主题的时候,样式是最重要的一部分。作为主题的制作者,我们不但要考滤页面的还原完整度,还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美,但每个人都想主题更能够按自己的想法去表现。这样就必须通过修改CSS来完成;那么——样式的易阅性在这个时候很重要。对于一个不是很精通CSS的人来说,怎样使他能够简单、方便的修改CSS成了很重要的一环。
如果CSS的类别名称和排版都很乱。那修改起来是一件非常痛苦的事情。看下面这段CSS样式:

.blf1 li {margin:15px 0 10px;padding:10px;border:1px solid #A6C9E1;}

你能很清楚的知道这个样式是针对哪个写的吗?我想除了写的人,不会有人知道了;就算是写得人,一个月后他自己也许也不知道了!再看下面这个:

  1. .commentlist li {
  2.                    margin: 15px 0 10px;
  3.                    padding: 10px;
  4.                    border: 1px solid #A6C9E1;
  5.                    list-style: none;
  6. }

这个我想了解WP主题的人都知道这个样式是针对评论列表的LI写的吧。

从上面的例子可以看出,要使CSS更易阅读,合理的元素描述和清晰的格式很重要。我在前面已经写过一篇“关于CSS的书写习惯”,简单地介绍了关于自己的CSS书写格式。接下来讲下如何选择合适的、有意义的元素描述内容,从而使得它更易阅读。
不知道大家对于blog的标题和描述是怎么命名的?我个人觉得下面这样的描述是最合理的。

.blog-title { color: #060; }
.blog-description { color: #369; }

我相信大家应该能理解,这个名称是应用于博客的标题和描述。无论您的设计改变了多少次都不会改变。我在这里只是作抛砖引玉。相信大家能够举一反三,写出易读、美观的CSS样式。

评论(15)

  1. kira
    2011/02/03

    博主你好
    你的代码样式 很漂亮
    能透露一下 是什么代码插件吗 谢谢

  2. ADD~``
    2010/10/02

    这样读起来是比较容易啊哦~
    但是重用性会比较差吧~当然 在wordpress里边用起来应该比较好~

    以前看过一些关于css命名的. 有些说法是根据属性来命名~相比博主推崇的根据显示的内容来命名 也许重用性更强一些~ ;-)

  3. 低调VS飞翔
    2010/07/31

    伟大的博主你好,我的博客使用了你创作的主题,但是有一个小小的问题,在博客非详细页面上,我通过对文章某个位置使用后more截断后在主页不能正常显示,但翻看源代码又可以看到,请博主解答一下,谢谢。


  4. 2009/08/16

    沉默的大男生还挺细心的,沉默是博主一贯的风格?

  5. 展会合作
    2009/07/22

    :E 这样挺漂亮的

    • polaris_lg
      2009/08/26

      :H 我也这么认为

    • polaris_lg
      2009/08/26

      :G 这个回复框有点意思

    • hkhj326
      2010/06/09

      这样无限下去会怎么样 :roll:

    • Await
      2010/06/10

      有限制嵌套的层数。只能到这层了 :lol:

  6. 西风
    2009/07/20

    导航栏我很是喜欢

  7. 股票软件
    2009/07/17

    CSS怎么压缩啊? :A

  8. keelii
    2009/07/10

    CSS代码得根据自己的情况和需要修改.按需定制会好很多^!^

  9. bolo
    2009/07/07

    喜欢使用第二种方法写css

  10. LAONB
    2009/07/07

    我的CSS让我给压缩了,不过还有一套备份的,加了批注,以后好找。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件,快速提升流量