Inline CSS Formatting Best Practices - Two Questions

Inline CSS formatting best practices - Two questions

Answer #1: No.

Semi-colons are required only between declarations.

A declaration-block (also called a
{}-block in the following text) starts
with a left curly brace ({) and ends
with the matching right curly brace
(}). In between there must be a list
of zero or more semicolon-separated
(;) declarations.

Source: http://www.w3.org/TR/css3-syntax/#rule-sets

The value of the style attribute must
match the syntax of the contents of a
CSS declaration block (excluding the
delimiting braces)

Source: http://www.w3.org/TR/css-style-attr/#syntax

Since you have only one declaration, there is nothing to separate, so no semicolons are needed.

However, the CSS syntax allows for empty declarations, which means that you can add leading and trailing semicolons as you like. For instance, this is valid CSS:

.foo { ;;;display:none;;;color:black;;; }

and is equivalent to this:

.foo { display:none;color:black }

---

Answer #2: No.

A declaration is either empty or
consists of a property, followed by a
colon (:), followed by a value. Around
each of these there may be whitespace.

Source: http://www.w3.org/TR/css3-syntax/#declarations

You can add spaces in order to improve readability, but they have no relevance.

What's so bad about in-line CSS?

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

<div style ="font-size:larger; text-align:center; font-weight:bold">

on each page to denote a page header, it would be a lot easier to maintain as

<div class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

Inline HTML vs external CSS efficiency/Best practices

External css classes make significant difference in the page load time as compared to inline css. When a html page is repeatdly loading by the user , external css files will be cached on browser thus loading becomes faster, as in the case of inline styles it need to be load each time

React.js inline style best practices

There aren't a lot of "Best Practices" yet. Those of us that are using inline-styles, for React components, are still very much experimenting.

There are a number of approaches that vary wildly: React inline-style lib comparison chart

All or nothing?

What we refer to as "style" actually includes quite a few concepts:

• Layout — how an element/component looks in relationship to others
• Appearance — the characteristics of an element/component
• Behavior and state — how an element/component looks in a given state

Start with state-styles

React is already managing the state of your components, this makes styles of state and behavior a natural fit for colocation with your component logic.

Instead of building components to render with conditional state-classes, consider adding state-styles directly:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />

// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Note that we're using a class to style appearance but no longer using any .is- prefixed class for state and behavior.

We can use Object.assign (ES6) or _.extend (underscore/lodash) to add support for multiple states:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Customization and reusability

Now that we're using Object.assign it becomes very simple to make our component reusable with different styles. If we want to override the default styles, we can do so at the call-site with props, like so: <TodoItem dueStyle={ fontWeight: "bold" } />. Implemented like this:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

Layout

Personally, I don't see compelling reason to inline layout styles. There are a number of great CSS layout systems out there. I'd just use one.

That said, don't add layout styles directly to your component. Wrap your components with layout components. Here's an example.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

For layout support, I often try to design components to be 100% width and height.

Appearance

This is the most contentious area of the "inline-style" debate. Ultimately, it's up to the component your designing and the comfort of your team with JavaScript.

One thing is certain, you'll need the assistance of a library. Browser-states (:hover, :focus), and media-queries are painful in raw React.

I like Radium because the syntax for those hard parts is designed to model that of SASS.

Code organization

Often you'll see a style object outside of the module. For a todo-list component, it might look something like this:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

getter functions

Adding a bunch of style logic to your template can get a little messy (as seen above). I like to create getter functions to compute styles:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Further watching

I discussed all of these in more detail at React Europe earlier this year: Inline Styles and when it's best to 'just use CSS'.

I'm happy to help as you make new discoveries along the way :) Hit me up -> @chantastic

Is it bad practice to use inline styles?

Yes it is fine. Stylesheets are used mostly to style multiple pages in the same manner and for easier editing. Putting css directly in html also overrides all other conflicting styles.

What is the best way (CSS/Tables/Inline Styles/External Stylesheets) to format an email?

This article is great starting point.
http://articles.sitepoint.com/article/code-html-email-newsletters

Basically you use tables for structure. Use CSS inline styles instead of external. Use a table for your container, and then make another table inside that table for each section, like header, content, footer. Think of emails as if you were coding a decade ago. :)

using inline css - a no-no or okay in certain situations?

Two answers to this one:

1) It's considered good practice to keep your design (css) and your data (html) separate. By adding in-line styles, it makes it more difficult to revise the look of a site, it makes it more difficult for future programmers to modify your site, and is overall NOT the best way to go.

If everything is in a CSS file(s), then you can change the entire design of your site without having to mess with the data (HTML) of the site. This is ideal.

2) Yes, a lot of people still use inline styles very often when tweaking something small, regardless of "best practice".

what is best practice in regards to HTML propertys or CSS styling

Referring to the question...

For example, this is original size of Potato (original size):

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg">

---

Related Topics