css中 .class.class 与.class .class，哪个的性能和维护性较好，在实际的开发中需要注意这个吗

Question

例如

<li class="list-item">
   <h1 class="title list"></h1>
</li>

用.list-item .title{}还是用.title.list{}

Answer 1

首先。。。
你这个命名就很有问题。。。
一般title应该只有一个吧，而一个list代表的是一个列表，这两个平级。。。你的html到底要写什么结构出来。。。
其实css最难的只有命名，其命名决定了他的复用跟封闭。至于选择器的选择都不是问题。
比如你是要把list item进行封装
此时你很明确，一个list里面必须有item，Item必须在list里面
那么就是
.list .item甚至是.list>.item
这样可以最大程度得保证你的样式不会错乱。
至于性能我觉得你可以先不要去关心。先考虑复用性，写多了自然知道怎么选择了，自然知道什么地方好什么地方不好。
至于怎么保持高复用性，其实我自己的建议是使用scss这种预处理器去写，然后坚持一个原则，以前的时候的页面源代码结构通常是
page

.js
.html
.css/.scss

现在变成
page

.js
.html

style

.css

这种结构来写。我觉得就可以强制性的去提高复用性了。当你在写js的时候，或许你是在写业务，而当你在写css的时候，要去意识到自己写的是一个框架(当然想vue这种就应该考虑怎么不写css不引入样式框架而一切复用都用组件解决了)
我也是还在学习中，希望给你点帮助

Answer 2

1.如果你的title类和list类可能出现复用也就是其他元素也可能用到这两个类的情况下那肯定是分开写的
2.如果只是要定义list的样式，那么一个类就够了