Stylization of views - Laravel

Asked

Viewed 444 times

-1

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

I wonder if this practice of styling the view in the same file is correct or should be stylized separately.

  • 1

    Friend, this is subjective. Each case is a case. A separate CSS file is usually used to facilitate organization. Now, you need to understand that the view welcome that comes in the Laravel is just one example to show that the framework works. This is not the default to be followed in development.

1 answer

-1

There are three types of style sheet CSS possible for use in WEB projects, I will talk a little about each and at the end you can see what is the best option for you to use in the projects (if you already know the details of home, you can skip to the end of the answer).

Inline style

This is when CSS styles are applied directly within the opening tag of an HTML element. However, this type of use of CSS is not recommended and is in disuse by WEB developers. See an example of using this style:

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

Built-in style

The embedded style is also not the most suitable and recommended, since styles written in this way are restricted to a single document, and it is not possible to reuse it in other pages of the WEB project.

In this method, you declare the stylesheet directly inside the head section of the HTML document, using the style element. See an example of using this style:

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

Outboard style

This type of CSS usage in HTML documents is the most recommended and recommended. In this type, 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 incorporate sheets of styles CSS external to the WEB document:

1. Linked

For the external CSS style type linked, the link element is used to embed the external CSS document into the HTML document. The link element should be used within 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 the imported CSS works equally well to the style type of the linked CSS. What differs here is only the way this is done, since in this case the @import directive is used within 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 style sheets for declaration of css properties is one of the practices that has been emphasized and aimed at: "inline" declared properties hinder website maintenance, leave the code loaded with information not relevant to search engines and screen readers in addition to, because this type of statement has greater relevance in the rendering performed by browsers, which is declared "inline" will overwrite what has been declared on the outer sheets, causing you to force yourself to use hacks, ie a "fix" after another.

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

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.