css样式应该怎么写？

问题描述

问 题

最近自己在做一个小项目练手，但是在写样式的时候没少发现问题，其中比较困惑我的问题就是css样式的书写问题。因为自己是个前端小白，然后我们公司的项目里面的css样式都是写在一个css文件里面的。然后我就也是这样写的，结果首先第一个问题就是：
1.各种class命名的问题。class的命名真心不简单。
2.因为我是自己写的css外部文件，所以就会出现样式的兼容问题，就是互相影响（应该是选择器没写好的问题）。然后还有一个致命问题就是我在引入bootstrap的css文件的时候，直接就样式混乱了。应该是名字重合了导致的问题吧。

css样式有很多写法，我知道的就有这么几种，一种是直接在h5标签里面写，还有一种就是写在一个单独的外部文件里面然后在ilndex文件里面引入，还有就是各种sass,less等编译器。
主要就是这两个问题。所以问问大神，到底应该用哪种方法写css样式。

解决方案

这里说几点，希望能帮到你
1.写样式之前一定要确定好要用什么框架，把文档过一遍，所有的API大致了解，就拿bootstrap举例，这个框架用的是-链接字符，你在命名的时候就可以采用驼峰命名或_的命名方式，避免重复。
2.命名问题解决了下面就是引入问题，这里引入框架css与自己的css先后顺序没有要求，前提是在第1条满足的基础下
3.自己的样式命名尽量语意话，采用嵌套的方式逐级递进，例如：导航nav,链接nav-item,链接下的按钮nav-item-btn。这样可以避免重复，还有你看到样式的时候可以联想到层级关系，有利于你的优先级判断，也方便你把公共样式提取到外层的选择器中。
4.编码规范可以参考我转载的一篇Airbnb CSS/Sass 编码规范
5.然后就是代码模块化，你可以在一个总的main.css中通过@import引入其它所有的样式，模版中你只需要引入main.css文件
6.我不建议你现在使用预编译语言：sass，less，stylus等，因为初期最重要的是规范的养成，而预编译语言反倒会给你增加概念和学习难度。

注意这几条希望你可以写出一手好看实用的css。望采纳

这篇关于css样式应该怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！