既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?
在众成翻译上看到一篇不错的css文章,所以就给转过来。
在你开始阅读这篇文章之前,一定要做好心理准备。因为我写的 90% 都是在发牢骚,只有最后大概 10% 介绍 CSS 技巧之最佳实践。提前给你们打好预防针啦。
前端工程师在职业发展中可能会遇到以下困境:
某个阶段,感觉(自己所做的)工作没有任何难度
为团队创造的价值越来越低啦
自己做的事情,大家都能做
同意的请举手。如果你确实是这样,(恭喜你)说明你是多数派。
而且说句实在话,CSS 确实很简单。另外我可以保证,就算是傻子也能写出下面的代码:
p {
color: red;
}
那么你还有什么好抱怨的?堆纯 CSS 代码,不需要任何技巧。而且只给单个元素添加全局样式,而不用考虑其他 CSS,当然是非常简单的。
那么CSS到底难在哪儿?
后端开发工程师:“虽然我已经完成新功能的开发,但是我弄乱了前端,不过你放心,我已经修好绝大部分,所以你前端只需要对细节进行微调,时间应该不会超过 30 分钟”
于是我打开HTML文件,(吃惊地)发现到处都是弃用的HTML标签,而且丝毫没有考虑过响应式设计。深呼吸,(暗示自己),他们写的CSS肯定会稍微好点。然而在我打开CSS文件之后,发现(同样)到处都是类似固定(fixed)定位、清除左浮动、右浮动以及!important的代码,于是我慢慢的把鼠标绕在脖子上。(别拦我,让我死)
(安慰自己),也许他们写出的代码不会一直这么糟糕,但是(在现实中)我几乎没见过后端工程师写出能用的前端代码的。也还好啦,写前端代码本来就不是后端工程师的职责所在。但是请后端工程师不要随便写一堆前端代码,然后指望前端工程师帮你擦屁股。
所以好的CSS长啥样?
(项目的)组织结构。尤其是当你做过大型项目,就会发现项目的组织结构真的很重要。举个正面例子——Steven Bradley 写的利于维护代码的目录结构,这篇文章是为 SCSS 项目写的,不过也适用于普通的 CSS 项目。它重点强调如何将 CSS 文件模块化,形成便于维护的文件。
规范。这可能是我每天所遇到的最大问题。不幸的是,大部分工程师对CSS规范的理解一知半解,正是因为这样,才导致糟糕的 CSS 代码(如 !important)烂大街。那我们该如何避免呢?下面列出了很多值得参考的命名约定,它们旨在减少写死的(非常依赖文档结构的) CSS 选择器。假设你对此不感冒,我还是要劝你如无必要,避免使用超过 3 层的 CSS 类/元素选择器。
命名约定。恕我直言,对于任何一个大型的 CSS 项目来说,命名约定是标配。没有命名约定,CSS 就会变得既难维护又不可靠。命名约定可以让我们轻松地重用项目中的 CSS,如有必要,还能帮我们剔除项目中多余的 CSS。这里仅列举几种比较流行的命名约定,如:BEM,OOCSS,SMACSS以及我自己写的hiccup。
测试。在这一点上,绝大多数其它工程师可能都没发现当后端工程师有多爽。 因为后端工程师的开发工作只需要让一个环境(网站所在的服务器)正常即可。你知道作为前端工程师最痛苦的事情是什么吗?5 个以上的浏览器以及上千种移动设备……好的前端测试工作其实是个苦差,且耗时很长。我见过很多项目延期,就因为没有把前端测试考虑进去,而通常前端测试花费的时间会超出常人预期。
所以如何扭转这种对CSS的天真看法?
在以后工作中,再也不能让后端工程师们抱有侥幸心理。作为前端工程师,我们不会随便把一堆无响应式的 CSS 代码丢给后端工程师,然后撒手不管。所以凭什么他们就能写无用的烂代码,然后在他们的 CSS 代码失效时让我们去打补丁?我不是说要让后端工程师好好写 CSS 代码,而是我们应该告诉后端工程师,如果觉得写 CSS 很难的话,就不要写。别让其他工程师觉得前端很简单,前端才不简单呢,我们前端工程师跟其他人一样努力地工作,别让他们看走眼。
本文转载自:众成翻译
译者:liuliangsir
链接:http://www.zcfy.cc/article/1683
原文:https://hackernoon.com/if-css-is-so-easy-why-does-everyone-suck-e4442cc9428a#.bq9c1sev1
查看更多内容,请访问我的博客 https://www.aaz5.com/index.php/archives/13/
既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?的更多相关文章
- 推荐一篇关于java 学习的文章,感觉写的很不错
---恢复内容开始--- 很多网友问我学习Java有没有什么捷径,我说"无他,唯手熟尔".但是我却很愿意将自己学习的一些经验写出来,以便后来者少走弯路,帮助别人是最大的快乐嘛 ...
- 平常写css网页制作时最实用的九条CSS技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...
- Oracle,Sql,procedure 感觉自己写的很棒的一个存储过程
感觉自己写的很棒的一个Oracle存储过程,(其实想说很叼^,^). 集成了一堆操作数据的功能(至少几十), 包括存储过程执行异常信息输出帮助诊断. 亮点很多, 比如`over(partition b ...
- 说明你javascript写的很烂的5个问题
Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态.如此被广泛使用.如此根植于我们的生活中的另外一种语言.它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西 ...
- java面试必备知识点-上中下三篇写的很详细
参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS之旅——第一站 为什么要用CSS
不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...
- CSS hack大全&详解(什么是CSS hack)
1.什么是CSS hack? 本文转自程序园学院:http://www.kwstu.com/Admin/ViewArticle/201409011604277330 CSS hack是通过在CSS样式 ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
随机推荐
- 牛客练习赛13E 乌龟跑步
题目链接:https://ac.nowcoder.com/acm/contest/70/E 题目大意: 略 分析: DP或记忆化搜索,个人觉得记忆化搜索比较好做,逻辑清晰,代码量少 代码如下: #in ...
- java学习之—链表(3)
/** * 使用链表实现队列 * Create by Administrator * 2018/6/19 0019 * 下午 4:37 **/ public class Link { public l ...
- CentOS7安装使用ab压力测试工具
执行安装命令:yum -y install httpd-tools 安装完毕,执行:ab -help,显示命令参数 命令模板:ab -c 100 -n 10000 待测试网站(建议完整路径) -c 即 ...
- awk骚操作
一.awk自加 [root@168web3 ~]# head /data/logs/cloud_monitor_rds_cpu.log |awk '{sum+=$NF}END{print sum}' ...
- JDK 12 & JAVA
JDK 12 & JAVA js style https://github.com/winterbe https://winterbe.com/posts/2018/09/24/java-11 ...
- JQ remove()方法实现似收货地址逐一删除的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 八、.net core 通过数据库配置文件连接操作数据库
一.创建DotNetCore项目 直接创建core项目并不勾选docker支持 二.nuget进行连接MySQL程序集的下载安装 1.MySql.Data.EntityFrameworkCore方式 ...
- js 持续访问保持session对象不消失
$(function(){ publicBusi(); }) //实时刷新登录用户信息 function publicBusi(){ setTimeout(publicBusi,1000*60*10) ...
- LODOP中page-break-before:always给div分页
Lodop中超过超文本打印项高度会自动分页:Lodop打印控件 超文本自动分页Lodop中还有NewPage和NewPageA,用于手动分页:Lodop强制分页LODOP.NewPage()和LODO ...
- 牛客网-2018年全国多校算法寒假训练营练习比赛(第四场)-A
解题思路:二分图的最大匹配,但这题是所有点都遍历一遍,所以答案/2: 代码: #include<iostream> #include<algorithm> #include&l ...