CSS - Mở rộng thuộc tính lớp học

Question

Tôi khá mới đối với CSS và đã tìm đường cho đến nay. Tôi đang tạo các nút này như liên kết với bóng và nội dung. Bây giờ có một số nút như vậy được yêu cầu trên trang web - mọi thứ về các nút đều giống nhau - ngoại trừ một số thuộc tính thay đổi như chiều rộng và kích thước phông chữ.

Bây giờ thay vì sao chép cùng một mã - hơn và hơn cho mỗi nút - có cách mở rộng nút và chỉ thêm các thuộc tính thay đổi.

Ví dụ về hai nút - css

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
} 

Và đây là cách tôi đang sử dụng nó trong html của tôi

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Vì vậy, tôi tự hỏi nếu có một cách sạch hơn để làm này - như

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

Nhưng tôi không chắc chắn cách thực hiện việc này. Cảm ơn vì những đóng góp của bạn

Answer 1

Bạn có thể thêm nhiều lớp học để một yếu tố, do đó, có một lớp .button trong đó bao gồm tất cả mọi thứ, sau đó là lớp .button-submit, bổ sung thêm mọi thứ.

Ví dụ:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}​ 

Xem live jsFiddle here

Trong trường hợp của bạn, sau đây nên làm việc:

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}​ 

Xem live jsFiddle here

Answer 2

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

Thêm một lớp nút để cả hai liên kết cho các bộ phận chung

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
} 

Giữ trong các lớp khác của bạn các quy tắc mà không phải là phổ biến.

Và HTML của bạn sẽ được

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a> 

Answer 4

Bạn có thể làm điều này vì bạn có thể áp dụng nhiều hơn một lớp để một phần tử. Tạo lớp học chính của bạn và các lớp học nhỏ hơn và sau đó chỉ cần áp dụng chúng khi cần thiết. Ví dụ:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Điều này sẽ áp dụng nút và gửi các lớp bạn sẽ tạo trong khi cũng cho phép bạn áp dụng riêng các lớp đó.

Sửa dụ mã của bạn dọc theo dòng:

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

Và áp dụng như:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a> 

Answer 5

Bạn có thể muốn nhìn vào Sass. Với Sass bạn về cơ bản có thể tạo các biến trong tệp css của bạn và sau đó sử dụng lại chúng nhiều lần.http://sass-lang.com/ Ví dụ sau đây được lấy từ trang web chính thức Sass:

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

Thay vì lặp lại các chung "Thêm một lớp nút để các yếu tố" câu trả lời tôi sẽ cho bạn thấy những điều mới mẻ trong thế giới kỳ lạ và whacky của CSS tuổi mới, hay được gọi là SCSS!

Việc sử dụng lại mã này trong bảng định kiểu có thể đạt được bằng thứ được gọi là 'Mixin'. Điều này cho phép chúng tôi làm là sử dụng lại các kiểu nhất định bằng cách sử dụng thuộc tính '@include'.

Hãy để tôi cung cấp cho bạn một ví dụ.

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
} 

và sau đó bất cứ khi nào chúng tôi có một nút chúng ta nói

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
} 

Đọc thêm ở đây: http://sass-lang.com/tutorial.html.

Lây lan từ !!!

Answer 7

Bạn có thể muốn thử điều này:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
} 

Bằng cách này bạn tránh lặp lại những lời nói và sẽ có thể sử dụng các lớp trong các yếu tố như thế này:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a> 

Xem ví dụ trong JSFiddle (http://goo.gl/6HwroM)