▲我的css架构理念
前言
做前端已有不短的时间了,在css这片领域越走越久、越走越远,回过头来看看,有很多技能知识掌握了就不会再忘了,比如无图片实现三角形、ie下如何实现半透明效果等等;但有些东西却需要在项目实战中不断地碰壁、总结,再碰壁、再总结,慢慢地去找到适合自己的方法,然后遵循这样的方法,去开发,以收到事半功倍的效果。本篇文章就属于后者,因为是站在整个css的大方向上,对于初学者或者项目实战经验不够多的同学,建议有看不懂的地方不必太介意,可以跳过,也可以留言提问。经验老道者也许也会些许吐槽,觉得跟您有出入,但是,我想说,css架构,因人而异、因项目大小而异,没有最优,只有适合!
从语义化开始
看《css禅意花园》这类比较优秀的书籍就会发现,开篇一定会先提到html语义化。什么是html语义化?其实很简单,html就那么几个标签,table标签用做表格、p标签用作文章段落、h系列标签用作标题,不要整个html页面除了a全部div+span。不得不说,xhtml在定义标签上是有一定局限的,于是在html5里有增添了许多结构化标签,从这方面来看,html语义化也是相当重要的,已经作为规范确立下来了。
为什么要做到html语义化?
严格来说,这是要归到上个段落篇幅的,之所以单独出来,是因为这跟本文的宗旨联系紧密。但是,现在还是没法说,不是卖关子,而是如果这个时候提出来,很难说清楚,大家看着也会云里雾里。如果您有耐心,继续看下去,会理解的。
图文并茂---我的css架构理念
(图1)
(图2)
图1是我目前项目的css目录结构,图2是我从MindManager中截下来的图,两个图会对我下面的文章起到较大帮助。由图2说开去:
1. Css通用库(global.css):该样式表可以在所有的网站上使用,只要是个网站,就可以导入这个样式表。它涉及css各个方面,比如css重置样式、css的布局样式、边距、字体、字号、对齐方式,css通用库是css样式分离原则的直接体现(这里说的样式分离和接下来要说的样式组合原则是两个较为复杂的概念,要很好地理解需要另外的篇幅来解释,所幸这样的文章还是有的,有时间可以看看前端牛人张鑫旭的博客文章:css样式分离之再分离、css样式合并与模块化。我的css通用库跟网上可见的大同小异,您如果有需要,可以直接在张鑫旭的相关文章中找到。下面附上我的css通用库截图:
2. 网站通用css(ktv_style.css):该样式表遵循样式组合原则,什么样式可以放进这个样式表?就是整个网站通用的模块,比如网站通用文字和链接文字的颜色、顶级导航、边框线、通用标题、网站底部、评论功能模块等等,该样式表牵一发动全身,改一个样式,所有的页面都随之改动,所以,在改这个样式的时候要慎重。
3. 单页面css(pages目录下的所有样式表):就像index.css这样的首页样式表,每个页面都独立出一个,这样做的目的是为了解决重命名引发的样式冲突问题。这个问题会随着项目越大、页面结构越复杂而越来越凸显。在页面调用了不同的样式表之后,那么即使html页面使用了相同样式命名,也不会出现冲突问题。
4. 插件用到的css:该目录下用的css基本上是引用的js插件的相关样式表,之所以独立为一个文件夹,是为了维护的方便。
以上4点大体上说清了我的css架构,每一点如果细细地讲解下去,会有很多可讲的东西,比如前面一两点提到的样式分离组合原则,如果本文没法理解透彻,那么建议先去看相关文章。文章到此为止了吗?答案是否定的。
模块化你的样式表
从这里开始,我们可以来谈谈为什么要做到html语义化了。
你是否有这样的习惯,写一个div,定义一个样式名,往div里写另一个标签,再定义一个样式名,然后到相应的css里书写样式?是的,谁不曾是呢!但是,我觉得这不是很好的做法。不好的地方有两点:1、你得花费不少的精力去考虑样式的命名,命名是一件多么让人恶心的事情;2、抛弃这种写法转向模块化处理样式表,那么你会渐渐拥抱html语义化准则。这不是虚言,请往下继续。
如何模块化样式表
模块的含义:在我的理解里,模块就是具有相同业务逻辑的、功能一样或接近的,让用户看来这些元素就应该放在一起的一个集合。比如登录后微博首页的“可能感兴趣的人”:
这样的模块包括:标题栏、简单的列表。
微博对这个模块的处理代码,大家可以自己用firebug查看,比较复杂,如果是我来布局这个模块的代码,很简单,我会这么写:
<div class=”friend_love”>
<h2>可能感兴趣的人</h2>
<ul>
<li></li>
</ul>
<em>找人</em>
<span></span>
<a class=”more”>更多</a>
</div>
你看看是否可以理解我为何这么写,每行代码都是有考虑的,包括样式命名。我并非说微博的前端人员不怎么样,因为前端代码的书写要根据项目的方案、后端数据的呈现而做相应的调整,但是如果你仅仅是做前端方面的书写,第一次书写出的代码就应该足够简单、语义明确。通过上面的html代码,你可以布局自己的样式:
.friend_love h2{}
.friend_love ul{}
.friend_love em{}
.friend_love span{}
.friend_love .more{}
你还可以在样式表中进行注释:/*friend_love*/;
如果在另外一个页面中也需要调用这样一个模块,就可以很好地拷贝,这么一个模块,两个样式命名,你还在为命名发愁吗?也许em这个元素只需要填写float:left的样式,那么恭喜你,你连写这个样式的必要都没有了,直接在结构标签中调用global.css里的样式:<em class=”fl”></div>,为什么是fl,请参照global.css里左浮动样式的定义。
前面说过,css架构因人而异、因项目大小而异,我没有任何理由让你采用我这还不被验证是否成熟或合理的做法,只是个人觉得可以用,也还好用,抛砖引玉而已!
转载于:https://www.cnblogs.com/balaixianren/archive/2013/01/10/2855248.html
▲我的css架构理念相关推荐
- CSS架构之BEM设计模式
为什么需要CSS架构? 其实在日常开发CSS当中,会遇到许多的问题,使用设计模式能够很好的解决.例如在日常开发项目,需要组件化时,组件内部的class样式类管理就非常的杂乱. 大部分公司的命名规则还是 ...
- Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACSS.BEM.SMACSS.ITCSS 等,其中 SMACSS 和 ITCSS 很相似.我在企业级项目中最常使用的是简化版 ...
- HTML+CSS_第四部分(Sass与Less、PostCSS、CSS架构与文件组织、CSS新特征)
文章目录 (一): Sass与Less 1.简介: 2.Sass和Less的创建和转换为css 3.Less 4.Sass (二):PostCSS 1.简介 2.使用: 3.Postcss常见的插件 ...
- 来自 Google 的高可用架构理念与实践
转自: https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=402738153&idx=1&sn=af5e76aad2 ...
- 理解Serverless架构理念
2019独角兽企业重金招聘Python工程师标准>>> 理解Serverless架构理念 No silver bullet. - The Mythical Man-Month 许多年 ...
- 说说我对项目中css架构的浅显理解
在实现业务的过程中,我们难免会发现之前由于各种原因存在的代码中正在产生大量的冗余.这时候就需要优化代码,如果有功能的迭代,就是进行重构的好时机了! 最近在搞某一块业务的重构,恰好时间不紧.组内大佬说& ...
- 我的 Serverless 实战 — Serverless 架构理念 ( 后端服务器发展 | Serverless 与 ServerFul | Serverless 定义 | 架构优缺点 )
文章目录 一.后端服务器架构发展 二.Serverless 与 ServerFul 三.Serverless 定义 四.Serverless 优缺点 [本文正在参与 "100%有奖 | 我的 ...
- SAP Spartacus 的 CSS 架构
在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分. 通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式. 可选的封装模式一共有如下 ...
- CS/CSS架构应用的软件性能测试模型分析
CS/CSS系统架构的基本概念 1.1系统架构定义 虽然B/S结构.J2EE架构愈来愈成为流行模式,但基于传统的C/S结构的应用程序还广泛地应用于各种行业.尤其是金融行业中的商业银行柜面-核心帐务系统 ...
最新文章
- linux目录为root所有文件,linux获取文件所有目录/文件夹的例子linux操作系统 -电脑资料...
- c++大作业迷宫游戏 规定时间内完成_小学生做作业磨蹭的7个原因及对策!太准了~...
- C#编写串口通信程序(转)
- 学习Haskell的一些资料
- 【报告分享】2019移动互联网行业报告暨无监督机器学习下的2019行业价值人群聚类报告.pdf...
- linux的shell脚本接收参数
- 本人做的电子地图效果图
- PostgreSQL 基于heap表引擎的事务 实现原理
- IE浏览器js 中http请求,中文传参报400错误-解决方法
- Belief propagation
- win10系统更新服务器太慢了,win10更新慢如何解决
- [转载]SEO新足域名选择心决
- SC16IS752调试
- 20个关于可视化图表设计的技巧
- 2022广东省安全员B证第四批(项目负责人)上岗证题目及在线模拟考试
- 从代码层面分析STM32 标准库和HAL库的差异
- 计算机考试成绩有疑惑,计算机考研疑惑 真的好难受
- 微信公众平台开发订阅号
- android 翻页卷曲效果 电子书翻页
- Haplotype-aware genotyping from noisy long reads 单倍型识别的基因分型来自嘈杂的长读