豆瓣移动端风格的css命名方法与学习
在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的.
在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义.
豆瓣的前段相对其他网站来说还是比较文艺清爽的,所以很值得去向他们团队学习,学习的地方很多,先来取名把.
在最外面的一个<div class="ck-root">.....</div>首先内容先用一个大的div盒子包起来,
<div class="ck-root">.....</div>在观察豆瓣的其他的页面后,我感觉ck-root.里面的ck是一个代号的意思,
不同的代号代表着豆瓣里面不同的页面,也可能是一个单词的缩写,这只是我个人的一个猜测.
“ck-root”而"ck"后面的root是根源的意思,也是祖先的意思,声明这是一个最大的盒子!
在最大的一个div里面又有两个其他的div,这两个分别是导航 与 内容.
<div class="ck-navdrawer">...</div> <div class="ck-main>...</div>
第一个“ck-navdrawer”,每一个相对较大的div都会把ck这个代号书写进去,而后面的“navdrawer”
其实是两个单词组成而成,分别是“nav导航”以及“drawer抽屉(里面藏了许多内容)”,导航里面的其他内容;
但是这个需在豆瓣子页面内的导航条才会出现的哦.
在“ck-navdrawer”里面有两个html5的标签header,article,
header是HTML5里面新增的头部标签,article也是HTML5内引用外界的一个标签在这里是引用到其他的豆瓣页面.
在header标签内又看到了<h2 class="main-nav-btn">...</h2> 与 <div class="user">...</div>
在h2里面“main-nav-btn”中 main=主要 nav=导航 btn="botton(按钮缩写)",意思已经很明确了.当我们点击了“豆瓣”
主要的导航就已经出现在我们面前了,语义化做得很完善,里面的img就是“豆瓣”这字的图片.
而另一个<div class="user">...</div> "user"就是用户的意思,里面是一个a标签链接"登录/注册",
这里面又有两个命名分别有<a href="#" class="nav-accounts ck-login">登录/注册</a>
“nav-accounts” = 导航—账户,对用户登录处的描述 “ck-login” = 代号-登录;用户的登录页面,这样写方便与在其他地方进行追逐
当我们返回article来,article在这里是引用到其他的豆瓣页面.
我们点击完“豆瓣”弹出来的下拉框都是豆瓣内其他的一些页面.这样就完善了一个导航条里面应该有的一些东西
<div class="ck-nav-wrap">...</div> class= 代号-导航-包裹;一个大的盒子将里面导航的内容包裹起来,
<div class="ck-nav-content>..</div> class=ck-导航-内容 ;在这里面就是一个导航内的内容了.
<div class="ck-footer"></div> class=ck-底部; 在这个导航底部里暂时没添加其他内容只是用来占据一行
可用来作为一个以后所要用到的一个铺垫. 也可用作为一个与导航与内容之间隔开的间距元素,当前是用做隔开内容与导航的.
当我们打开了里面又是一个新的天地-
<div class="ck-content">...</div> 这个已经打入到导航内部,可用ck-content内容来进行书写.
<div class="main-nav main-nav-show">..</div> class="主要-导航 主要-导航-显示"多个class的名字,
说明需要多种css用来书写,也会是第一个css因其他标签处的有相同的属性,而这个与其他有不同点所以单一列出一个css.等等..很多种使用方法.
<ul> <li class="nav_douban"> </li> </ul> 然后这里使用了一个无序列表用来显示导航所导航的标题
这个<li class="nav_douban"></li> class=导航_豆瓣(豆瓣的主页面) 很明确的表达出了所要到达的地方.
另外的一个无序列表比之前的那个多添加了一个类名 class="ck-navdrawer-more"
“nav导航”以及“drawer抽屉(里面藏了许多内容),more=更多;表示导航内的其他附加功能,
无序列表 中li里面的a标签又出现一个类名 第一个a标签 :
class="ck-switchmode switch-to-desktop" = ck-开关模式 切换-到-桌面, 很好的一个语义化。
class="ck-modal-link site-feedback" = ck-模式-链接 站点-反馈.
豆瓣移动端的导航条这些,这里的CSS命名都非常的符合w3c标准,也更加的有语义化,
豆瓣相册
ck-box-unit ck-盒子-单元 article-
album-box 相册-盒子 作为相册的类型以album做类名 section
ck-unit-wrap ck-单元-内容 -div
album-title 相册-标题 h1
album-desc 相册-介绍 p
album-date 相册-日期 p
album-pics-con 相册-图片-内容 con=content内容缩写 div
album-photo 相册-照片 a
album-photo-item 相册-照片-项目/一则 img
meta-reply 元-回答/回复 span
album-photo-placeholder 相册-照片-站位符 照片随时可能会增加要提前做好暂位 a
ck-box-unit photo-btn-con ck-盒子-单元 相册-按钮-文本 有相同属性与另添加其他属性写一起 div-article-section
ck-content share-con ck-文本 分享-文本 div
ckbase-btn sharebtn ck基础-按钮 分享按钮 button
ck-login ck-modal-button recbtn ck-登录 ck-模式-按钮 推荐按钮 button推荐
num 号码 推荐,喜欢,的次数 span
ckbase-btn ck-login ck基础-按钮 ck-登录 button喜欢安妮
presto-like-count 随变-喜欢-总数 设置排行,以总数最高为准 p
ck-paginator ck-页面分页数 div
prev 上一个/上一张 span
page ,页数 span
next 下一个/下一张 a
ck-link-extern ck-链接-外部 a
app-ad 应用程序-ad a
logo 品牌 span
info 信息 div
free_icon 免费-图标/应用 下载app span
豆瓣移动端风格的css命名方法与学习的更多相关文章
- CSS命名方法(笔记)
划分CSS的一些方法(不同的划分方法都有利与弊,要记住,最合适项目的才是最好的): ①按功能划分:将字体的CSS存放在font.css.将控制颜色的CSS存放在color.css.将控制布局的CSS存 ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- 面向属性的CSS命名
自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...
- div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
- [转]HTML DIV+CSS 命名规范大全
原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...
- 常用DIV+CSS命名大全集合
一.命名规则说明: - TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",i ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 浅谈我所见的CSS命名风格
在两年工作中,总结一下我所见的css命名风格. 1.单一class命名 .header { width: 500px; } .item { text-indent: 20%; } 优点:简单,渲染效率 ...
- css命名那些事儿
根据目前彩票行业的公司进行css命名的层级解析,此次选择了网易彩票,QQ彩票,澳客彩票网,中国竞彩网,500.com,彩票365,新浪彩票,新浪爱彩,凤凰彩票,淘宝彩票的首页进行css命名的采集和分析 ...
随机推荐
- servlet的含义和作用
servle(Server Applet):全称Java Servlet,未有中文译文.是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servlet是 ...
- C++程序设计的技巧-Pimple的使用
1.Pimpl概念 在进行项目开发中可能遇到的问题,程序编译耗时很长,每一次简单修改接口之后项目都会被完全重新编译,浪费了很多时间.这个机制是Private Implementation的缩写,顾明思 ...
- SDP (Session Description Protocol)
SDP的描述网络上一大堆中文的,可以看看RFC2327 SDP 信息是文本信息,采用 UTF-8 编 码中的 ISO 10646 字符集.SDP 会话描述如下:(标注 * 符号的表示可选字段): v ...
- PHP扩展开发(2) - VS2013环境搭建
1. 安装VS2013 2. Cygwin安装 3. 下载Windows的PHP源码 4. 修改~/ext/ext_skel_win32.php 加上 $cygwin_path = 'c:\c ...
- 如果通过adb查看当前显示的activity
通过adb 查看最上层成activity名字: linux: adb shell dumpsys activity | grep "mFocusedActivity" window ...
- [HDU] 2063 过山车(二分图最大匹配)
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=2063 女生为X集合,男生为Y集合,求二分图最大匹配数即可. #include<cstdio> ...
- JAVA中this用法小结[转]
Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...
- 在类库中使用log4net
最近在做一个类库,用的C#写的,为了DEBUG方便需要日志输出,于是找了log4net这个工具进行日志输出; 因为调用这个类库的是C++,而且本人对C++不是很熟悉,于是无法在app.config或者 ...
- an error occured during the file system check
打开虚拟机的时候,报错: 出错原因: 我之前修改了/etc/fstab文件, 原先/etc/fstab文件中有一行是这样的: LABEL=/i01 /u01 ...
- android slidingview
http://blog.csdn.net/sky181772733/article/details/6969810 http://blog.csdn.net/ithomer/article/detai ...