css用到什么程度算合格,算精通,css中最难的工作是什么?

html-css021

css用到什么程度算合格,算精通,css中最难的工作是什么?,第1张

本人做美工有一年多,现在改做PHP了,因此想我结合以前的经验和一个程序员的眼光来说说,希望能给你一点帮助;

div+css虽然算不上难,但是要做好也是不易的,考虑的方面也很多,一个好的builder应该从工作能力、工作效率以及习惯三方面进行评定,那怎么样才叫好呢,我说一下我的个人看法(个人意见,仅供参考):

一、基本功:各浏览器的兼容性,熟知一些浏览器的bug并能快速的解决,熟练使用html语言以及css,能手写当然最好,不能手写也没关系,用工具也行,但一定要知道它们各有什么用处,这样当我们想用的时候能快速的知道用什么比较合适;

二、判断力:拿到图纸后能迅速判断出该页面哪块用那些标签,css该怎么写,图片该怎么切,哪些地方可以共用,这些比较适合一些比较大的单页面,一些大网站的首页,如果是整站的话里面要考虑的东西就更多了,像该分几个文件夹、几张样式表了,样式改怎么划分了,是公用的放一块还是按模块划分了等等,这些都是切图的前期要考虑到的,考虑到了全局,以后做的时候就不会顾此失彼;

三、效率:我认为的效率是又快又好的完成所交给的任务,而这个好就是用最少的标签、最少的样式完成所要的效果,所以就要熟悉各种标签的用处,我的原则是,能不适用的标签尽量不用,这里还涉及到seo方面和网站的负载方面的东西,有时间也可以研究研究;

四、习惯:一个好的builder应该有一个良好的习惯,这条放在任何工作岗位都很重要,这里主要谈哪些习惯才叫好习惯;首先,代码注释,无论是结构页还是样式表,一个方便程序员套后台程序,让他能进行很快的定位,二个也方便自己以后修改;其次,应该总结出一套自己的命名规则;三,有一张自己的通用样式表,里面放工作中常用的一些样式,像清除html原有的属性了,分页样式了等等,当自己想用的时候直接复制随便改改就能用了;

五、全局把握:这点是考验一个人能力的关键,考虑全局不仅要考虑现在该怎么做,还要考虑到以后的怎么改最省事,所以在做的时候尽量考虑这个页面或者网站的重用性,扩展性,和可维护性,这是一劳永逸的,方便他人,最重要的是方便自己;

六、学习:学无止境,光会div+css是不行的,还要学习其他的技术,比如js,提高自己的价值,多看看别人的代码,对比一下自己的代码,综合起来选一套最好的;

以上的六点是我在平时工作中总结出来的,写的比较乱,希望对能有所帮助,以前在做切图的时候,觉得最难切的是那种可以换肤、可以添加和删除模块并且还能拖拽的博客,要考虑的东西实在是太多,不过到是挺锻炼人,有时间你可以去练练手

前端会html/css/js够,能基本做一个不错的页面。但是如果想成为一个技术高的前端,还需要学习和掌握更多的东西。

如何才能做得更好呢?

第一,必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。

第二,在一名合格的前端工程师的知识结构中,网站性能优化、SEO和服务器端的基础知识也是必须掌握的。

第三,必须学会运用各种工具进行辅助开发。

第四,除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持,等等。

可见,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。这就是前端开发的特点,也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手,对于老手来说,也时常不知道下一步该学什么。

代码质量是前端开发中应该重点考虑的问题之一。例如,实现一个网站界面可能会有无数种方案,但有些方案的维护成本会比较高,有些方案会存在性能问题,而有些方案则更易于维护,而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的,对代码质量的要求也不同,但它们之间又有着千丝万缕的联系。

一、技术的必须的

作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通,类似我字样对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方案的,首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下(包括搜索引擎),能够完成大多数任务。

以下知识点是作为一个前端工程师必须了解和熟悉的:

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。

