Stylization of views - Laravel

Question

Stylization of views - Laravel

Navigation

#1 by (0 votes)

0

By default of Laravel, the welcome.blade.php view comes with styling in the view itself and not in a separate file.

I would like to know if this practice of styling the view in the same file is correct or should be stylized separately.

html css laravel laravel-blade

asked by anonymous 15.12.2017 / 01:56

1 answer

C # - If in ComboBox Exercise Caelum Automatic redirection

score 0 · Answer 1

There are three types of CSS stylesheet possible for use in WEB projects, I'll tell you a little bit about each one and at the end you can check the best option for you to use in the projects (if you already know the details from home, you can skip the end of the answer).

Inline style

This is when CSS styles are applied directly inside the opening tag of an HTML element. However, this type of use of CSS is not recommended and is deprecated by WEB developers. Here's an example of using this type of style:

<div  style=“background-color:blue;   color: red;   width:300px;  height:200px;”>
    <h1>...</h1> 
    <p>...</p> 
    <p>...</p> 
 </div>

Built-in Style

The corporate style is also not recommended and recommended, since styles written in this way are restricted to a single document and can not be reused on other pages of the WEB project.

In this method, you declare the style sheet directly inside the head section of the HTML document, using the style element. Here's an example of using this type of style:

<html> 
    <head> 
        <style type="text/css"> 
            h2 {color:#000;} 
        </style> 
    </head> 
    <body> 
        <h2>Título Secundário da Página</h2> 
    </body> 
</html>

External style

This kind of use of CSS in HTML documents is the most recommended and recommended. In this type, the CSS codes are in a document external to the HTML document, thus separating the structure and presentation layers of the WEB project.

There are two ways to embed external CSS style sheets in the WEB document:

1. Linkadas

For the linked external CSS style, use the link element to embed the external CSS document into the HTML document. The link element should be used inside the head section of the HTML document.

Example:

<head> 
    <link rel="stylesheet" type="text/css" media="screen" href="css/estilos.css" /> 
</head>

2. Imported

The style type of imported CSS works equally well with the style style of the linked CSS. What differs here is just how this is done, since in this case the @import directive is used inside the style element, in the head section of the HTML document. Example:

<head> 
    <style type=“text/css”> 
        @import url("css/estilos.css") screen, projection; 
    </style> 
</head>

The use of external stylesheets to declare css properties is one of the practices that has been emphasized and aimed at: properties declared inline form make website maintenance difficult, leave code loaded with information not relevant to mechanisms of search and for screen readers in addition, because this type of declaration has more relevance in the rendering done by the browsers, what is declared "inline" will overwrite what was declared in the external sheets, causing you to force yourself to use hacks , that is, one "fix" after another.

For initial structuring of an interface, we can create a style sheet with the basic properties (support diagram of the 3 main elements), reset in the pre-formatting of some elements and declaration of the styles of the repetition elements of the project top, menus, breadcrumbs, etc). This style sheet, for example, could be called: structure.css .

For the other pages, in addition to the "home", if your project is a medium to large project (institutional websites, e-commerces and portals) a tip is the use of, besides the structuring sheet, a sheet for each page with their respective properties. For example: home.css, noticias.css, empresa.css , etc.