现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的.
比如下面的css用法不对
(1)一个页面对应一个css文件
这种做法是我深恶痛绝的,为什么呢?可重用性太差了!
比如哪天我突然要改变一个按钮的样式,那就坏了,只要包含按钮的页面的样式我都得改,比如有20个页面包含了按钮,那么我就得修改20个css文件,这不要人命吗?
根本原因:相同的样式重复出现在多个文件中.
(2)编写css样式时直接修改html标签的样式
例如:
没有通过id或class,这种方式非常不好,因为它的影响是完全开放的,任何一个页面引入该css文件就会受到影响.我项目中就遇到了.当时我们使用了WebCalendar.js 作为日期控件,本来界面应该是:
但是实际的效果是:
原因:引入的css竟然影响了其他控件.这不是我们期望的效果.
正确的方式应该是:
想要应用该css怎么办?加上class就行了.
(3)相同的代码出现在多个地方
这段css代码竟然出现了至少四次.如果客户说要修改行(line-height)的高度,那么我就要同时修改至少四个地方.这不是自己人坑自己人吗?
(4)滥用id
例如:
我们要知道id的权重是最高的.在日常开发中,我们更多的情况是会遇到如下情况:
#header a { border:2px dashed #000 }
假设这是我们的一个项目,现在我们决定要把一个在 header 的 另一个link设置成无边框,随手一写,我们添加了:
.special-link { border:none }
然后再在 html 中添加了一个 special-link 的class 类,这下解决我们的问题了吗? 答案是:没有! 由于 id 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。
下面这样写才是正确的:
#header .special-link { border: none } 附件是我总结的html笔记:html02.zip
相关推荐
开箱即用的选择框,复选框和单选框在Tailwind中看起来很糟糕,唯一使它们看起来更好的方法是使用自定义CSS。 该项目的目标是为表单元素提供一个更好的起点,该表单元素仍然没有被质疑,并且可以通过添加实用程序...
CSS地狱-用糟糕CSS来地狱! 常见CSS错误的收集,以及如何解决它们。 这是怎么回事? 嗨,我是Stefánia,自2003年以来一直从事网络工作。在我的职业生涯中,我遇到了许多行代码,解决方案,框架和思维方式。 如果...
相反,糟糕的排版会分散您的读者注意力并破坏您的信息。 ——马修·巴特里克,宜人的默认设置应该适用于大多数网站。 主要重点是文字和良好的排版。 简单很重要:易于扩展或修改。 适用于所有浏览器、屏幕尺寸、...
我们曾经使用的旧的布局方法显然已经out了。然而,一个历史遗留问题浮出水面:多列布局。 更复杂的是,我们的页面宽度不再是静态的。响应式大行其道,所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格...
这个名字代表对于G叶形P年龄小号挠度,该是多么CSS块按照这种方法进行组织。 但是,既然已经有这么多的 CSS 组织系统,为什么要使用不同的 CSS 组织系统呢? 让我们进入它。 范围界定 CSS 最大的潜在问题之一是我...
流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小... 在这篇文章,我们将讨论创造100%功能自适应css布局的行之有效的方法 一、使用网格的流动布局 我们大多数人都听说过设计固定宽度
里面含有测试重点和网页重构问题网页重构应该避免的10大 CSS 糟糕用法
以下是一些实现灰度的流行方法以及它们糟糕的原因: 使用 CSS filter :这是迄今为止最简单的方法,只需添加一些带前缀的 css 属性即可! 为什么会烂? 表现。 您的 CSS 代码可能如下所示: img . desaturate { -...
我知道前端很糟糕,但是随着时间的流逝,随着我了解更多有关CSS的概念。要求Django和rest_framework $ pip install Django==3.0.6 djangorestframework markdown django-filter休息框架看起来如何该站点当前如下所...
在此之前,这里是您的替代方案: 只需插入您想在 DOM 中看到的字符串:例如 fontWeight: 'gold' pro:工作正常,最好将其作为最后的手段 con:没有错误检查实现笨重的 getter(这比仅使用字符串更糟糕)例如,...
所使用的方法不仅可以检测 javascript 生成的调整大小更改,还可以检测由 CSS 伪类(例如:悬停、CSS 动画等)所做的更改。 关于图书馆 我正在寻找一个库,它允许我检测 DOM 元素何时更改大小,我发现的所有解决...
前端向导-Pod请求访问登录页面解决方案这是的解决方案。 前端导师挑战帮助我通过构建现实的项目来提高您的编码技能。目录概述挑战用户应该能够: 根据设备的屏幕尺寸查看最佳布局请... 使用Figma文件进行挑战可帮助使其
包括在某些情况下检测最佳动画方法 如果不需要,则不会加载社交插件 ##v1.3.1 修复了非常糟糕的缩略图错误 ##v1.3 修复溢出问题 背景居中功能 添加了 .portrait 类选项 IE后台优化 响应式图片 实体高度选项 固定...
主要是因为这是一个糟糕的可用性实践,其最重要的原因是用户对这种所谓的“功能”感到非常恼火。 许多可用性专家已经强调了这一主题,但是我发现的最佳指导原则来自XXX 动机 有一些插件可以做到这一点,例如 ,但我...
此示例项目将展示使用以下工具,库和框架开发单页应用程序的多种方法之一: 技能 用于RESTful服务的 用于数据访问 前端程序包管理 用于模块化JavaScript开发 数据绑定 用于Ajax和客户端存储访问 用于客户端URL路由 ...
使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标...
正式版不仅看起来很糟糕,而且在移动设备上也无法使用。 此外,正式版本不允许编辑搜索查询,只能对其进行重置。 当人们点击了错误的选项并被迫重做搜索时,这变得非常令人气愤。 最终,官方站点的错误使我感到...
更糟糕的是,由于当前的Swagger平台不支持Spark 。 为了与这些方法进行对比,利用现有解决方案,我们将为Spark应用程序提供非官方的Swagger支持。 除了以JSON和YAML格式生成Swagger规范外,此扩展还使用两个开源库...
Foundation缺乏使用HTML和XML的便捷跨平台方法。 是事件驱动的风格的API,使用起来很麻烦。 提供了更方便的风格的API,但仅在macOS上受支持。 Ono为在Objective-C和Swift中的Apple平台上使用XML和HTML提供了一种...