Put all styles in css files vs Mixed structure

Question

I was told that a good template is to put all styles in css files, because blah and blah (you can search for the reason in google, as this is a very popular idea). However, I always ask why when people try to sell. Based on my own experience with some project. I think putting all styles in files is harder because there are some inherited or page-specific styles.

For example, I have a control to display terms and conditions:

.TermsAndConditions { background-clip: padding-box; border: 1px solid #CFC2A7; border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset; height: 26px; line-height: 26px; padding: 0 10px; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; position:absolute; top: 0px; left:0px; } 

When I need to use it on my two pages, I need to create two specific classes for it:

 .HomePageTermsAndConditions { position: static; bottom: 20px; right:30px; } .ImagePreviewPageTermsAndConditions { position:absolute; top: 50px; left:60px; } Home page: <div class="TermsAndConditions HomePageTermsAndConditions"> </div> Preview page: <div class="TermsAndConditions ImagePreviewPageTermsAndConditions"> </div> 

There are absolutely no inline styles, but there are some problems:

• Location information is not used at all, so the performance gain is very limited depending on the current network speed. (e.g. clear: left)

• Some styles are not even inherited, so we need to create CSS classes for each level, which does not save the effort.

• It is difficult to maintain, since css classes in files can be inherited or redefined on another page, when editing a class it is difficult to find out what effect it can cause, so it takes time to test / debug / fix both ways.

• Performance corruption, some css class will remain there when the remote page is deleted. It takes effort to clean them.

So, I suggested moving special page / label styles (e.g. location information) as follows:

 .TermsAndConditions { background-clip: padding-box; border: 1px solid #CFC2A7; border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset; height: 26px; line-height: 26px; padding: 0 10px; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; } <div class="TermsAndConditions" style="position:absolute; bottom: 20px; right:30px;"> </div> <div class="TermsAndConditions" style="position: static; top: 50px; left:60px;"> </div> 

Benefits we can get:

• The classes do not have a specific page. It does not affect performance because there are only a few styles on the page.

• It’s easier to maintain because the inline style takes precedence, editing the inline style will immediately affect the user interface. Also, you do not need to worry about breaking other pages.

• When we need to delete a page, we usually do not need to clear css. Since there is a css page on the page, it comes with the page. Things in css files are more likely to be available.

• More object oriented. Since the css classes in the files do not have page information, they are more like a control. It is easy to connect to other pages.

For instance:

When I need it on a new page, I just copy the html and change the inline style:

 <div class="TermsAndConditions" style="position: absolute; top: 50px; left:60px;"> </div> 

This is my idea against "placing all styles in css files". I hope to see your ideas about this, be it good sides or bad sides.

thanks

Answer 1

I think it's best to mix things up ... Usually I use classes, but when I need to specify position / sizes, I use styles. Sometimes I use existing classes, but mix them with style when I need to override class settings. I think the only case where I will not use the style is when I want to create a fully dynamic layout and be able to change it only with CSS.

Answer 2

The advantage of using your styles outside of your HTML code.

Suppose I have a navigation bar on each page, for example:

 <ul class="main-navigation"> <li>my link</li> <li>my link</li> <li>my link</li> <li>my link</li> </ul> 

My styles will look something like this:

 .main-navigation ul li { color:#000; } 

Now let's say that I have the same navbar, but with built-in styles this time.

 <ul> <li style="color: #000;"></li> <li style="color: #000;"></li> <li style="color: #000;"></li> <li style="color: #000;"></li> </ul> 

Or let's say that I have styles embedded in my HTML like this.

 <style type="text/css"> .main-navigation ul li { color:#000; } </style> 

Depending on how the file management is configured. Most likely, you will not want to go through each HTML file to change something as easy as your navigation color. When you can just go into the stylesheet and change one line of code.

Hope this makes sense. But I suggest that in some cases I would say that this is probably more practical. However, I personally believe that separating HTML, CSS, Javascript and PHP makes troubleshooting easier.