Built-in Styles and Classes

Question

In my head, I always knew to use inline styles classes for any project. But are there any articles / publications / blogs that identify the pros and cons of each? I am in a discussion about this, and I cannot find the blog post that I read long ago about this.

Answer 1

There is a simple reason. CSS point is to separate content (HTML) from presentation (CSS). All about accessibility and code reuse .

Answer 2

Primarily:

• If HTML is built or generated regardless of the overall design of the site (for example, code for a common template), add classes and identifiers with a reasonable name that are associated exclusively with external style sheets. Use sufficient elements to allow arbitrary manipulation of CSS. For example, see CSS Zen Garden . This applies to all CMS, programs, scripts, and other dynamically created site sites. HTML output should not contain absolutely any style or layout of any type. There are no exceptions.

Assuming you are dealing with static content, then:

• If you can reuse a style, make it a class and a link to a stylesheet.

• If there is no way to reuse the style (this is a one-time thing that doesn't make sense anywhere), use the <style> block, which refers to the #id element.

• If the CSS attribute only makes sense in the context of the surrounding HTML (for example, some uses of clear: , I insert the style into the element.

Many call this heresy the same way many people condemn any use of goto in modern programming languages.

However, instead of subscribing to a stylistic dogma, my opinion is that you should choose a method based on your circumstances, which most reduces the overall load. Style sheets add a level of indirection that simplifies changes at the site level and helps ensure consistency. But if on each page there are several dozen classes that are used in only one place, you actually increase your workload, not reduce it.

In other words, do not do anything stupid and confusing just because people tell you that this is the right way to do it.

Answer 3

If the choice were there, my first preference would be classes / other selectors. However, there are situations where inline styles are the only way to go. In other situations, just the CSS class alone takes too much work, and other types of CSS selectors make more sense there.

Suppose you had to strip a zebra to indicate a list or table. Instead of applying a specific class to each alternate element or row, you could simply use selectors to do the job. This will keep the code simple, but it will not use CSS classes. To illustrate three ways :

Using only a class

 .alternate { background-color: #CCC; } <ul> <li>first</li> <li class="alternate">second</li> <li>third</li> <li class="alternate">fourth</li> </ul> 

Using classes + structural selectors

 .striped :nth-child(2n) { background-color: #CCC; } <ul class="striped"> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> 

Using Inline Styles

 <ul> <li>first</li> <li style="background-color: #CCC">second</li> <li>third</li> <li style="background-color: #CCC">fourth</li> </ul> 

The second way seems the most portable and encapsulated for me. To add or remove stripes from any element in a container, simply add or remove the striped class.

However, there are cases when inline styles not only make sense, but are the only way. When the set of possible values ​​is huge, it is foolish to try to make classes in advance for each possible state. For example, a user interface that allows the user to dynamically place certain elements anywhere on the screen by dragging and dropping. The element must be set absolutely or relatively with the actual coordinates, such as:

 <div style="position: absolute; top: 20px; left: 49px;">..</div> 

Of course, we could use classes for every possible position that the div can take, but this is not recommended. And you can easily understand why:

 .pos_20_49 { top: 20px; left: 49px; } .pos_20_50 { top: 20px; left: 50px; } // keep going for a million such classes if the container size is 1000x1000 px <div class="pos_20_49">..</div> 

Answer 4

Use common sense.

Everyone knows that presentation and content should be separate from each other in an ideal world. Everyone also knows that this doesn't work very well for a long time. We all know that you should use a div, not tables for the layout, but we also know that under any circumstances, when you do not have full control over the content, it simply does not work properly.

Downloading a stylesheet of 500k for styling one element, because you took all the possible styles and stuck in the stylesheet, kill your page by loading 500 small stylesheets to style your page because they are needed, they all will also kill you page .

Reuse is excellent in concept, but the reality is that it is only useful in certain contexts. This applies equally to everything that exists in the concept. If your project does what you want, it does it in every smart browser, does it efficiently and does it reliably, then you are good to go, it is not much more difficult to refactor css than this code.

Answer 5

I can't think of any advantages for inline styles.

CSS is Progressive Enhancement and not Repeatable (DRY) .

With style sheets, changing the look is as simple as changing a single line in HTML code. Make a mistake or the client does not like the change? go back to the old style sheet.

Other benefits:

• Your site can automatically adjust to different media, for example, for printing and for hand-held devices.

• CSS fixes for this terrible browser that should not be named will become a snap.

• The user can easily customize the site with plugins such as Stylish.

• You can more easily use or share the code from site to site.

Answer 6

I can only think of two situations where inline styles are appropriate and / or reasonable.

• If inline styles are applied programmatically. For example, displaying and hiding elements using JavaScript, or applying content-specific styles when rendering a page (see # 2).

• If inline styles complete the class definition for a single element in cases where id is not appropriate or reasonable. For example, setting the background-image element for a single image in the gallery:

HTML

 <div id="gallery"> <div class="image" style="background-image:url(...)">...</div> <div class="image" style="background-image:url(...)">...</div> <div class="image" style="background-image:url(...)">...</div> </div> 

CSS

 #gallery .image { background: none center center; } 

Answer 7

To make this stream complete, it's worth mentioning that inline styles are the only way to go to GMail when creating HTML + CSS emails.

For more details see: http://www.email-standards.org/clients/gmail/

Answer 8

Assuming you are using external style sheets, caching is an added benefit of the above. The browser will load and cache the stylesheet once, and then use a local copy every time it is referenced. This allows your layout to be more compact. Less markup for transmission and parsing means a more responsive feeling and a better experience for your users.

Answer 9

Inline styles are definitely the way to go. Just look at http://www.csszengarden.com/ - it would never be possible with classes and external style sheets ...

or wait ...

Answer 10

Classes are reusable styles that can be added to HTML elements. eg -

 <style> .blue-text{color:Blue;} </style> 

you can use and reuse this class of blue text for any HTML element. Note that in a CSS style element, classes must begin with a period. In class declarations of HTML classes, classes must not begin with a period. whereas the inline style is similar, for example, -

 <p style="color:Blue;">---</p> 

So the difference between the two is that you can reuse classes while you cannot reuse inline styles.

Answer 11

With the addition of custom properties in CSS, there is now another use case. You can use the inline style to set custom properties.

For example, below I use a CSS grid to align HTML lists and Div blocks and want to have flexibility in HTML (as BootStrap or any other infrastructure provides), since this HTML is dynamically generated by the application.

CSS:

 :root{ --grid-col : 12; --grid-col-gap:1em; --grid-row-gap:1em; --grid-col-span:1; --grid-row-span:1; --grid-cell-bg:lightgray; } .grid{ display: grid; grid-template-columns: repeat(var(--grid-col), 1fr); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); } .grid-item{ grid-column-end: span var(--grid-col-span); grid-row-end: span var(--grid-row-span); background: var(--grid-cell-bg); } 

HTML:

  <ul class="grid" style="--grid-col:4"> <li class="grid-item">Item 1</li> <li class="grid-item">Item 2</li> <li class="grid-item">Item 3</li> <li class="grid-item">Item 4</li> <li class="grid-item">Item 5</li> <li class="grid-item">Item 6</li> <li class="grid-item">Item 7</li> <li class="grid-item">Item 8</li> </ul> 

In the above HTML, to change the four columns to 3, I change the custom property using the style attribute:

  <ul class="grid" style="--grid-col:3"> <li class="grid-item">Item 1</li> <li class="grid-item">Item 2</li> <li class="grid-item">Item 3</li> <li class="grid-item">Item 4</li> <li class="grid-item">Item 5</li> <li class="grid-item">Item 6</li> <li class="grid-item">Item 7</li> <li class="grid-item">Item 8</li> </ul> 

You can check out the real-time advanced example at https://codepen.io/anon/pen/KJWoqw.