css常用選擇器命名,如何看待CSS中BEM的命名方式?
BEM只是一種思維,它為我們規范CSS命名提供了一種方向,每個人理解不一樣,最終悟出的方式也會大同小異,它區別于OOCSS(面向對象編程CSS)的理念,OOCSS更加提倡復用性,而BEM更加的扁平
在我知道BEM之前,我一直在尋找一種最優的命名方式,方便后來的新員工的融入,以及團隊協作等等,對于切圖網這樣罕見的專門做前端切圖的公司來說,這一點顯得特別重要
在我們的近2000多個切圖項目中,幾乎各種命名方式都試過,從我們的經驗中摸索出自己的一套命名體系,舉個例子
.slider
.slider-wrapper
.slider-nav
.slider-nav_item
.slider-arrow
.slider-arrow_prev
.slider-arrow_next
這是我們公司內部在用的命名方式,并且符合BEM的理念,它有一個缺點就是長了一點,不過目前來說,利大于弊,如果你有更好的方式,歡迎給我提議
用什么表示子代選擇器?
CSS3中的關系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號連接,兄弟選擇器由符號“+”和“~”連接,具體如下所示。
(1)關系選擇器
例如: h1>strong
說明:表示選擇嵌套在h1標記的子標記strong。
(2)臨近兄弟選擇器
例如: h2+p
說明:表示選擇h2標記后緊鄰的第一個兄弟標記p。
(3)普通兄弟選擇器
例如:p~h2
說明:表示選擇p標記所有的h2兄弟標記
類選擇器是以什么進行標識?
類選擇器使用“.”(英文點號)進行標識,后面緊跟類名(自定義,我們自己命名的)。
如果想要差異化選擇不同的標簽,單獨選一個或者某幾個標簽,可以使用類選擇器。
偽類選擇器和偽元素選擇器的區別?
偽元素和偽類之所以這么容易混淆,是因為他們的效果類似而且寫法相仿,但實際上 css3 為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。