<\/body>, through the ERB tag <%= yield %>. This tag serves as an integration point to include the content of a view dynamically rendered by Rails;\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Generate test pages, with a controller pages and the actions html_test_1, html_test_2, html_test_3 and html_test_4\n<\/h3>\n\n
\n Show more…<\/summary>\n \n\n
$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n
\n
As during the creation of the controller and the actions above, the routes were also added, allowing you to access any action created from the links\n\n
\n \n \n Open the config\/routes.rb file in VSCode\n<\/h3>\n\n
\n
Include the line below at the end of the file to direct the page root to the previously created controller pages and action html_test_1. Thus, the first page to be displayed when accessing your website or system will be the html_test_1 page, from controller pages. Otherwise it would display the default rails page.\n<\/li>\n<\/ul>\n
$ cd classless-css-cdn && code .\n<\/pre>\n\n\n
\n
You could have ignored adding the routes to the created actions if you had passed the --skip-routes parameter when creating the controller. The full command would become rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Displaying Rails routes\n<\/h3>\n\n
\n Show more…<\/summary>\n
Using the terminal you can display the routes by specifying a controller (with -c), for example from controller pages \n<\/p>\n\n
\n\n \n <%= content_for(:title) || \"Classless Css\" %><\/title>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n <meta name=\"mobile-web-app-capable\" content=\"yes\">\n <%= csrf_meta_tags %>\n <%= csp_meta_tag %>\n\n <%= yield :head %>\n\n <%# Enable PWA manifest for installable apps (make sure to enable in config\/routes.rb too!) %>\n <%#= tag.link rel: \"manifest\", href: pwa_manifest_path(format: :json) %>\n\n <link rel=\"icon\" href=\"\/icon.png\" type=\"image\/png\">\n <link rel=\"icon\" href=\"\/icon.svg\" type=\"image\/svg+xml\">\n <link rel=\"apple-touch-icon\" href=\"\/icon.png\">\n\n <%# Includes all stylesheet files in app\/assets\/stylesheets %>\n <%= stylesheet_link_tag :app, \"data-turbo-track\": \"reload\" %>\n <%= javascript_importmap_tags %>\n <\/head>\n\n <body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <%= yield %>\n <\/body>\n<\/html>\n\n<\/pre>\n\n\n\n<p>Or you can display all routes with<br>\n<\/p>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n\n<ul>\n<li>It is also possible to access the routes through the browser using the address http:\/\/127.0.0.1:3000\/rails\/info\/routes. Don't forget to start the development server with bin\/dev or the standard rails server with rails server from your project's root directory. The development server is “l(fā)istening” for changes in javascript files and css files to carry out the necessary processing to make them available to users.<\/li>\n<li>For changes to these files to be made and viewed instantly in the browser, it is necessary to install a gem like Rails Livre Reload.<\/li>\n<\/ul>\n\n\n\n<\/details><br>\n<\/p>\n\n<h3>\n \n \n Let's create four pages with HTML content to test the CSS styles.\n<\/h3>\n\n<p>Ruby on Rails uses the MVC (Model-View-Controller) architecture by default to start organizing your project. Much of your code is organized in the following folders:<\/p>\n\n<ul>\n<li>When the code is related to domain\/business logic and data, keep it in the app\/models folder;<\/li>\n<li>The code related to the view (HTML, JSON, XML, etc...) will be in app\/views;<\/li>\n<li>Code related to the request lifecycle, will be in app\/controllers;<\/li>\n<\/ul>\n\n<p>?<\/p>\n\n<h3>\n \n \n Insert the content of the html_test_1 page\n<\/h3>\n\n<p><details>\n <summary>Show more…<\/summary>\n <ul>\n<li>Access the link https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html and copy all the contents of the main tag, as shown below\n<\/li>\n<\/ul>\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n<ul>\n<li>\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Start the Rails server and see the ugly plain HTML?\n<\/h3>\n\n<p><details>\n <summary>Show more…<\/summary>\n <ul>\n<li>Start the Rails development server with bin\/dev or the standard server with rails server and open the browser at 127.0.0.1:3000\n<\/li>\n<\/ul>\n<pre>$ cd classless-css-cdn && code .\n<\/pre>\n\n\n<ul>\n<li>After opening the page you will see at the top the four links that we added to the html_test_1, html_test_2, html_test_3 and html_test_4 pages that we created previously.<\/li>\n<li>So much work so far. Open each one and you will notice that the HTML has not yet been styled with any CSS, which we will do next\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n<h3>\n \n \n Reopen the app\/views\/layouts\/application.html.erb page to include classless CSS styles via CDN\n<\/h3>\n\n<p><details>\n <summary>Show more…<\/summary>\n <ul>\n<li>After the content below\n<\/li>\n<\/ul>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n<ul>\n<li>And before <\/head>, paste the following content. You don't need all of these styles, they were inserted so you can test various options.\n<\/li>\n<\/ul>\n\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n\n<ul>\n<li>Most styles are commented out, except Normalize CSS and Pico CSS\n<\/li>\n<li>Save the file and refresh the page or restart the server<\/li>\n<li>To test a style other than Pico CSS, comment out the line that configures the style's CDN, in this case the line <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@ picocss\/pico@2\/css\/pico.min.css\" \/> and uncomment the line from another style, for example, the Simple CSS line.<\/li>\n<li>To comment and uncomment a line with VSCode, use the Ctrl K C key combination.\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Now yes, stylish HTML?\n<\/h3>\n\n<p>After saving the stylesheets above and starting the Rails server you will see your HTML styled with the chosen css frameworks.<\/p>\n\n<h3>\n \n \n Dark mode\n<\/h3>\n\n<p>Some styles have the option for dark mode. To confirm, change your computer's theme in the color customization options. Search in Windows for Enable dark mode for apps and switch between dark or light mode and the HTML page automatically changes after the change in the operating system al.<\/p>\n\n<h3>\n \n \n Next steps\n<\/h3>\n\n<ul>\n<li>Organize the styles according to your preference;<\/li>\n<li>If you want to spend a little more time on the frontend, check out the customization options for your favorite style;<\/li>\n<li>Dynamically update changes made to the project in the browser using Rails Live Reload;<\/li>\n<li>Use styling from project CSS files, without using CDN;<\/li>\n<li>Replicate the capability of classless CSS framework using Tailwind;<\/li>\n<\/ul>\n\n<h2>\n \n \n References\n<\/h2>\n\n<ul>\n<li>https:\/\/dev.to\/leonardorafael\/the-classless-and-class-light-css-aproaches-2b98<\/li>\n<li>https:\/\/prismic.io\/blog\/best-css-frameworks<\/li>\n<li>\nhttps:\/\/saeedesmaili.com\/notes\/classless-css-libraries\/ <\/li>\n<li>https:\/\/dev.to\/logrocket\/comparing-classless-css-frameworks-3267<\/li>\n<li>https:\/\/github.com\/dbohdan\/classless-css<\/li>\n<li>https:\/\/github.com\/troxler\/awesome-css-frameworks<\/li>\n<\/ul>\n\n\n \n\n \n "} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://www.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://www.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://www.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://www.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://www.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://www.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://www.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://www.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://www.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/member/1246273.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/246/273/647834461a95f136.jpg" src="/static/imghw/default1.png" alt="DDD">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/member/1246273.html" class="author_name">DDD</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 04, 2025 pm 04:40 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173598004387261.jpg" class="lazy" alt="Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN"></p>
<p>If you are starting to develop for the web and your focus is not to specialize in the front-end, one of the barriers that can be most painful is being able to easily style your ugly HTML .</p>
<p>For those who have first contact, it is something enigmatic, mystical, supernatural trying to understand HTML that has a sequence of letters and numbers with predefined utility classes to apply styles to HTML, for example:<br>
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<p>CSS frameworks that use utility classes are excellent, versatile, responsive, elegant and have many other qualities, but Tailwind CSS is not the only solution. <strong>If you need something quick and simpler, using a classless or class-light CSS framework will be a better solution.</strong></p>
<p>Classless CSS Frameworks style HTML elements directly, without classes. Class-light frameworks combine automatic styles with some optional utility classes for customization, which adds greater versatility to their use.</p>
<p>Using a classless or class-light approach you can quickly solve HTML styling with one, two or three lines.</p>
<h3>
We will see below:
</h3>
<ul>
<li>Use of the Ruby on Rails framework in version 8, with Propshaft and Importmap;</li>
<li>Getting to know the file with the standard layout of HTML pages;</li>
<li>Creating and adding content to 4 HTML pages to test styling with CSS;</li>
<li>A brief mention of the routes created for the pages;</li>
<li>Change the default layout to include the link to the created pages;</li>
<li>Add 12 CSS frameworks via CDN to the default layout;</li>
<li>Know how to identify whether the CSS frameworks have light and dark mode configured by default;</li>
<li>Suggestions for next steps;</li>
</ul>
<h3>
Start a new Rails application
</h3>
<ul>
<li>The time before the rails command is used to display its execution time at the end of the command execution. In the example below, it took 47 seconds.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<p>Rails 8, within its No Build philosophy, will use by default Propshaft as the asset pipeline library and Importmap as the JavaScript library. We ask you to skip the test library with --skip-test.<br>
If necessary, you can process your JavaScript using esbuild by passing the --javascript esbuild parameter. Importmap does not perform any build or any type of processing on JavaScript.</p>
<h3>
Open the project with VSCode or your preferred editor
</h3>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<p>?</p>
<h3>
Knowing the default Rails layout app/views/layouts/application.html.erb.
</h3>
<p><details>
<summary>Show more…</summary>
<ul>
<li>By Convention over Configuration (CoC), Rails uses application.html.erb as the default layout to render all pages;</li>
<li>The original file in Rails 8 must have the same or similar content as the one copied below:
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>The top part within the <head> … </head> they have the important structural elements for the page to be rendered and function correctly. The head tag is used to include important metadata and resources that help configure the page's behavior (with javascript), its appearance (with CSS), its relationship with other systems and services, and security settings such as protection for CSRF and CSP ;</li>
<li>The main content of the pages will be rendered inside <body>
</body>, through the ERB tag <%= yield %>. This tag serves as an integration point to include the content of a view dynamically rendered by Rails;
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Generate test pages, with a controller pages and the actions html_test_1, html_test_2, html_test_3 and html_test_4
</h3>
<p><details>
<summary>Show more…</summary>
<br>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>As during the creation of the controller and the actions above, the routes were also added, allowing you to access any action created from the links
<ul>
<li>localhost:3000/pages/html_test_1</li>
<li>localhost:3000/pages/html_test_2</li>
<li>localhost:3000/pages/html_test_3</li>
<li>localhost:3000/pages/html_test_4</li>
</ul>
</li>
</ul>
<p>?</p>
<h3>
Open the config/routes.rb file in VSCode
</h3>
<ul>
<li>Include the line below at the end of the file to direct the page root to the previously created controller pages and action html_test_1. Thus, the first page to be displayed when accessing your website or system will be the html_test_1 page, from controller pages. Otherwise it would display the default rails page.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>You could have ignored adding the routes to the created actions if you had passed the --skip-routes parameter when creating the controller. The full command would become rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Displaying Rails routes
</h3>
<p><details>
<summary>Show more…</summary>
<p>Using the terminal you can display the routes by specifying a controller (with -c), for example from controller pages<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Classless Css" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
</pre>
<p>Or you can display all routes with<br>
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>It is also possible to access the routes through the browser using the address http://127.0.0.1:3000/rails/info/routes. Don't forget to start the development server with bin/dev or the standard rails server with rails server from your project's root directory. The development server is “l(fā)istening” for changes in javascript files and css files to carry out the necessary processing to make them available to users.</li>
<li>For changes to these files to be made and viewed instantly in the browser, it is necessary to install a gem like Rails Livre Reload.</li>
</ul>
</details><br>
</p>
<h3>
Let's create four pages with HTML content to test the CSS styles.
</h3>
<p>Ruby on Rails uses the MVC (Model-View-Controller) architecture by default to start organizing your project. Much of your code is organized in the following folders:</p>
<ul>
<li>When the code is related to domain/business logic and data, keep it in the app/models folder;</li>
<li>The code related to the view (HTML, JSON, XML, etc...) will be in app/views;</li>
<li>Code related to the request lifecycle, will be in app/controllers;</li>
</ul>
<p>?</p>
<h3>
Insert the content of the html_test_1 page
</h3>
<p><details>
<summary>Show more…</summary>
<ul>
<li>Access the link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html and copy all the contents of the main tag, as shown below
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Start the Rails server and see the ugly plain HTML?
</h3>
<p><details>
<summary>Show more…</summary>
<ul>
<li>Start the Rails development server with bin/dev or the standard server with rails server and open the browser at 127.0.0.1:3000
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>After opening the page you will see at the top the four links that we added to the html_test_1, html_test_2, html_test_3 and html_test_4 pages that we created previously.</li>
<li>So much work so far. Open each one and you will notice that the HTML has not yet been styled with any CSS, which we will do next
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Reopen the app/views/layouts/application.html.erb page to include classless CSS styles via CDN
</h3>
<p><details>
<summary>Show more…</summary>
<ul>
<li>After the content below
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>And before </head>, paste the following content. You don't need all of these styles, they were inserted so you can test various options.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Most styles are commented out, except Normalize CSS and Pico CSS
</li>
<li>Save the file and refresh the page or restart the server</li>
<li>To test a style other than Pico CSS, comment out the line that configures the style's CDN, in this case the line <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ picocss/pico@2/css/pico.min.css" /> and uncomment the line from another style, for example, the Simple CSS line.</li>
<li>To comment and uncomment a line with VSCode, use the Ctrl K C key combination.
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Now yes, stylish HTML?
</h3>
<p>After saving the stylesheets above and starting the Rails server you will see your HTML styled with the chosen css frameworks.</p>
<h3>
Dark mode
</h3>
<p>Some styles have the option for dark mode. To confirm, change your computer's theme in the color customization options. Search in Windows for Enable dark mode for apps and switch between dark or light mode and the HTML page automatically changes after the change in the operating system al.</p>
<h3>
Next steps
</h3>
<ul>
<li>Organize the styles according to your preference;</li>
<li>If you want to spend a little more time on the frontend, check out the customization options for your favorite style;</li>
<li>Dynamically update changes made to the project in the browser using Rails Live Reload;</li>
<li>Use styling from project CSS files, without using CDN;</li>
<li>Replicate the capability of classless CSS framework using Tailwind;</li>
</ul>
<h2>
References
</h2>
<ul>
<li>https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98</li>
<li>https://prismic.io/blog/best-css-frameworks</li>
<li>
https://saeedesmaili.com/notes/classless-css-libraries/ </li>
<li>https://dev.to/logrocket/comparing-classless-css-frameworks-3267</li>
<li>https://github.com/dbohdan/classless-css</li>
<li>https://github.com/troxler/awesome-css-frameworks</li>
</ul>
<p>The above is the detailed content of Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8638</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1579</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1444</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is 'render-blocking CSS'?" />
</a>
<a href="http://www.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_title">What is 'render-blocking CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="External vs. Internal CSS: What's the Best Approach?" />
</a>
<a href="http://www.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_title">External vs. Internal CSS: What's the Best Approach?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Does my CSS must be on lower case?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_title">Does my CSS must be on lower case?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS Case Sensitivity: Understanding What Matters" />
</a>
<a href="http://www.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_title">CSS Case Sensitivity: Understanding What Matters</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is Autoprefixer and how does it work?" />
</a>
<a href="http://www.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_title">What is Autoprefixer and how does it work?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are CSS counters?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_title">What are CSS counters?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: When Does Case Matter (and When Doesn't)?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_title">CSS: When Does Case Matter (and When Doesn't)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the conic-gradient() function?" />
</a>
<a href="http://www.miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" class="phphistorical_Version2_mids_title">What is the conic-gradient() function?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span>
<p class="Articlelist_txts_p">Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin</p>
</div>
</div>
<a href="http://www.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/about/us.html">About us</a>
<a href="http://www.miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://www.miracleart.cn/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="geibs" class="pl_css_ganrao" style="display: none;"><code id="geibs"></code><em id="geibs"><s id="geibs"><b id="geibs"></b></s></em><samp id="geibs"></samp><strong id="geibs"></strong><style id="geibs"><delect id="geibs"><cite id="geibs"><pre id="geibs"></pre></cite></delect></style><em id="geibs"><s id="geibs"><b id="geibs"></b></s></em><menu id="geibs"><delect id="geibs"><small id="geibs"></small></delect></menu><tbody id="geibs"><strike id="geibs"><th id="geibs"></th></strike></tbody><meter id="geibs"></meter><dd id="geibs"><strong id="geibs"><dd id="geibs"><abbr id="geibs"></abbr></dd></strong></dd><pre id="geibs"></pre><strong id="geibs"><sup id="geibs"><table id="geibs"><em id="geibs"></em></table></sup></strong><thead id="geibs"></thead><meter id="geibs"><bdo id="geibs"></bdo></meter><tr id="geibs"><table id="geibs"></table></tr><td id="geibs"></td><nobr id="geibs"></nobr><strong id="geibs"></strong><strike id="geibs"><tr id="geibs"></tr></strike><acronym id="geibs"></acronym><pre id="geibs"></pre><dfn id="geibs"><span id="geibs"><noframes id="geibs"><thead id="geibs"></thead></noframes></span></dfn><optgroup id="geibs"><strike id="geibs"><tbody id="geibs"></tbody></strike></optgroup><div id="geibs"><rp id="geibs"><tr id="geibs"></tr></rp></div><abbr id="geibs"><progress id="geibs"><pre id="geibs"></pre></progress></abbr><em id="geibs"><input id="geibs"><del id="geibs"><p id="geibs"></p></del></input></em><table id="geibs"><xmp id="geibs"><label id="geibs"></label></xmp></table><u id="geibs"></u><optgroup id="geibs"><sub id="geibs"></sub></optgroup><center id="geibs"></center><wbr id="geibs"><ul id="geibs"><strike id="geibs"></strike></ul></wbr><table id="geibs"></table><samp id="geibs"></samp><optgroup id="geibs"></optgroup><u id="geibs"></u><bdo id="geibs"><center id="geibs"><label id="geibs"></label></center></bdo><delect id="geibs"></delect><abbr id="geibs"><thead id="geibs"><output id="geibs"><fieldset id="geibs"></fieldset></output></thead></abbr><ins id="geibs"></ins><em id="geibs"></em><tr id="geibs"></tr><source id="geibs"></source><center id="geibs"><object id="geibs"><tt id="geibs"></tt></object></center><xmp id="geibs"><li id="geibs"><legend id="geibs"><li id="geibs"></li></legend></li></xmp><s id="geibs"><samp id="geibs"><pre id="geibs"><samp id="geibs"></samp></pre></samp></s><sup id="geibs"></sup><table id="geibs"><wbr id="geibs"><label id="geibs"></label></wbr></table><samp id="geibs"></samp><strike id="geibs"><video id="geibs"><strike id="geibs"><abbr id="geibs"></abbr></strike></video></strike><li id="geibs"></li><strong id="geibs"></strong><kbd id="geibs"><strong id="geibs"><mark id="geibs"></mark></strong></kbd><legend id="geibs"></legend><pre id="geibs"></pre><ul id="geibs"></ul><tr id="geibs"></tr><tr id="geibs"><table id="geibs"></table></tr><p id="geibs"></p><strong id="geibs"><mark id="geibs"><strong id="geibs"></strong></mark></strong><u id="geibs"></u><abbr id="geibs"><fieldset id="geibs"></fieldset></abbr><em id="geibs"></em><xmp id="geibs"></xmp><dl id="geibs"><video id="geibs"><strike id="geibs"></strike></video></dl><cite id="geibs"></cite><label id="geibs"></label><ul id="geibs"><code id="geibs"><tr id="geibs"></tr></code></ul><abbr id="geibs"></abbr><nobr id="geibs"></nobr><xmp id="geibs"></xmp><noframes id="geibs"><rt id="geibs"><small id="geibs"></small></rt></noframes><thead id="geibs"><abbr id="geibs"><fieldset id="geibs"><option id="geibs"></option></fieldset></abbr></thead><s id="geibs"><b id="geibs"><s id="geibs"><kbd id="geibs"></kbd></s></b></s><strike id="geibs"><button id="geibs"></button></strike><li id="geibs"></li><style id="geibs"><delect id="geibs"><cite id="geibs"></cite></delect></style><var id="geibs"></var><optgroup id="geibs"></optgroup><strike id="geibs"><button id="geibs"><source id="geibs"></source></button></strike><abbr id="geibs"></abbr><strong id="geibs"><dfn id="geibs"></dfn></strong><xmp id="geibs"><li id="geibs"><tbody id="geibs"></tbody></li></xmp><menuitem id="geibs"></menuitem><strong id="geibs"><sup id="geibs"><table id="geibs"><xmp id="geibs"></xmp></table></sup></strong><thead id="geibs"></thead><xmp id="geibs"></xmp><kbd id="geibs"></kbd><tbody id="geibs"><meter id="geibs"></meter></tbody><tbody id="geibs"></tbody><center id="geibs"></center><output id="geibs"><var id="geibs"><center id="geibs"><object id="geibs"></object></center></var></output><code id="geibs"><tr id="geibs"><dfn id="geibs"></dfn></tr></code><address id="geibs"></address><optgroup id="geibs"><sub id="geibs"></sub></optgroup><b id="geibs"></b><optgroup id="geibs"></optgroup><small id="geibs"></small><table id="geibs"><address id="geibs"></address></table><meter id="geibs"></meter><listing id="geibs"></listing></div>
</html>