一个没有经验的前端工程师，写CSS的时候有什么常见通病?
wxin55 2024-11-08 14:41 11 浏览 0 评论
<img src="https://pic2.zhimg.com/50/v2-1a61d5196d8d77ff8fa263e9d34ee50d_hd.jpg" data-caption="" data-size="normal" data-rawwidth="711" data-rawheight="230" data-default-watermark-src="https://pic2.zhimg.com/50/v2-4109ca11c4a92c94249b657fd16b3c35_hd.jpg" class="origin_image zh-lightbox-thumb" width="711" data-original="https://pic2.zhimg.com/v2-1a61d5196d8d77ff8fa263e9d34ee50d_r.jpg"/>
Unlike a programming language that requires knowledge of loops, variables, and other concepts, CSS is pretty easy to pick up. Maybe it’s because of this that it has gained the reputation of being simple. It is simple in the sense of “not complex”, but that doesn’t mean it’s easy.Mistaking “simple” for “easy” will only lead to heartache. -- by @Jeremy Keith
这就是为什么写得好CSS不多见。
而对于Web页面和Web应用而言，他的构层主要由HTML、CSS和JavaScript。其中HTML和CSS的关系又是紧密相连：
<img src="https://pic1.zhimg.com/50/v2-623bc8f730ea257e7bb7ddd3a8f3e8f4_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1338" data-rawheight="982" data-default-watermark-src="https://pic3.zhimg.com/50/v2-b72aa8da8287dd02f3d2e514af71b329_hd.jpg" class="origin_image zh-lightbox-thumb" width="1338" data-original="https://pic1.zhimg.com/v2-623bc8f730ea257e7bb7ddd3a8f3e8f4_r.jpg"/>
简单地说：
- HTML的DOM树会直接影响你CSS选择器的使用
- HTML的元素命名也会直接影响你CSS选择器的使用
那么首要解决的问题就是写好HTML结构，写好HTML结构，写好HTML结构；定义好的类名，定义好的类名，定义好的类名。
怎么做到呢？徒手撸出类似Bootstrap的HTML：
<img src="https://pic1.zhimg.com/50/v2-fbcef8c2ae794c77c64940d2c4c87450_hd.jpg" data-caption="" data-size="normal" data-rawwidth="2156" data-rawheight="904" data-default-watermark-src="https://pic1.zhimg.com/50/v2-9d1793889e3f33ad01367eb897dcd8f5_hd.jpg" class="origin_image zh-lightbox-thumb" width="2156" data-original="https://pic1.zhimg.com/v2-fbcef8c2ae794c77c64940d2c4c87450_r.jpg"/>
比如写个Button:
<img src="https://pic3.zhimg.com/50/v2-4220af0fb4d6802bf93dc81aacfd9afd_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1740" data-rawheight="692" data-default-watermark-src="https://pic2.zhimg.com/50/v2-aa3fb51fd158b2fbfa3fd8dc90507259_hd.jpg" class="origin_image zh-lightbox-thumb" width="1740" data-original="https://pic3.zhimg.com/v2-4220af0fb4d6802bf93dc81aacfd9afd_r.jpg"/>
就我个人而言，HTML结构都喜欢写成Bootstrap这种。
Bootstrap?
getbootstrap.com
另外就是在写组件或者HTML结构时还可以参照 "Accessible Rich Internet Applications "规范中的Widget部分：
<img src="https://pic3.zhimg.com/50/v2-e06a5e8610c65467ece6594fc717d04a_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1684" data-rawheight="1270" data-default-watermark-src="https://pic1.zhimg.com/50/v2-115a47bddc69e7cac654b502bcb51fe6_hd.jpg" class="origin_image zh-lightbox-thumb" width="1684" data-original="https://pic3.zhimg.com/v2-e06a5e8610c65467ece6594fc717d04a_r.jpg"/>
Accessible Rich Internet Applications (WAI-ARIA) 1.1?
www.w3.org
另外，还可以参考一些优秀的网站，Frameworks,库。这样可以提高自己在HTML方面的能力，比如结构的管理，类名命名。更多的话可以阅读一些关于HTML语义化的文章。
回到CSS上来。很多撸CSS的同学常常会犯的问题：
- 选择器运用不好
- 属性了解不够到位
- 不够成体系
- 实现思路不好
- 眼界不广
- 不知道借助工具
- 等等
选择器运用不好
选择器的使用在CSS中绝对算是重中之重。CSS发展到目前为止，选择器已经非常的成熟了，可以实现很多类似于早期jQuery的选择器功能。
如果前期的HTML写的足够好，在选择器定位到目标元素时就会变得较为轻松，而且可读性也会较强。很同学用不好选择器，除了不知道怎么用之外，还有一个更重要的原因，选择器权重不理解。
所以说，要用好选择器，就需要知道 CSS选择器是怎么一回事，CSS选择器权重如何计算
有关于选择器相关的教程网上也很多，这里列几篇：
CSS3 选择器--基本选择器_css3选择器, 基本选择器, CSS选择器 教程_w3cplus?
www.w3cplus.com
CSS3 选择器--属性选择器_css3选择器, 属性选择器, CSS选择器 教程_w3cplus?
www.w3cplus.com
CSS3 选择器--伪类选择器_css3选择器, 伪类选择器, CSS选择器 教程_w3cplus?
www.w3cplus.com
CSS选择器的优化_基本选择器, CSS选择器 教程_w3cplus?
www.w3cplus.com
再聊CSS的属性选择器_CSS, CSS选择器 教程_w3cplus?
www.w3cplus.com
初探CSS 选择器Level 4?
www.w3cplus.com
你应该知道的一些事情--CSS权重_CSS选择器 教程_w3cplus?
www.w3cplus.com
使用CSS Mod Queries控制选择器范围?
www.w3cplus.com
属性了解不到位
CSS的属性事实上并不是非常的复杂，但他们的组合就会让很多人感到头痛了。如果希望不头痛就需要对CSS的属性有所了解。建议可以从相关规范中获取：
All Standards and Drafts?
www.w3.org
而CSS中较为重要的几个功能模块：
选择器模块：
Selectors Level 4?
www.w3.org
盒模型
CSS Box Model Module Level 3?
www.w3.org
特别是逻辑盒模型的出现，将会让很多CSSer更为头痛，拿下图来对比一下：
<img src="https://pic1.zhimg.com/50/v2-b8c079e508817f0d8ec4b7021a0e936d_hd.jpg" data-caption="" data-size="normal" data-rawwidth="4096" data-rawheight="1476" data-default-watermark-src="https://pic4.zhimg.com/50/v2-d93a5a69fd3a9b35a6e7026e7e24c172_hd.jpg" class="origin_image zh-lightbox-thumb" width="4096" data-original="https://pic1.zhimg.com/v2-b8c079e508817f0d8ec4b7021a0e936d_r.jpg"/>
CSS的逻辑属性对盒模型带来的变化_CSS, CSS逻辑属性 教程_w3cplus?
www.w3cplus.com
布局模块：
CSS Flexible Box Layout Module Level 1?
www.w3.org
CSS Inline Layout Module Level 3?
www.w3.org
CSS Grid Layout Module Level 2?
www.w3.org
CSS Multi-column Layout Module Level 1?
www.w3.org
CSS Layout API Level 1?
www.w3.org
Layout_入门 精通 教程_w3cplus?
www.w3cplus.com
值、单位和颜色
CSS Values and Units Module Level 4?
www.w3.org
CSS Values and Units Module Level 3?
www.w3.org
CSS Color Module Level 3?
www.w3.org
图解CSS：CSS 的值和单位_CSS, 图解CSS, 长度单位 教程_w3cplus?
www.w3cplus.com
定位
CSS Positioned Layout Module Level 3?
www.w3.org
position_入门 精通 教程_w3cplus?
www.w3cplus.com
层叠和继承
图解CSS：CSS层叠和继承_CSS, 图解CSS 教程_w3cplus?
www.w3cplus.com
聊聊CSS中的层叠相关概念_CSS, z-index, BFC 教程_w3cplus?
www.w3cplus.com
transform/transition/animation相关的
CSS Transforms Module Level 1?
www.w3.org
CSS Transitions?
www.w3.org
CSS Animations Level 1?
www.w3.org
https://www.w3cplus.com/blog/tags/95.html?
www.w3cplus.com
transition_入门 精通 教程_w3cplus?
www.w3cplus.com
Web动画_入门 精通 教程_w3cplus?
www.w3cplus.com
另外还有比较新的，比如：
- CSS混合模式和滤镜
- CSS绘制图形
- CSS自定义属性
- 不一一列出
看到这些，估计为什么写不出好的CSS有一定的原因所在了。刚才也说过，同样一个效果，可能会有N种组合方式，甚至 同一个人在不同时间写同一个效果都会有N种组合方式。因为CSS就是一种七巧板
<img src="https://pic4.zhimg.com/50/v2-a36a707ee5b6b47d19374321eb321952_hd.jpg" data-caption="" data-size="normal" data-rawwidth="427" data-rawheight="241" data-default-watermark-src="https://pic1.zhimg.com/50/v2-442e24b069d95bd25e37e6437cfe2964_hd.jpg" class="origin_image zh-lightbox-thumb" width="427" data-original="https://pic4.zhimg.com/v2-a36a707ee5b6b47d19374321eb321952_r.jpg"/>
不够成体系
其实写CSS还是有很多方法论的，比如有名的：
- OOCSS
<img src="https://pic3.zhimg.com/50/v2-d06fb01e70c923c3417cf86a677a003e_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1000" data-rawheight="366" data-default-watermark-src="https://pic4.zhimg.com/50/v2-828e37892919765c759bbaae741b409d_hd.jpg" class="origin_image zh-lightbox-thumb" width="1000" data-original="https://pic3.zhimg.com/v2-d06fb01e70c923c3417cf86a677a003e_r.jpg"/>
- SMACSS
<img src="https://pic4.zhimg.com/50/v2-78e9299ba1786633fd50caded72bc528_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1000" data-rawheight="366" data-default-watermark-src="https://pic1.zhimg.com/50/v2-65ca36140999ca253a8b842938e0b956_hd.jpg" class="origin_image zh-lightbox-thumb" width="1000" data-original="https://pic4.zhimg.com/v2-78e9299ba1786633fd50caded72bc528_r.jpg"/>
- Atomic Design
<img src="https://pic4.zhimg.com/50/v2-e3a87508fce71a0fdf172af2e4ea5fb7_hd.jpg" data-caption="" data-size="normal" data-rawwidth="1108" data-rawheight="454" data-default-watermark-src="https://pic3.zhimg.com/50/v2-033b9f2995463ec7dcb9c75c17fe976c_hd.jpg" class="origin_image zh-lightbox-thumb" width="1108" data-original="https://pic4.zhimg.com/v2-e3a87508fce71a0fdf172af2e4ea5fb7_r.jpg"/>
除了前面提到的，还有其他的类似方法，比如BEM、SUITCSS、MCSS、AMCSS等。
借助这些优秀的方法论，可以让你的CSS变得更优雅些：
CSS架构_入门 精通 教程_w3cplus?
www.w3cplus.com
借助工具来帮你
到目前为止，写CSS不仅仅局限于CSS，可以使用一些CSS处理器或其他的工具来帮更简单的写CSS。
<img src="https://pic4.zhimg.com/50/v2-ab2c7ea061aa5ba581a2ddf3924e7b04_hd.jpg" data-caption="" data-size="normal" data-rawwidth="914" data-rawheight="334" data-default-watermark-src="https://pic3.zhimg.com/50/v2-a4e3ec14a77b6d6416c3e0332caa463a_hd.jpg" class="origin_image zh-lightbox-thumb" width="914" data-original="https://pic4.zhimg.com/v2-ab2c7ea061aa5ba581a2ddf3924e7b04_r.jpg"/>
<img src="https://pic4.zhimg.com/50/v2-fa64edf314813f1882d557d5c997e8ce_hd.jpg" data-caption="" data-size="normal" data-rawwidth="720" data-rawheight="719" data-default-watermark-src="https://pic1.zhimg.com/50/v2-72b12401695ec96ccfae9a9d5dcb77c7_hd.jpg" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic4.zhimg.com/v2-fa64edf314813f1882d557d5c997e8ce_r.jpg"/>
平时也可以收集一些帮你撸码的利器
<img src="https://pic2.zhimg.com/50/v2-24f41e680eb311c8dff575981f76692a_hd.jpg" data-caption="" data-size="normal" data-rawwidth="790" data-rawheight="926" data-default-watermark-src="https://pic2.zhimg.com/50/v2-c9b170b38ec86a75d687dbfca7e70dbe_hd.jpg" class="origin_image zh-lightbox-thumb" width="790" data-original="https://pic2.zhimg.com/v2-24f41e680eb311c8dff575981f76692a_r.jpg"/>
tools_入门 精通 教程_w3cplus?
www.w3cplus.com
眼界不够高
眼界不够高，看得少。这方面很简单，自己多看，多写。比如Codepen就是一个很好的地方：
<img src="https://pic3.zhimg.com/50/v2-6e1df27350d76aa0b418f03de2c038c4_hd.jpg" data-caption="" data-size="normal" data-rawwidth="2376" data-rawheight="1738" data-default-watermark-src="https://pic2.zhimg.com/50/v2-f889d44593a0ebef5a85712be894bbea_hd.jpg" class="origin_image zh-lightbox-thumb" width="2376" data-original="https://pic3.zhimg.com/v2-6e1df27350d76aa0b418f03de2c038c4_r.jpg"/>
今天就写到这，感觉好长了.....
最后放上早期的一篇分享：
<img src="https://pic1.zhimg.com/50/v2-9468a45677ade79042c584ad2ef6a6f7_hd.jpg" data-caption="" data-size="normal" data-rawwidth="2406" data-rawheight="1436" data-default-watermark-src="https://pic1.zhimg.com/50/v2-6f39033c65b2d78bbad98e9d7aa6ed09_hd.jpg" class="origin_image zh-lightbox-thumb" width="2406" data-original="https://pic1.zhimg.com/v2-9468a45677ade79042c584ad2ef6a6f7_r.jpg"/>
写CSS的姿势_CSS 教程_w3cplus?
www.w3cplus.com
再给CSSer推荐学习CSS的好去处：
CSS-Tricks?
css-tricks.com
CSS3_入门 精通 教程_w3cplus?
www.w3cplus.com
张鑫旭-鑫空间-鑫生活?
www.zhangxinxu.com
ChokCoco - 博客园?
www.cnblogs.com
另外推荐几本CSS的书
<img src="https://pic2.zhimg.com/50/v2-e3dca328d69807447af0361dc8e32908_hd.jpg" data-caption="" data-size="normal" data-rawwidth="259" data-rawheight="328" data-default-watermark-src="https://pic3.zhimg.com/50/v2-11cf35a68249c85162f65a4ff2800190_hd.jpg" class="content_image" width="259"/>
<img src="https://pic3.zhimg.com/50/v2-6e2a0e0f95f2c3b77c76e13dc5b73e26_hd.jpg" data-caption="" data-size="normal" data-rawwidth="212" data-rawheight="280" data-default-watermark-src="https://pic4.zhimg.com/50/v2-2615788a104a1d77e1f22da17eb007f0_hd.jpg" class="content_image" width="212"/>
<img src="https://pic3.zhimg.com/50/v2-c29c9d8de69a08ebf4a7a6cf62666a4c_hd.jpg" data-caption="" data-size="normal" data-rawwidth="500" data-rawheight="609" data-default-watermark-src="https://pic2.zhimg.com/50/v2-e9c674761da7667f9b827d75e0d88adf_hd.jpg" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/v2-c29c9d8de69a08ebf4a7a6cf62666a4c_r.jpg"/>
<img src="https://pic4.zhimg.com/50/v2-28662508c3310dc08173a52d311303bc_hd.jpg" data-caption="" data-size="normal" data-rawwidth="200" data-rawheight="200" data-default-watermark-src="https://pic2.zhimg.com/50/v2-ba483e1a6babac048892d9bf78742ee4_hd.jpg" class="content_image" width="200"/>
<img src="https://pic3.zhimg.com/50/v2-dc4bd14f4ffacd73b7cba1885bc1668b_hd.jpg" data-caption="" data-size="normal" data-rawwidth="200" data-rawheight="200" data-default-watermark-src="https://pic1.zhimg.com/50/v2-7b640425ba95da6b31105599c7fba2f6_hd.jpg" class="content_image" width="200"/>
学习从来不是一个人的事情，要有个相互监督的伙伴，工作需要学习前端或者为了入行、转行学习前端的伙伴可以私信回复小编“前端”领取全套免费前端学习资料、视频
相关推荐
- 黑客工具sqlmap，带你了解什么师sql注入
-
1、sqlmap介绍sqlmap是一款支持MySQL,Oracle,PostgreSQL,MicrosoftSQLServer,MicrosoftAccess,IBMDB2,SQL...
- Web网络安全漏洞分析，SQL注入原理详解
-
本文主要为大家介绍了Web网络安全漏洞分析SQL注入的原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪一、SQL注入的基础1.1介绍SQL注入SQL注入就是指We...
- sql注入、文件上传、文件包含（sql注入数据提交的类型）
-
在owasp年度top10安全问题中，注入高居榜首。SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序，而这些输入大都是SQL语法里的一些组合，通过执行SQL语句进而执行攻击者所要...
- 比较常见类型漏洞讲解(三):SQL注入(一)
-
比较常见类型漏洞讲解（一）比较常见类型漏洞讲解（二）：文件上传这里继续介绍比较容易找到的不同类型的漏洞。演示准备目标主机：Metasploitable2攻击目标：目标主机的dvwa系统攻击机：Kali...
- 警惕SQL注入:检测与防御的实战指南
-
在当今数字化的时代，软件系统的安全性至关重要。SQL注入作为一种常见且危害巨大的安全漏洞，给企业和用户带来了潜在的风险。对于测试人员来说，掌握发现和解决SQL注入漏洞的方法是保障软件质量和安全的...
- SQL注入的原理和危害（sql注入的原理及危害）
-
什么是SQL注入SQL注入是发生在web端的安全漏洞，实现非法操作，欺骗服务器执行非法查询，他的危害有会恶意获取，甚至篡改数据库信息，绕过登录验证，原理是针对程序员编写时的疏忽，通过执行SQL语句，实...
- 科普基础 | 最全的SQL注入总结（sql注入是干嘛的）
-
0x01SQL注入原理当客户端提交的数据未作处理或转义直接带入数据库，就造成了sql注入。攻击者通过构造不同的sql语句来实现对数据库的任意操作。0x02SQL注入的分类按变量类型分：数字型和字符...
- 产品经理必备IT技术知识之“什么是SQL注入攻击?
-
不少优秀的产品经理都会写一些简单的SQL语句进行数据查询的操作，但是会写SQL语句不代表能写好SQL语句。SQL语句写得不好，就会引发SQL注入攻击。SQL注入攻击是Web开发中最常见的一种安全问题，...
- 通过sql注入获取用户名和密码（联通光猫超级用户名超级密码获取）
-
1.啥是sql注入sql注入是一种通过操作输入来修改后台sql语句以达到利用代码进行攻击目的的技术2.生成sql注入漏洞的原因总结一句话:对前台传过来的参数没有进行有效的过滤,太相信前端传过来的参数...
- 什么是SQL注入攻击(SQL Injection)
-
1，定义：在构建数据库SQL语句时，攻击者在参数请求中注入恶意的SQL代码，并在在数据库中执行，操控数据库执行意图之外的操作。2，目的：窃取数据、修改数据、删除数据、绕过身份验证、权限提升，执...
- 浅谈SQL注入（sql注入的理解）
-
在关于SQL注入，百度的解释是这样的：SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知...
- sql注入（sql注入攻击是什么意思）
-
SQL注入分类1.数字型注入当输入的参数为整型时，则有可能存在数字型注入漏洞。假设存在一条URL为：HTTP://www.aaa.com/test.php?id=1可以对后台的SQL语句猜...
- SQL注入详解（sql注入总结）
-
现在大多数系统都使用B/S架构，出于安全考虑需要过滤从页面传递过来的字符。通常，用户可以通过以下接口调用数据库的内容：URL地址栏、登陆界面、留言板、搜索框等。这往往会出现安全隐患，为了更好的保护数据...
- 什么是sql注入，这些坑得避开（什么是sql注入,编程时如何避免）
-
1、sql注入是什么sql注入就是用户通过输入的参数，拼接到原先的sql中，成为sql的一部分，从而影响sql的功能和执行结果2、sql注入破坏力-小兵破坏力比如原先sql如下s...
- 金母鸡量化教学场:pandas—数据挖掘的Python库
-
如果你想充分发挥Python的强大作用，如果你想成为一名好的Python量化师，你应该先学好Pandas。今天就来了解什么是Pandas。与numpy易于处理同种类型数据不同，pandas更加的适合...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)