Flexbox: inline as html attributes or as CSS classes?

Question

Flex box "inlined" as html attributes: (sample taken from LumX website):

<div flex-container="row">
    <div flex-item>
        <lx-text-field label="Company" disabled="true">
            <input type="text" ng-model="textFields.disabled" ng-disabled="true">
        </lx-text-field>
    </div>
</div>

Or as CSS attributes:

  display: flex;
  flex-direction: row;

What is the recommended way to use flexbox? As css classes or as html attributes?

Roberto S. · Accepted Answer · 2015-03-14 18:28:59Z

2

I think this is a somewhat subjective/relative question, as it might be a little a matter of preferences. That said, this is the first time I see inline Flexbox; all of the posts, tutorials, etc., I have seen on Flexbox have been made using CSS attributes.

It seems that the common practice is using CSS. Two reasons I come up with for doing so:

Separation of concerns: Inline CSS is usually discouraged because it messes content (HTML) with presentation (CSS). Separating them, makes it easier to maintain and modify the site.
Custom changes: You might need, for example, to use different layouts depending on the screen size (with media queries) or you might need to use vendor prefixes for browsers' support. In both cases, that would be better done with separate CSS code than with inline HTML.

answered Mar 14, 2015 at 18:28

Roberto S.

1,2921 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flexbox: inline as html attributes or as CSS classes?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related