Introduction to different expression methods of CSS code formatting

This article will focus on the different ways of formatting CSS, which are different from the way of organizing CSS, just related concepts, I think organization has more to do with grouping and ordering things, while formatting has to do with spacing and indentation.

Formatting has nothing to do with the functionality of CSS. These are just the programmer's own choices, but this does not mean that formatting is not important for CSS, just like saying that the choice of canvas is not important for a painter. This is wrong. Formatting will affect the feeling of writing CSS. , how easy it is to read, how easy it is to navigate, and how easy it is to revisit and re-familiarize yourself with previously written CSS.

The reason there are so many options for CSS formatting is that there are no strict syntax rules when it comes to spacing and line breaks. For example:

div      {                width:             50px             }

is the same as the following two codes

div{width:50px}

div 

{ 
      width: 50px 
      
}

Multi-line format

.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}

I'd venture to say this is the most common and the easiest to read when it comes to short snippets of code, which is why written tutorials most often use this format. The above example does not have a blank line between the closing brace and the next selector, but this is also common.

Multiline formatting with indentation

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
    }
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

Indented blocks indicate that the selector is above it A more specific selector for the parent and pointing to the child elements of the above selector.

Single line format

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

This is probably the most space and size efficient, without full compression to remove all spaces and newlines. This technique requires minimal vertical and horizontal scrolling when writing and editing CSS, but can look cumbersome and make it somewhat difficult to navigate and find what you're looking for.

Single line format with tab key

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

Single line format with indentation

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

An indented selector Indicates that the selector targets the child elements of the selector above it.

Mainly single line format

My favorite is the single line format because I use it in a text editor Soft-Wrap, so long lines don't last forever and they wrap around the window edges. So for very long lines with lots of selectors, I added a hard return and tab on the new attribute line.

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Variations

Single line formatting can be further achieved by moving the opening bracket onto it's own line, which is something I've seen quite a bit in PHP:

div
{
    padding: 10px;
}

In the multiline format with tags, I see curly brackets used as dividing walls:

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

Combined

Single and multiline A combination of can group related properties onto a single line:

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

The format you choose boils down to readability. You need to be able to quickly navigate CSS and find what you're looking for and make changes quickly. If you find the single-line format difficult because it is hard for your eye to find the attribute you are looking for, then you should avoid using it.

Personally, I find the multiline format easy to read, but it increases the length (as in the actual number of lines) by 5-8 times. This actually makes the entire document less readable for me because of all the vertical scrolling. If your monitor is a bit narrow, the single-line format can cause horizontal scrolling, sometimes worse.

Perfect formatting is one that maximizes readability while minimizing scrolling. Plus, in a more abstract sense, it just needs to feel right.

The above is the detailed content of Introduction to different expression methods of CSS code formatting. For more information, please follow other related articles on the PHP Chinese website!