首页 > 其他分享 >每个开发人员都应该避免的常见 CSS 错误

每个开发人员都应该避免的常见 CSS 错误

时间:2022-09-03 17:13:44浏览次数:87  
标签:尝试 错误 开发人员 important 使用 CSS

每个开发人员都应该避免的常见 CSS 错误

1️⃣ 使用像素
Px 将您的设计锁定为所有屏幕的固定尺寸。

您应始终尽可能使用相对测量值,例如 em、rem、% 等。

2️⃣ 使用一个 CSS 文件进行样式设置
在大项目中使用单个文件会造成混乱。

尝试为不同的组件使用不同的 CSS 文件。
例如:为导航栏和页脚创建 2 个不同的 CSS 文件。这也将增加代码的可重用性。

3️⃣ 使用内联 CSS
您必须为不同的元素一次又一次地编写相同的代码,没有地方可以放置这些样式以供重用。

由于代码没有特定的位置,因此编辑内联 CSS 是一项任务!

在需要之前,请始终尝试使用外部样式表。

4️⃣ 在任何地方都使用 !important
唯一可以覆盖 !important 的是另一个 !important,一旦你走上这条路,它就永远不会停止。

用大量 !important 样式干扰你的 CSS 并陷入僵局是没有意义的。

5️⃣ 没有使用正确的命名约定
确保以类似的方式正确命名类、ID 和其他属性。

尝试将颜色值存储在变量中,而不是一遍又一遍地复制相同的颜色。

6️⃣ 没有事先设计
不加思索地开始构建感觉很棒,但是一旦事情变得复杂,这可能会导致错误。

尝试清楚地了解项目。它还将减少冗余的机会。

7️⃣太有创意
Tbh,您不需要将繁重的 CSS 或动画强加到您的网站中。优雅的设计和良好的 UX/UI 是每个人的首选。

不要试图只在一个项目中展示你所有的技能。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/11774/02150317

标签:尝试,错误,开发人员,important,使用,CSS
From: https://www.cnblogs.com/amboke/p/16653052.html

相关文章

  • 使用 CSS 悬停菜单 - 分步指南
    使用CSS悬停菜单-分步指南HTML对于HTML,我们有一个类为“menu_item”的div元素,它代表一个菜单项。在“menu_item”中,第一个元素是一个带有标题的span元素。现......
  • 4.CSS盒子模型
    盒子模型 4.1什么是盒子模型margin:外边距border:边框padding:内边距4.2边框1,边框的粗细2,边框的样式3,边框的颜色 /*body总有一个默认的外边距*/ body{  m......
  • CSS知识点复习
    1.CSS 指的是层叠样式表* (Cascading Style Sheets)2.CSS元素选择器:直接元素例如p   id选择器:#name1  类选择器:.类名  通用选择器(*)3......
  • 适用于任何技能水平的开发人员的可扩展 React 架构
    适用于任何技能水平的开发人员的可扩展React架构当我们中的许多人考虑可伸缩性时,我们通常会考虑应用程序在大量并发用户的情况下快速执行的能力。虽然这是可扩展性的一......
  • 为 html 设置 Tailwindcss CLI
    为html设置TailwindcssCLI以下是我用来创建基本Tailwaind设置的步骤:在VSCode中打开一个新终端并导航到您要在计算机上创建项目的任何位置(这里是终端命令的一个......
  • SQL 错误 [1062] [23000]: Duplicate entry 'xxxx' for key 'xxxx'
    异常内容SQL错误[1062][23000]:Duplicateentry'xxxx'forkey'xxxx'分析异常如果报错内容如上所示,原因该表有一列唯一索引或者多列添加了联合唯一索引解决方案......
  • 适合初学者的 7 个有趣的 CSS 项目创意和主题 [2022]
    适合初学者的7个有趣的CSS项目创意和主题[2022]任何想成为网页设计师的人都必须了解CSS的重要性。您的网站可以使用CSS进行创造性的设计和布局,使其具有独特的外......
  • HTML、CSS 和 JavaScript 中的所有唯一字符挑战
    HTML、CSS和JavaScript中的所有唯一字符挑战HTML:<divclass="wrapper"><h1>所有独特的字符</h1><br><p>来自<ahref="https://buttondown.email/cassidoo/ar......
  • 如何使用 CSS 和 HTML 创建 Glassmorphism 效果
    如何使用CSS和HTML创建Glassmorphism效果Glassmorphism效果在现代网页设计中越来越流行Glasmorphism是一个有点新的功能,它一直在流行,并且经常在新设计的网站上受......
  • css快速入门-语法
    css从位置上分类:嵌入式样式表,内部样式表,外部样式表在一个标签上写style属性在style属性中写样式属于嵌入式样式表在head中写的style标签属于内部样式表html文件中不写cs......