关于CSS命名规范那些事

最近在整理一套适合公司项目使用的CSS框架,复杂程度似乎远超之前的相信。后续会把经验和心得分享出来。

现在在做的是制定一套适合团队的CSS命名规范,并整理成文档。实际上公司之前有一套自己的CSS规范,并延续使用了很久。但是以目前的角度看来,结构语义化话不强,命名混乱使得这套规范在一些大型的项目中显得力不从心。

而实际上关于CSS的命名和结构语义化的争论一直没有停止过,就像现在火热的甜党和咸党之争。甚至战火已经烧到分隔符是用“-”、“_”还是驼峰命名的地步。

继续阅读 »

:first-child失效的一些疑惑

今天的项目中需要用到:first-child伪类,但是发现fist-child失效,且last-child正常!

W3C中对:first-child伪类的定义是:

:first-child 伪类向元素的第一个子元素添加样式。

检查了一下我的页面结构,类似:

<div class="test">
  <ul>
      <h3>Title</h3>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
</div>

最后判断可能是因为li标签在ul结构中不是第一个元素,而导致.test li:first-child{border-top:none;}失效,但是我的伪类标签是针对li这个标签来使用的,按照这个伪类的定义,应该和<h3>标签并无关联才对!

最后在不破坏这个页面结构的情况下,只能用:first-of-type伪类来暂时解决这一问题。但是:first-of-type属于CSS3新增的属性,目前不被IE8及以下版本支持。

留存待空闲时候再做研究

CSS3实现超酷分享效果

废话不多说,今天来分享一段通过CSS3来实现的《分享效果》代码。

效果预览:点击预览

HTML部分:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
    <title>CSS3实现超酷分享效果</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
</head> 
<body> 
<div id="wrapper"> 
        <h3>CSS3实现超酷分享效果</h3> 
        <ul class="social" id="css3"> 
            <li class="delicious"> 
                <a href="http://www.delicious.com/"><strong>Delicious</strong></a> 
            </li> 
            <li class="digg"> 
                <a href="http://digg.com/"><strong>Digg</strong></a> 
            </li> 
            <li class="facebook"> 
                <a href="http://www.facebook.com/"><strong>Facebook</strong></a> 
            </li> 
            <li class="flickr"> 
                <a href="http://www.flickr.com/"><strong>Flickr</strong></a> 
            </li> 
            <li class="linkedin"> 
                <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a> 
            </li> 
            <li class="reddit"> 
                <a href="http://www.reddit.com/"><strong>Reddit</strong></a> 
            </li> 
            <li class="rss"> 
                <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a> 
            </li> 
            <li class="twitter"> 
                <a href="http://twitter.com/"><strong>Twitter</strong></a> 
            </li> 
        </ul> 
    </div> 
</div> 
</body> 
</html>

CSS部分:

/* BASIC RESET */ 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;} 

/* HTML ELEMENTS */ 
body { background-image:url("../images/texture.gif"); font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif; font-size:13px; } 
h3 { clear:both; padding:20px; text-align:center; } 
a { color:#AF7F00; text-decoration:underline; } 
a:hover { text-decoration:none; } 

/* COMMON CLASSES */ 
.break { clear:both; } 

/* WRAPPER */ 
#wrapper { width:800px; margin:40px auto; } 

/* SOCIAL ICONS - GENERAL */ 
.social { list-style:none; margin:30px auto; width:464px; } 
.social li { display:inline; float:left; background-repeat:no-repeat; } 
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } 
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; 
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); 
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
} 

li.delicious { background-image:url("../images/delicious.png"); } 
li.digg { background-image:url("../images/digg.png"); } 
li.facebook { background-image:url("../images/facebook.png"); } 
li.flickr { background-image:url("../images/flickr.png"); } 
li.linkedin { background-image:url("../images/linkedin.png"); } 
li.reddit { background-image:url("../images/reddit.png"); } 
li.rss { background-image:url("../images/rss.png"); } 
li.twitter { background-image:url("../images/twitter.png"); } 

/* SOCIAL ICONS - CSS3 */ 
#css3:hover li { opacity:0.2; } 

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; 
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
#css3 li a strong { opacity:0; 
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; 
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 

#css3 li:hover { opacity:1; } 
#css3 li:hover a strong { opacity:1; top:-10px; }

打包下载:

点击下载