搜索
首页web前端html教程记一次项目中的css样式复用_html/css_WEB-ITnose

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect

二维码:

一直觉得css是一个不被重视,或者说是重视不够的饭后甜点。因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格。。。一直都想聊聊css相关的一些杂碎。正好借最近的一次项目实践来侃侃css。

    玉伯曾发文章做过类似的比喻说:“css就像语文。大家都认识汉字,也都会写汉字,但是也只有那些牛逼的作家才能写出优秀的文章,而我们却不能”。也就是说css易学难用。一个项目随着页面的增多,css的代码数量也可能直线飙升。不仅加载起来比较慢,对维护的人来说,也不确定这些代码都有什么地方在用,轻易不敢动。。因此,css样式复用的重要性就可想而知了。而这个也是新手或对css不够重视的人欠缺的。。

    上面这些,是不是很虚?不罗嗦了,先上页面设计图(一个答题页面),分析页面布局先:

从设计稿上看,最直观的就是页面中的每一个问题的样式是统一的,也就是可以把问题当作一个question模块进行开发。但是就布局而言,纵坐标上,这些问题的纵坐标好无规律。怎么确定这些问题在页面中的位置呢?私想了一个办法,看下一张图:

没错,就是把整个页面拆解成一个一个的格子。私是把每到题放到500*500的格子,这样,问题就在格子里相对于格子来进行定位,就简单多了。以上就是页面的布局。

    然后是具体的代码了:

    最开始当然是css reset了,

大家都知道,浏览器对于标签是有默认样式的。比如a标签默认是有下划线,li标签默认有一个小点等。然而不同的浏览器对于这些元素的默认值不尽相同,为了屏蔽浏览器对元素默认样式的差异,我们需要重置部分元素的样式。可能大家都看过reset.css。那里面重置的样式有好多,我觉得完全没有必要。我的css reset就上面只有上面这些就够了。我也并不是说别的版本的cssreset就不好。脱离的实际的业务单纯的谈论某个类库的好坏,高下都是不可取的。没有最好的框架,只有最适合自己业务的框架。。

然后是css原子类。所谓的css原子类,入下图:

为什么要有这些css原子类呢?一个大型的项目,一些常用的css规则,比如text-align,float,border,positon等有可能出现十几次,几十次。。加入我们已经在项目开始的时候就已经定义好了我们的css原子类,那么在需要左浮动的元素上只需要引入.fl的class就可以了。原来需要出现几十次的float:left现在只需要出现一次就可以了(理论上是这样)。从理论上讲,只要我们把每个css原子类都定义成一个原子类,那么我们就可以通过这些原子类的不同组合来完成我们的页面了。css原子类是跟具体的项目和业务无关的,定义好的css原子类可以应用到任何的项目当中。css样式分离的确实彻底,其可复用性就越高。就像这些原子类。但是,当一个元素引入的css原子类多起来的时候,那么这个元素的class的值也会快速膨胀起来。。。我在写页面的时候,所能接受的class值得最多的个数是4个。考虑到这个问题呢,就引入了下一个话题,css模块化。

    通常一个项目一个站点,要考虑到站点整体的风格统一。正式因为风格统一,所以大部分的css样式都是可以复用的。比如我本次的项目来说,问题就可以看成是一个模块。问题的html如下

qh是标题,qa是三个选项。最外层的div就是格子,qwrapper相对于格子进行定位。然后定义统一的css样式。虽然页面上有十道题,我只需要写一次html和css.

 

对于每到题目的个性化的样式用过.question1, .question2等类来实现。说到这里,其实这个页面的css样式就差多多了。实际效果见第一张图。在开发中除了这种一个区块看作一个模块来处理之外,比如页面中的所有的buton,text也可以看成一个模块。在需要有button的地方,只需要引入.btn就可以了。就像bootstrap。。。这里需要注意,定义模块样式的时候,只能定义那些稳定的公共的样式。就文本框而言,有的地方的文本框的宽度是100,有的地方是80,这个时候我们就需要把width从样式中分离出去。想下面这样

.txt {

    height: 30px;

    line-height:30px;

    backgroud:#fff;

    font-size:14px

}

那么宽度为100的文本就可以写为:

宽度为80的就可以写为:

.w100为上文中的原子类.w100 {width: 100px}

通过这种方式把项目中的可复用的区块进行模块化。后续开发的时候,只需要引入之前定义好的类库就行了。假设开发之前,我们已经认真的分析过设计稿。分析过那些组件式公共的,在页面中重复出现的。我们就可以开开发初期先开发这些公共的样式,便于后期复用。刚开始的时候,可能会慢一些,但是越到后期会越轻松。

当完成上面的这几步的时候,理论上一个项目的大部分的css样式就已经开发完成了。后续再写页面的时候,只需要引入我们定义好的类就行。仿佛就像是我们针对自己的项目开发了定制版的"bootstrap"...剩下的就是页面特有的页面级的css了。

    考虑到时间和篇幅关系,就不往下写了。以上是我写css的套路。私以为,每个人都应该有自己的套路和模式。形成自己的风格。。。以上的都是个人观点,如果有不对的地方,或者有不同意见的欢迎交流讨论哈

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境