4 ms·
I don't think anybody considers inline styles best practice. It is however a very easy way to demonstrate a specific layout fragment. Any front-end developer wi
by olavk 11y ago
I don't think anybody considers inline styles best practice. It is however a very easy way to demonstrate a specific layout fragment. Any front-end developer will understand how to extract the styles to a style-sheet.
In any case, there is no irony here. The display:table-* properties is defined precisely to mimic the layout model of HTML tables (hence the name), in order to allow you to achieve the same layout with pure CSS, so you don't have to misuse <table>-elements.
It seems some people have misunderstood the recommendation against using <table>-element for layout, and thinks there is something wrong with table-based layouts. But table-based layouts are fine, and sometimes the only was to achieve a desired effect. The problem is only misuse of <table>-elements for something which is not semantically a table.
- extra88 11y agoI think the use of inline styles was simply to make the example more compact and readable than something like: <style> .table-example { display: table; } .table-example div { display:table-cell; vertical-align:middle; } .table-example div div { margin-left:auto; margin-right:auto; } </style> <div class="table-example"> <div> <div></div> </div> </div>
- bryanlarsen 11y agoActually, inline styles are a fad now in React.[1] I've been trying them in my latest project, and am loving it; really solves some of my old pain points with CSS. Haven't been doing it long enough to figure out the new problems it causes, though. Of course such a project won't work with most non-React web projects. Idiomatic React projects tend to have a large number of small components with extensive re-use. (~5 lines of HTML not counting closing tags per component is my metric) 1: http://projects.formidablelabs.com/radium/ http://projects.formidablelabs.com/radium/