盒模型——外边距、内边距和边框之间的关系,IE <8中的盒模型有什么不同。

块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。

JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。

上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识,也还需学会至少一门后端编程语言,让你自己学会如何与后端进行更好的交互。

很多前端工程师对一些库非常的熟悉,jQuery,Bootstrap等,但是对于库的熟悉并不能提现你的优秀,整整优秀的是那些理解库背后的机制,特别是能够徒手写出一个自己的库的人。

真正合格的前端工程师是能实现具体的功能要求,而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。

二、沟通很重要

优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关。在任何情况下,前端工程师至少都要满足下列四类客户的需求。

产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求,以及怎样通过他们设计的模式赚到钱(但愿如此)。一般来说,这些人追求的是丰富的功能。

UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。

项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点,无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化,以及不在升级更新时引入新问题。

最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道,但他们的反馈意见至关重要;没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能,以及竞争性产品所具备的功能。

不要在没有作出评估之前就随便接受某项任务。你必须始终记住,一定先搞清楚别人到底想让你干什么,不能简单地接受“这个功能有问题”之类的大概其的说法。而且,你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理,问一问这个按钮有什么用处,然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师,这种沟通至关重要。

那么,前端工程师应该最关注哪些人的意见呢?答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期,然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上,因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能,必须删繁就简,你怎么跟产品经理解释?再比如,假设某个设计如果不改回原方案可能会给应用程序造成负面影响,你怎么才能说服UI设计师?作为前端工程师,你必须了解每一类人的想法从何而来,必须能拿出所有各方都能接受的解决方案。从某种意义上说,优秀的前端工程师就像是一位大使,需要时刻抱着外交官的心态来应对每一天的工作。

专业技术可能会引领你进入成为前端工程师的大门,但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力,才会真正让你变得优秀。

三、提升无止境

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的,这些技术几乎每天都在变化,如果没有快速学习能力,你就跟不上Web发展的步伐。你必须不断提升自己,不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别,而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

四、前端开发知识架构

前端工程师

SVG/Canvas/VML

D3/Raphaël/DataV

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

YDN/YUIConf

MongoDB/CouchDB

HTML5/CSS3

响应式设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

CSRF/XSS

ADsafe/Caja/Sandbox

类库模块化

业务逻辑模块化

文件加载

CommonJS/AMD

YUI3模块

LABjs

SeaJS/Require.js

压缩合并

文档输出

项目构建工具

YUI Compressor

Google Clousure Complier

CleanCSS/UglifyJS

JSDoc

Dox/Doxmate

make/Ant

GYP

Grunt

Yeoman

数据结构

OOP/AOP

原型链/作用域链

闭包

函数式编程

设计模式

Javascript Tips

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace’s Ajax

高性能JavaScript

HTTP1.1

ECMAScript3/5

W3C/DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS/AMD

HTML5/CSS3

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS

Backbone/KnockoutJS/Emberjs

Coding style

单元测试

自动化测试

JSLint/JSHint

CSSLint

Markup Validation Service

QUnit/Jasmine

Mocha/Should/Chai

WebDriver

IDE

调试工具

版本管理

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

Git/SVN

Github/Bitbucket/Google Code

HTML/HTML5

CSS/CSS3

PhotoShop/Paint.net

JavaScript/Node.js

JavaScript语言精粹

IE6/7/8/9

Firefox

Chrome/Safari/Opera

浏览器

编程语言

切页面

开发工具

代码质量

前端库/框架

前端标准/规范

性能

编程知识储备

部署流程

代码组织

安全

移动Web

JavaScript生态

前沿技术社区/会议

计算机知识储备

软技能

可视化

后端工程师

Unix/Linux/OS X/Windows

SQL

MySQL/MongoDB/Oracle

C/C++/Java/PHP/Ruby/Python/…

编程语言

数据库

操作系统

数据结构

参考链接:

http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html

JacksonTian/fks · GitHub