html的组织顺序是什么,css如何组织?

css如何组织?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

7b65796b099c37fc255801638127cedd.png

前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性。

如何组织CSS?一般常用的方法是按功能划分,分为三大类:

1、base类

base类是css最底层的类,也就是通用原子类,具有高度可移植性、精简、通用,基本不需要维护。内容主要是一些CSS重置代码和常用的类,如.w100{width:100;},.fl{float:left;display:inline;}之类。

2、common类

common类位于中间,是组件类,也就是各个功能模块,把网站常用的元素拆分成各个复用性很高的小模块,注意的是最好由一人负责,统一管理。

3、page类

page类位于最高,复用性最低,尽量分开写,或者分块写,写明注释。page类越简单越好,能用上述两者解决的尽量用上述两者。

更多web开发知识,请查阅 HTML中文网 !!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488776.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北航、旷视联合,打造最强实时语义分割网络

来源:AI科技评论编辑:Camel导语:MSFNet在Cityscapes测试集上达到77.1%mIoU/41FPS(注意是1024*2048),在Camvid测试集上达到75.4 mIoU/97FPS,是目前最强的实时语义分割网络。下面要介绍的论文由北…

oracle text类型_数据库的一些注入技巧Oracle

默认数据库SYSTEMSYSAUX注释--SELECT * FROM Users WHERE username OR11 -- AND password ;查询版本信息SELECT banner FROM v$version WHERE banner LIKE Oracle%;SELECT banner FROM v$version WHERE banner LIKE TNS%;SELECT version FROM v$instance;数据库凭证SELECT u…

Java 装箱和拆箱

转载于:https://www.cnblogs.com/jiangxifanzhouyudu/p/6629165.html

中科院计算所关于“木兰”语言问题处理情况说明

来源:中国科学院计算技术研究所 近日,网上出现质疑“木兰”语言的信息。我所获知这一情况后高度重视。经所科研道德委员会初步调查,“木兰”语言系我所员工刘雷创办的中科智芯公司研发的面向青少年编程教育的集成化产品,该产品的开…

用python表白代码_如何用Python代码向心爱的姑娘花式表白?

刚好之前用turtle 写过一个https://www.zhihu.com/video/1058809172984004608 这是我当时自学python第二天写的一个,书上讲到了一个turtle模块,可以用来画一些简单的图,自己突发奇想就在纸上大概设计了一下图形,算了算长度后&…

CSS3 Flex布局(伸缩布局盒模型)学习

CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒&a…

qtablewidget添加item不显示_企业微信聊天工具栏可以添加哪些应用?企业微信聊天工具栏不显示是什么原因?...

使用企业微信营销的朋友们应该都知道,企业微信有聊天侧边栏,我们可以在里面添加常用应用,提升运营效率,但是有很多用户反映,自己的企业微信中没有聊天工具栏,这是什么原因呢?这时可能有以下两种…

5G将如何推动未来十年智能城市的发展

来源: IEEE电气电子工程师过去十年的结束标志着部署5G的技术军备竞赛。移动运营商竞相安装网络基础设施,在澳大利亚、中国、韩国、瑞士和美国等数十个国家提供每秒超过1千兆的无线连接。但是,为什么这么匆忙?在2019年的IEEE GLOBE…

接口自动化- 基于 Python

准备工作 这部分其实在谷歌或者百度上搜索下就可以完成的,可是我就是想再啰嗦一遍,说不定有比我更懒的同学呢哈哈~ 第一步 Python的安装配置 打开官网: https://www.python.org/downloads/ 目前官网上已经更新到3.6.1啦(这更新速度我是服的&…

vscode c++ 快捷键_[工具篇]提高开发幸福度的VSCode配置[更新中...]

工欲善其事,必先利其器。基于上文把keil与外部编辑器vscode结合一起,达到keil作为编译与调试工具,而vscode作为编辑工具,如今其插件之丰富能与vim媲美,所以现在本文主要介绍本人对VSCode的一些个性配置,以便…

【平行驾驶】王飞跃 | 人工智能与智能汽车:在CPSS中驶向第三轴心时代

来源:车百智库【导读】1月10-12日,2020中国电动汽车百人会论坛在钓鱼台国宾馆隆重召开。青岛智能产业技术研究院院长王飞跃教授受邀出席并作精彩报告,讲述了平行驾驶理论及其当前的矿山无人化应用。王飞跃教授表示,平行驾驶是一种…

poj 3485 区间选点

题目链接:http://poj.org/problem?id3485 题意:X轴上公路从0到L,X轴上下有一些点给出坐标代表村庄,问在公路上最少建几个出口才能使每个村庄到出口的距离不超过D。 以村庄为圆心,半径为 d 画圆,与公路相交…

python return函数_Python函数(一)-return返回值

定义一个函数可以在最后加上return返回值,方便查看函数是否运行完成和返回函数的值 # -*- coding:utf-8 -*- __author__ "MuT6 Sch01aR" def test(): print(test) def test1(): print(test1) return 8 def test2(): print("test2") return 4,t…

吉林大学计算机英语成绩,吉林大学复试出结果,初试分差84分,复试成绩却相差无几!...

原标题:吉林大学复试出结果,初试分差84分,复试成绩却相差无几!2021届考研的同学有不少同学已经完成复试,但也有一部分同学还正在忙着准备复试科目,各大高校近期也纷纷发布出了2021年研究生复试的相关工作安…

势如破竹!169 篇论文带你看 BERT 在 NLP 中的 2019 年!

来源: AI科技评论 编译 | JocelynWang编辑 | 丛末2019 年,可谓是 NLP 发展历程中具有里程碑意义的一年,而其背后的最大功臣当属 BERT !2018 年底才发布,BERT 仅用 2019 年一年的时间,便以「势如破竹」的姿…

linux运行nodejs一般路径_NodeJS和命令行程序

奇技指南本文来自奇舞周刊公众号,转载请注明出处。作者:刘观宇,360 奇舞团高级前端工程师、技术经理,W3C CSS 工作组成员。源 起植根于Unix系统环境下的程序,很多都把贯彻Unix系统设计的哲学作为一种追求。Unix系统管道…

计算机怎么允许用户安装文件,如何禁止安装某个软件?电脑不允许安装软件的方法...

如何禁止安装某个软件?想要禁止安装软件,可以在组策略中直接启用软件安装规则,但如果只是想要禁用某个软件的安装,则需要用户将该软件的证书进行一个限制,证书不通过,自然无法安装,下面是操作步…

Docker日志收集最佳实践

传统日志处理 说到日志,我们以前处理日志的方式如下: 日志写到本机磁盘上 通常仅用于排查线上问题,很少用于数据分析 需要时登录到机器上,用grep、awk等工具分析 那么,这种方式有什么缺点呢? 第一&#x…

2020年10个诱人的技术里程碑

来源:IEEE电气电子工程师心理控制仿生四肢将首次亮相波士顿马拉松麻省理工学院的研究人员已经开发出一种只用思想控制仿生肢体的方法。2016年首次在人类身上试验。2020年,当在阿富汗失去腿的老兵Brandon Korona用他的新仿生肢参加波士顿马拉松比赛时&…

耶鲁大学计算机科学录取,耶鲁大学计算机科学研究生Offer及录取要求

对于打算去耶鲁大学读研究生的学生来讲,耶鲁大学研究生申请要求及耶鲁大学研究生专业介绍是学生最关心的问题。本文香港介绍耶鲁大学研究生申请要求及耶鲁大学研究生的专业介绍,帮助更多的学生更好的了解耶鲁大学。耶鲁大学研究生申请要求及专业介绍耶鲁…