Versatile style styles for easy maintenance

Consider the following three scenarios ...

Scenario A

@import "reset.css";
/* ... */
p {margin:1em 0;}
/* ... */
p#copyright {margin:0; padding:10px;}

In Scenario A, the general rule applies to all elements <p>that give it upper and lower margins, so the paragraphs are properly distributed when used in HTML. But, by doing this, this causes cases when an element <p>now needs its common marks removed for decorative purposes, for example. copyright at the foot of the document should not have any fields.

Scenario b

@import "reset.css";
/* ... */
div.content_body p,
div.sidebar_body p {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

Scenario B assumes that the elements <p>do not need upper and lower margins unless explicitly defined. Here the content and sidebar elements should have well-spaced paragraphs

Script c

@import "reset.css";
/* ... */
p.spaced {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

C <p> spaced .

:

, ? :

  • CSS
  • CSS

, , ?

!

+3
5

, (, "" ) , . , A B.

, A.

, B.

C, . , ( - ) 6 . , :

  • , " ", , (<p>Whatever</p>), .

  • , , / .

  • CSS , , , , , . C , , .

+2

Generic first, , .:)

+2

.

, , , , , CSS .

( ), B .

C, , HTML . , , , . .

Ive - B. , , , , , , . -, : . , , B - , , .

+1

. , , . , , - " ?" , , a p , , . , . , .

0

D

@import ""; // don't need this
p { } // don't need this
ul#footer li { padding: 10px }
-1

Source: https://habr.com/ru/post/1733210/


All Articles