css开发，css代码怎么写
大家好，今天小编来为大家解答css开发这个问题，css代码怎么写很多人还不知道，现在让我们一起来看看吧！
Web前端开发规范之css规范
今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧！
css规范
1、编码规范为utf-8。
2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。
3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。
4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。
5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化
6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a)通过从属写法规避，示例见d。b)取父级元素id/class命名部分命名，示例见d。c)重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d)a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}
7、css属性书写顺序，建议遵循：布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：display&list-style&position(相应的top，right，bottom，left)&float&clear&visibility&overflow;
自身属性主要包括：width&height&margin&padding&border&background。
文本属性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&
其他&content。
8、书写代码前，提高样式重复使用率。
以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
如何写出较好的css
较好的css在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题,虽然这么说，也不是如此简单的。
一、可读性
有人认为CSS不是程序，不需要可读性，有人认为CSS只要写出来就有可读性，因为很简单。抛开各种预处理器不说，原生CSS结构确实简单，没有需要编程的部分，但仍然可能导致混乱。原因有二，一是CSS可以层叠，其中涉及到了优先级和作用范围，如果写的不好，人很难读出其中的意义，二是CSS属性众多，加上CSS3引入了很多用法独特的属性，一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码：
span{
-webkit-box-shadow: 6px 4px 4px red;
-moz-box-shadow: 6px 4px 4px red;
box-shadow: 6px 4px 4px red;
}
div span{
border-width: 4px;
border-style: dotted;
border-color: blue;
}
#box{
border-left: 2px solid red;
border-bottom: 2px solid red;
}
乍一看也没什么，都是border，大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的，你可能会说这太傻了，看不到吗。是的，当这3部分散落在上万行的CSS中时，肯定看不到。于是有人很自然的想起了我们可爱的浏览器，没错，在浏览器中可以快速找到作用于目标的CSS样式，但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的，因为你是靠浏览器找到它的。然后剩下两种可能，不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%，后者悲剧的可能性是90%，因为你已经掉坑里了，很快我们会发现要修改它还牵扯到了另外的地方，接着在浏览器中探索到另一个莫名其妙的样式，当你弄懂全部的时候，你应该已经把上万行的代码弄了个一清二楚了，也许最幸运的是，浪费了几个小时的时间发现只需要修改一行就能达到目的。
当然，我们可以天真的认为，只要把他们写在一起就可以了，这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。
维护性
所谓物以类聚是很有道理的，人们习惯将事物归类，但问题是分类标准，样式并不关心业务，无论是什么文字内容，还是功能有何不同，它在乎的只是样式，比如文字的尺寸，间距和宽高，颜色等等。如果简单的将一个组件的样式放在一起，势必带来的就是小段代码的重复书写。不觉得有多严重？我来举个栗子。
aside{
box-shadow: 6px 4px 4px#AA3343;
}
nav{
box-shadow: 6px 4px 4px#AB3633;
}
.item{
box-shadow: 6px 4px 4px#AA3732;
}
.item.otherStatus{
box-shadow: 6px 4px 4px#AA3132;
}
继续说上面的例子，box需要阴影，但如果这个项目的UI统一风格，包括sidebar，navigator以及item都需要这样的阴影呢？再如果，明天客户或者UX一拍脑袋，这个阴影应该是灰色的不该是红色的呢？不要继续天真的认为全局替换是救命稻草。首先，没有几个网站会用red，blur做色调的，你用的应该是#AA3333，这样的代码，然后你发现sidebar用了#A43433，而navigator是#AB3633，等等，item有两个状态，而两个状态对应的颜色是不一样的。这怎么可能？但当你打开浏览器的时候你会发现本来就相差无几的颜色，在阴影中变得一模一样了，谁看的出来呢，当初使用的时候可能也不过是随意的在mockup中取的一个颜色。
大量的重复带来的不仅仅是代码的冗余，我们必须靠人力去同步它们，而人很难保证它们的修改是完全一致的，尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS，其后果就是进度和人力的压力，后面就是PM有没有读过《人月神话》的事了。
肯定有人在想，谁让你当初要写成这样呢。我们在读代码的时候最喜欢问，当初为什么要这么写？但慢慢的你会读出它的历史，有时候它是身不由己的。这就涉及到了下一个要讨论的内容。
二、扩展性
扩展性是一个具有欺骗性的东西，所谓的扩展性其实就是在现有基础上再次开发新东西的性能，但我认为它还必须有前提条件，那就是保持可读性与维护性。
简单的追求可维护性是自取灭亡，原因很简单，将新旧代码完全分离的时候扩展性最高，因为不必担心对以前的部分有影响，新的样式可以随意发挥。是不是很神奇，这样想的我们写下的代码，肯定就是前面我们追问的代码。所以自己回答自己吧，当初没考虑可读性和维护性，只想着快点增加新的样式，就这么写了。
那什么才是一个好的扩展性呢，简单来说，就是多功能产品。比如一个box，也许它的样式就时
三、复用性
似乎我一直在说的就是重复，那我们就来说说复用性，如何才能复用CSS代码是一个很大的问题，比如粒度，是一两个属性进行复用还是一大组选择器进行复用呢，再比如对象，是为了class复用属性，还是为了html复用class呢。这些选择不算太重要，但是带来的影响却很重大，可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。
.shadow{
-webkit-box-shadow: 6px 4px 4px#A93334;
-moz-box-shadow: 6px 4px 4px#A93334;
box-shadow: 6px 4px 4px#A93334;
border-left: 2px solid#A93334\9;
border-bottom: 2px solid#A93334\9;
}
这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了，但这导致了一个复用的问题，和上面那段捣乱的CSS样式一样，如果item已有另外2个border了，那这个class是无法去除的。所以复用时不仅要考虑需要什么，还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的，因为user agent的原因，很多属性是隐藏在element中的。
css开发者工具
CSS是Web开发的基础之一，目前很多人正在学习和使用。今天，给大家介绍几款CSS开发工具，让你快速成为开发高手。
（一）在线学习CSS
1、Flexplorer
Flexbox能在屏幕上实时查看效果以及代码。还可以编辑文本框，并查看文本框的响应式布局代码。这种学习方式非常有趣，很适合新手。
2、GridGarden
这个是通过互动游戏，来提示你编写CSS代码来种植胡萝卜园。这也是一个有趣的学习方式，确保新手小白以引人入胜的方式学习CSSGrid的基础知识。游戏包含28个级别，每个级别都需要你编写CSS代码段才能完成。
（二）学习制作工具
1、Patternizer和Patternify
通过这两种工具，可以在用户友好的界面中使用CSS创建出色的模式。而且它是直接用CSS编写的，可以轻松地在网站上实现使用。
2、EnjoyCSS
这个工具非常简单，是可以使用一些简单的UI设计元素，然后通过这个工具将其转换为CSS代码。EnjoyCSS极大地改变了我的工作流程。由于易于使用，能使我们花费在创建复杂CSS样式上的时间和精力减少，很容易就能得到复杂的CSS效果。
3、CSSmatic
这个多合一的工具，它可以帮你实现生成渐变、边框半径、噪点纹理、盒子阴影等效果，所有这些都包含一个简单直观的UI。作为前端开发人员，该工具是很必要的。
4、CSSArrowplease
此工具可帮助你创建和导出带有箭头的自定义的代码提示框。尽管从头开始编写代码听起来很复杂，但该工具只需单击几下即可提供可用的代码。获得代码后，就可以复制代码并对其进行一些更改。
关于本次css开发和css代码怎么写的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。