众成翻译上看到一篇不错的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。这里仅列举几种比较流行的命名约定,如:BEMOOCSSSMACSS以及我自己写的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写的那么烂呢?的更多相关文章

  1. 推荐一篇关于java 学习的文章,感觉写的很不错

    ---恢复内容开始---    很多网友问我学习Java有没有什么捷径,我说"无他,唯手熟尔".但是我却很愿意将自己学习的一些经验写出来,以便后来者少走弯路,帮助别人是最大的快乐嘛 ...

  2. 平常写css网页制作时最实用的九条CSS技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...

  3. Oracle,Sql,procedure 感觉自己写的很棒的一个存储过程

    感觉自己写的很棒的一个Oracle存储过程,(其实想说很叼^,^). 集成了一堆操作数据的功能(至少几十), 包括存储过程执行异常信息输出帮助诊断. 亮点很多, 比如`over(partition b ...

  4. 说明你javascript写的很烂的5个问题

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态.如此被广泛使用.如此根植于我们的生活中的另外一种语言.它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西 ...

  5. java面试必备知识点-上中下三篇写的很详细

    参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...

  6. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  7. CSS之旅——第一站 为什么要用CSS

    不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...

  8. CSS hack大全&详解(什么是CSS hack)

    1.什么是CSS hack? 本文转自程序园学院:http://www.kwstu.com/Admin/ViewArticle/201409011604277330 CSS hack是通过在CSS样式 ...

  9. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

随机推荐

  1. Spark源码编译,官网学习

    这里以spark-1.6.0版本为例 官网网址   http://spark.apache.org/docs/1.6.0/building-spark.html#building-with-build ...

  2. Appscanner实验还原code3

    # Author: Baozi #-*- codeing:utf-8 -*- import _pickle as pickle from sklearn import ensemble import ...

  3. Python 中关于 round 函数的小坑

    参考: http://www.runoob.com/w3cnote/python-round-func-note.html

  4. python爬虫-1

    import resquests #import urllib.request from bs4 import BeautifulSoup from collections import Ordere ...

  5. saltstack一

    Saltstack概述 Salt一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以 ...

  6. 如何快速定位到DBGrid的某一行!!!急...

    比如我查找张三,那么DBGrid就可以定位到张三那行并选中这行,除了用循环实现还有没有快速定位的方法,谢谢! 解决方案 » to SuperTitan001 那如何找到张三的这行呢?除了用循环还有什么 ...

  7. vue開發環境搭建

    npm(node package manager),nodejs的包管理器,用於nodejs插件的安裝.卸載和管理依賴. 安裝npm: 檢查npm是否安裝成功及版本:npm -v 卸載npm: 更新n ...

  8. C-Lodop对大小写敏感 不要使用大小混写

    C-Lodop是对大小写敏感的,而以前的Lodop控件,对于大小混写有可能可以用,而目前由于高版本的火狐谷歌不再支持np插件,为了兼容所有浏览器,就要使用c-lodop,或像Lodop官网的样例一样, ...

  9. NaN与Null与undefiined的关系

    在js中,定义一个变量需要通过关键字var来定义,定义的变量可以是字符串.数字等等都行.但是如果你只是定义了一个变量,没有给他赋值,那么它就默认为'undefined'.例如 var name; co ...

  10. 了解AutoCAD对象层次结构 —— 5 —— 块表

    为了清楚的了解块表的组成内容,让我们利用MgdDbg工具查看一下块表中的块表记录.在开始页面,以无样板模式新建一个.dwg文件(图 4‑7(1)),这样的话,默认的块表记录只有3条(图 4‑7(2)) ...